React with Redux, React-Router, Hooks and Auth0

Get started with create-react-app by setting up a project, running npm start, and editing src files while leaving public/index.html intact to run a barebones app that displays the word rack.

Explore JSX as the JavaScript syntax for defining React UI, and see how components replace traditional HTML, CSS, and JavaScript separation by encapsulating UI and logic.

Learn how to display JavaScript data in JSX using curly brackets, declare a string variable, and compare rendering outcomes when the variable is outside versus inside the render method.

Learn how class scope and render method scope govern access to instance properties in a React component, using this to refer to the class instance and recognizing scope changes.

Explore how extends component implements ES6 class inheritance in React, where the React component class acts as a parent, passing props and prototype properties to child components through render.

Learn three styling patterns in React JSX: using a separate CSS file per component, applying inline styles via a JavaScript style object, and organizing styles in a separate styles file.

Explore how React uses the virtual dom and createElement to render and efficiently update the dom, and see how a counter state demonstrates selective updates in a single-page app.

Learn how to display object data in JSX by accessing object properties, avoid rendering entire objects, and fix the 'objects are not valid as a React child' error.

Explore React components: functional and container (class-based) components, where class components render jsx and manage state later, while functional components return jsx and stay read-only, with optional props.

Learn how to create a basic React functional component, declare it as an arrow function, return JSX, and export it by default, while covering props and the uppercase naming convention.

Create a name prop in a functional component and render it, illustrating parent and child nesting. Add an age prop set to 25 and access props via the props keyword.

Set up props in a class-based container component by importing React, extending Component, and implementing render and exporting. Access props with this.props and declare a string prop named code nickname.

Explore the concept of state as temporary data in React, such as login status, page, and dialog visibility, stored as a JavaScript object and updated with setState to trigger re-renders.

Initialize state in a React class by writing a constructor, calling super(props), and setting this.state with stateProp1. Render stateProp1 using curly braces to display it.

Understand how to update state with setState. Learn to avoid direct mutation, reference previous state, and rely on React to merge old and new state.

Learn to update component state by referencing the previous state using a functional setState, incrementing stateProp2, and swapping values in render while avoiding direct mutation.

Observe how react merges state with updates. Update one property at a time or multiple properties in a single set state call, and see updates reflect when you click buttons.

Pass state down as props to a child component by importing and declaring components. Read prop value in the child with props.prop1, and note this is not a recommended pattern.

Learn to conditionally render content in JSX by using if/else logic in a render method and replacing it with a ternary expression inside curly braces.

Explore ternary expressions in React, including nested ternaries and multi-line formatting for readability, and practice building complex, eight-branch conditions that verify in the browser.

Practice an alternate conditional rendering method by defining a render function that returns JSX, then call it in render to switch content and even compose with imported components.

Explore three ways to conditionally render JSX, with method two and method three favored over method one, and consider readability when choosing between them.

Explore the mounting phase of React components, focusing on constructor, render, and the componentDidMount and componentWillUnmount methods for automatic loading and cleanup via the virtual DOM.

Render lists in React by using map to iterate an array of objects into a list item component via props. Apply a unique key on each element to ensure rendering.

Learn to build and manage React forms by handling on change and on submit events, preventing default reloads, and syncing input values with state in controlled components.

Explore why redux provides predictable, centralized state management that persists across components, avoiding prop drilling; learn how it updates state through constraints in a framework-agnostic way, including for authentication.

Master Redux's three principles: there is one source of truth and the state is read-only. Changes come from pure functions via actions, with reducers producing new state from previous state.

Explore the basic building blocks of redux and how react-redux connects react with redux. Use code snippets and diagrams to illustrate concepts without implementing pure redux code.

Explore Redux actions and how dispatch passes an action through reducers to update state, using a type and optional payload to set is authenticated from false to true during login.

Learn how action creators, functions that return actions, serve as an alternative way to dispatch actions in Redux and support asynchronous actions, such as saving user input to state.

