React, Angular, Node In-Depth Guide: Beginner to Pro (2020)

Install node.js and npm, set up a terminal, and create a project folder. Write a simple javascript file that logs hello world and run it with node.

Explore variables in programming using let and const, store booleans, strings, numbers, and undefined, and print values with console.log, including concatenating strings to build messages.

Explore variables in JavaScript with let and const, using camel case naming, and practice reassigning values while noting constants. Use console.log, breakpoints, and debugger to inspect values and monitor memory.

Define and call functions, pass parameters, and log outputs with console.log. Explore function scope, local vs global context, and the call stack.

Explore how scope controls variable access across global and function contexts, and see how references flow through nested calls with breakpoints and a debugger.

Explore var, let, and const scoping in JavaScript, comparing function scope with block scope, and learn hoisting, the creation phase, and access before declaration.

Learn to model car data using variables and a display function, then refactor toward objects, using string interpolation to show brand, type, and year and practice debugging.

Explore creating and describing objects in JavaScript, using dot and bracket notation to access properties like brand, type, and year, and define object-based display functions for cars.

Learn how to return values from functions, store results in variables, and call returned functions, with live examples using console logs and debugging.

Learn how to define a car class as a blueprint with properties like brand and year, initialize with a constructor, and create instances that share a display function.

Explore arrays in JavaScript, from creating empty arrays to storing values like car brands. Access items by index, check length, and add or remove elements with push and index-based removal.

Master iteration in JavaScript with for, while, and for-each loops to traverse car arrays, display each car's year and brand, and debug with breakpoints.

Explore inheritance by extending a car class to racing car, using a super constructor and base class features. Add a category and a shared display info method.

Explore how for each function, map function, and filter function use callback functions to iterate, transform, and filter arrays, with practical car examples and hands-on demonstrations.

Explore and implement custom iterators inside a simple library, building map, for each, and filter functions using callback patterns to iterate over data and produce new results.

Install the readline-sync package with npm and use it to get user input inside a while loop with isRunning flag. Convert input to lowercase to handle exit and say goodbye.

Build a command-line interface using an npm library to handle user input, display options, and manage cars with add, remove, list, and exit commands, normalizing input to lowercase.

Explore switching control flow using switch statements and cases to respond to user input, including breaking after each case and a default for invalid options.

Implement a car storage class to manage a list of cars with add, remove, and display operations, explore constructor initialization, empty lists, and copy by reference versus by value.

Create a car manager that collects brand and year from user input, builds a car object, and adds it to a car storage system.

Remove a car from storage by its unique id using a car manager, find the car index, and splice it out, with safeguards for not found.

Demonstrate how arrow functions bind the outer this to callbacks, compare with regular functions, and show binding techniques like using self and bind to preserve context.

Master transforming callback functions into arrow functions through a practical car management example, converting for each iterations and displays to arrow syntax, and explore asynchronous code with promises and observables.

Learn how asynchronous code works with callbacks, delayed execution via setTimeout, and retrieving data from a database. Compare synchronous and asynchronous flows and preview promises and observable.

Explore how to handle asynchronous data with promises in JavaScript, including creating promises, resolving and rejecting, chaining with then, error handling with catch, and using async/await for cleaner code.

Explore how promises work by building a custom Promise class, implementing resolve and reject, chaining then handlers, handling errors with catch, and using async in practice.

Build a simple observable class, handling next, error, and complete events, and implement an unsubscribe mechanism by tracking an isSubscribed flag to stop emitting after termination.

Explore how node.js runs JavaScript under the hood by examining the v8 engine, just-in-time compilation, and the mixed compiled/interpreted model, with hands-on code and shell examples.

Learn the basics of a React project, set up a new project, understand folder structure, build a simple counter component, and manage state and props across functional and class components.

Initialize and scaffold a new React app using create-react-app, install dependencies with npm install, and start the development server to explore project structure and upcoming framework details.

Explore the React project folder structure and key dependencies, with npm install. See how index.js bootstraps the app and mounts the main component to the root, using JSX.

Demystify the React framework; show how create element builds elements and renders to the document object model, with no magic, and explore debugging using the up and child function.

Learn to build a React counter app with a functional component, displaying a centered value and increment and decrement buttons, with basic styling and onClick handlers.

Learn how to manage state in a React counter app using useState, count, and setCount to increment and decrement with on click.

Explore building a counter app as a class component by extending React.Component, managing state with this.state and this.setState, and using render and lifecycle methods like componentDidMount and componentDidUpdate.

Explore how to pass props from a parent to a child in React, validate them with prop-types, and render a title in a counter app.

Learn props, functional and class components, and the use effect hook to build a counter with account value, increment and decrement, and use effect dependencies.

Use the useCallback hook to memoize functions, re-creating them only when dependencies change, preventing unnecessary renders and improving performance in React components.

Learn how to prevent unnecessary re-renders in React by wrapping a functional component with React.memo, pass props only when changed, and optimize child components.

Explore how browsers display websites, send HTTP requests, and render HTML with scripts and styles, then compare single-page and multi-page apps and client-side rendering.

Learn how single-page applications load content in the browser, see how a development server bundles files into a single JavaScript file, and explore debugging with source maps.

Learn to create the app layout with bootstrap styling, implement a listing component, and build class pages using a class component with hard-coded data and card subcomponents.

Learn how to integrate the bootstrap framework with a React app by installing bootstrap, importing its CSS, using bootstrap classes with className, and building a header.

Explore Bootstrap integration and practical styling tweaks, including dropdowns and navigation bar adjustments. Learn how rem and em units influence typography and layout for responsive web design.

Learn to style a bootstrap navbar by adjusting padding and margins with em units, override defaults via CSS specificity, and customize nav items, hover, focus, and the search input.