Learn how reducers map each action type to a single case, update the state immutably with the spread operator, and dispatch actions to handle asynchronous flows in redux with react-redux.

Define two action types, success and failure, and implement a single reducer with an initial state, set up actions and reducer files, and use a switch on action.type.

Set up redux by creating the store with createStore and the reducer, then wrap the app in the react-redux provider to expose a global state and connect components to it.

Connect a React component to Redux using mapStateToProps and mapDispatchToProps with action creators via React-Redux connect. Build a simple container to test Redux state using class-based components and buttons.

Explain how mapStateToProps returns an object with a stateProp key from the reducer, use props to maintain immutability, and feed the value through a button click.

Explore how mapDispatchToProps connects component props to dispatch actions, use dispatch to pass actions to reducers, and orchestrate global state alongside map state props in a React-Redux setup.

Understand how the connect() method links React with Redux via React-Redux, using two parentheses calls and three container scenarios: read-and-dispatch, read-only, and dispatch-only with mapStateToProps and mapDispatchToProps.

Finish wiring the container to Redux by configuring mapStateToProps and mapDispatchToProps, dispatching actions, and inspecting Redux state via props to verify the connection.

Explore the Redux flow by wiring actions and reducers, dispatching success and failure actions to toggle a state prop, and connecting map state to props and map dispatch to props.

Test the react-redux container by verifying the default state is false and dispatch actions toggle it to true and back to false.

Set up action creators by defining exported functions that return action objects, reuse existing action types, and dispatch them via user interface buttons to toggle state without reducer changes.

Learn how to pass data into a redux action creator, dispatch with a button and payload, update the reducer, and wire it through mapDispatchToProps to manage user text in state.

Learn to pull data from redux state by mapping state to props and accessing the user tax property from the reducer, then log initial state and updates to the console.

Render data to user interface asynchronously in render method with a ternary expression, driven by start user text prop from map state to props; click a button to dispatch update.

Learn to organize Redux state with multiple reducers, split the user input into its own user reducer, and combine reducers to expose a unified state in your React Redux app.

Explore updating and reading state across three libraries with a reference chart, and refer to the diagram whenever you feel confused.

Set up a router in your app and learn how routing in a single page app updates the UI without reloading the browser, using components and the virtual DOM.

Install and configure react router to handle routing, create three components, and set up a root file with router and route to map paths to components, including a homepage path.

Create a header using react-router-dom's Link with the to prop, including pattern, search, hash, and state, and render it inside the router so it appears on every route.

Set up a history object with the history library to manage routing for the reader component. Note that links are bunched and the container displays on all routes.

Explore routing in a React app by adjusting the header padding on the linkstar prop, adding slash home, and ensuring only the matched component renders.

Import the Switch component from React Router and wrap all routes with Switch to render only the first matching route, highlighting how route order and exact props control what appears.

Explore alternative rendering in react-router by using render props instead of the component prop, employing arrow functions and prop destructuring, and examining default props provided by the library.

Learn to dynamically render components by replacing hard-coded links with a data-driven approach using an array of objects, map, keys, and dynamic routing in header and components.

Explore the Auth0 flow within a reactive Redux app. Learn how JWT tokens, local storage, and Redux-managed authentication state secure token-based login and signup.

Create an Auth0 single-page app in the dashboard, then configure settings with the domain and client ID, allowed callback URL, and origins on localhost:3000 for your React app.

Initialize the Auth0 class by installing the odd zero sdk, configuring domain and client id, and setting callback and scope, then implement a login function that uses authorize to redirect.

Explore how access and ID tokens authenticate users, explain expires in milliseconds, and decode the ID token payload in JSON with jwt.io to view the user profile.

Create a token handling flow by parsing auth hash with parseHash, store access and id tokens in local storage, set a two-hour expiry, and implement logout by removing items.

Implement the callback component to handle the slash callback, extract the access token from location.hash, initialize the auth object, and call the handleAuthentication function.