Learn how to use SCSS stylings in a React project, compile to CSS, organize with styles folders and partials, and manage colors with variables like main blue color.

Create a rental home component within the pages folder using a class component, apply bootstrap grid and cards for layout, and separate styling files, while hard-coding data for now.

Learn to render a rentals list by mapping over state data, assign unique keys, and refactor into a reusable rental card component with props for title, city, image, and price.

Learn to style rental cards by category, generating dynamic css classes and interpolating category values to apply distinct colors for house, apartment, and shared apartment or shared house.

Explore state management in react applications by creating pages with navigation, building listing and detail views, and wiring a data store with components, services, and actions for future data flows.

Build a naive router by creating login, register, and home pages. Read the browser path from window.location and render pages accordingly with conditional logic.

Learn to implement a custom routing approach by wrapping components, injecting props to children, and using history api for navigation without page reloads.

Learn to implement react-router-dom for client-side navigation in a React app, using BrowserRouter, Switch, and Link with exact paths to render components without page reloads.

Learn to implement a React context store provider to centralize rentals data, moving from hard-coded state to a shared store that can be accessed across pages.

Explore building a higher-order component connect that injects store data from context into components, enabling selective props and easier debugging.

Explore how map state to props connects a component to a redux store, using a higher-order function to select state data and pass it as props.

Learn to set up a Redux store in a React app, install Redux, create and combine reducers, and provide the store with a provider for connected components.

Explore how to integrate the Redux store, use dispatch to send actions, and update state via reducers while connecting components for data flow and debugging in an example.

Update state by dispatching rentals actions from the rental home component, subscribing to the store, and selecting a rentals slice to reflect data on the UI.

Add a new rental to the store by dispatching a create rental action, updating the rental array immutably, and connecting the component to reflect state changes.

Build a dynamic rental detail page with routing and state management in React, dispatching fetch by id and navigating from the rental gallery to a detail view.

Build a rental detail component that retrieves id from the URL via a higher-order component, fetches the rental with redux actions, and renders images plus category, city, rooms, and description.

Learn to integrate Font Awesome in a React app by installing npm packages, configuring a shared icon library, and importing solid SPG icons for efficient use.

Configure a base url to src to simplify imports, enabling all modules to import from the src folder and avoid deep relative paths across pages, components, and actions.

navigate to the deployment and node sections to continue your node implementation, starting with the api server. review the notes for section introductions and prepare for the next lecture.

Demonstrate sending requests from a client application to a server, retrieving data, and rendering a visual data display while finishing a rental log page.

Learn how to manage promise-based actions in Redux by implementing a custom promise-to-dispatch wrapper, handling actions that are functions or promises, and chaining with then to fetch rentals.

Learn how redux thunk enables dispatching functions as actions to handle asynchronous calls with dispatch in thunks, and set up middleware with applyMiddleware and redux devtools.

Develop and validate login and registration forms in a React application, wire validators, and organize components in forms and components folders using a React form package.

Copy login and register components into the pages folder, apply bootstrap form styling, and add public/images for the pages; render form values and validate inputs with provided resources.

Learn to get login form values with on change handlers for email and password, store them in state, and prevent default on submit.

Learn to build a login form with useForm, register inputs by name, and handle submit, then refactor into a component to pass login data to the login page.

Apply comprehensive login form validation in a React/Angular/Node setup by enforcing required fields, minimum length, and email patterns, display errors, and use bootstrap styling.

Build a register form component with validation for username, email, password, and password confirmation, handling on submit and displaying errors while refactoring the login form.

Create and integrate a custom validator for password confirmation that must match the password, exporting the function and wiring it into the form to display an error when mismatched.

Learn to implement a custom error message component in React forms, wiring it to form errors and displaying messages for required fields, minimum length eight characters, and invalid email format.

Create a custom error message component for reactive forms. The component uses a name prop and a render function via children to display specific field errors.

Build a custom error-handling component for a forum. Then study server-side authentication in section 35, guiding you to implement authentication and validation on your own servers.

Register a user in a React app, log in, and validate a token saved in a local store. Explore providers and consumers patterns for authentication and token checks.

Implement a user registration flow by sending register requests to the server via redux actions, storing new users in the database, and redirecting to login on success while handling errors.

Implement login functionality by submitting user data to the API, handling the JWT token on success, and redirecting to the home page while displaying API errors on failure.

Refactor the login flow into an auth provider and expose a login API via context. Decode tokens to extract user details and supply sign-in functionality to components.

Decode a json web token (jwt) and dispatch login actions in a redux-based authentication flow, storing tokens in local storage and wiring providers for persistent user sessions.

Explore implementing an auth reducer with local storage, dispatch actions, and redux patterns to manage user authentication, header updates, and login/logout behavior in a React app.

Perform structural changes by extracting providers into separate files and introducing a useAuth hook to manage authentication state. Leverage useContext and useEffect to propagate checkout state across components before rendering.

Learn how to implement a token-based authentication check in a React setup by retrieving a token from local storage, decoding it, validating expiration with moment, and updating auth state.

Build a protected route gating a secret page. Use a wrapper and auth service to verify and decode the token, check expiration, and redirect unauthenticated users to the login page.

Learn to implement a guest route in React by guarding pages with authentication checks, cloning and passing children, validating a single child, and redirecting logged-in users to home.

Implement a login and registration flow that redirects after registration and passes a message via location state, then display the message on the login page using props and state.

Sign up for a GitHub account, sign in, create a repository, and push changes. Learn to view comments and manage your GitHub workflow in the React, Angular, Node guide.

Push local code to a GitHub repository, inspect changes with status and diff, commit, and push to master while setting up the project with npm install and npm start.

Create feature branches from the master, push changes to a remote branch, and open pull requests for review before merging back to master.