Create an isAuthenticated function comparing expiry time with current time, wire Redux state with an auth check utility, and handle redirects through the callback and auth container components.

Import actions and history, wire redux state, and implement componentDidMount to verify isAuthenticated using the shared auth object. Expose a /art route with auth props and test login.

Implement authenticated, protected routes with a private route higher-order component in React using react-router. Learn to render the authorized component or redirect unauthenticated users.

Connect the header to redux state to toggle login and logout buttons based on isAuthenticated, importing connect, mapping state, and wiring login/logout actions to header props for real-time authentication.

Set up Google oauth login by using the Google developer console to obtain the client id and client secret, then test the login flow with the try button.

Set up Facebook OAuth login by following the same simple steps as the Google setup, then click try to see it working.

Set up the profile component to auto populate user info by retrieving the access token from local storage, extracting profile data, and saving it to Redux via an action creator.

Create action creators to add and remove the user profile, pass the profile to the payload, and implement a reducer with a profile property in initial state and corresponding cases.

Configure action dispatch for the profile in authcheck by wiring add profile and remove profile via mapDispatchToProps, dispatching on component did mount, and validating data with redux tools.

Dynamically render the user profile stored in Redux by building a dedicated container and a display function that shows selected properties, guarded by a private route with a header link.

Implement silent authentication to preserve user state after a browser reload. Update redux in the background via the root component's componentDidMount and a delayed dispatch.

Explain why I avoided Redux thunk, showing that its functionality can be achieved without Redux and that the small readability gain isn't worth the effort.

Hooks allow functional components to read and update state by hooking class functionality, a new React approach. Development becomes easier and performance improves as more developers migrate to hooks.

Discover the two rules of using hooks: keep hooks at the top level of the function, and never call hooks outside of a function, including the use effect hook.

Explore the four main React hooks—useState, useEffect, useContext, and useReducer—and how they read, update, and manage state in functional components.

Explore useState overview: initialize state in functional components, destructure into value and setValue, update state with setValue, and trigger automatic re-renders.

Explore the useEffect hook in React, compare it to componentDidMount, and learn three patterns: no second argument (runs every render), empty array (mount only), and dependency array (runs on change).

Explore the useReducer hook to manage state with actions, passing a reducer and initial state, and destructuring [state, dispatch] to dispatch actions like redux.

Explain how context provides a global state via a provider, enabling useContext, reading with dot notation, and updates through functions passed in the value prop.

Learn how to create and provide a React context, wrap your app with the provider, and read and update global state using the useContext hook and the provider's value.

Migrate from redux to react hooks by exporting the initial state and reducer and passing them to useReducer. Omit default export; show code for importing and dispatching actions as normal.

Explore six different ways to read an updated state in React through a concise reference table. Refer back to this table to resolve confusion and master React state reading techniques.

Introduce building a basic app that connects React hooks to an existing Redux setup, showing a side-by-side comparison of React hooks and React-Redux within the same project.

Upgrade to react hooks v16.8+, delete node_modules and npm install, adjust package.json. Convert the app class to a function component and set up a hooks directory with a hooks container.

Import the useState hook, initialize state to 0 with array destructuring, create increment and decrement functions, and display the state in the user interface with two buttons.

Learn to implement the useEffect hook with useState, simulate data fetching with setTimeout, and respond to state changes using a dependency array and conditional rendering.

Learn to implement the useReducer hook with a custom reducer and initial state, dispatch actions, and render state-driven UI that reflects true or false conditions.

Learn to implement React context to create a global state initialized in the root app component, and read and update it from any child via a context provider and useContext.

Create a global state with the context API by using useReducer to mirror redux, add a second state property, and wire dispatchers and value props to share state across components.

Create a React form that uses useState, useReducer, and useContext to manage input value and submit, display live state, and prevent default on submit.

Add useReducer to manage form state, create action types and creators for user input changes and submission, and wire a reducer and dispatch to update the interface in real time.

Set up global state for the form with a user reducer and use context to share updates across components, including dispatch and event handling for authentication workflows.