Advanced React and Redux

We start from scratch by building the app component and boilerplate for CommentBox and CommentList, then write tests to verify they appear inside the app.

Learn how to name and organize React tests with Jest, including .test.js files, __test__ directories, and app.test.js vs app.spec, plus importing React and the component.

Switch to absolute imports by configuring a dot ENV file with node_path=SRC, update app.test.js, app.js, and index.js to use SRC paths, and restart the test runner and dev server.

Explore testing a comment box component with enzyme using full DOM render to verify a visible text area and button, text input, form submission, and clearing the text area.

Extracts common setup into a beforeEach, and ensures afterEach unmounts the CommentBox to prevent test pollution, creating a fresh instance for each test in this file.

Learn to test a comment box by simulating a change event on the text area, wiring its value and onChange to setState and re-render with a fake event.

Wire up Redux to a React app by importing the provider tag and createStore, connecting reducers to a store, and wiring components via connect for access to state and actions.

Create a dedicated root.js to export a component that provides a Redux store via React Redux, wrapping app components and enabling tests to render with a store.

Set up a Redux-connected component test with Enzyme's mount and a root provider, and verify each comment renders as an li with visible text. Discuss injecting test data into Redux.

Test a React and Redux comment list by verifying the number of rendered comments and the visible text for each comment using enzyme render and cheerio toContain text.

Implement a simple authentication flow by adding an auth reducer that defaults to false and a change_auth action creator to toggle the signed-in state.

Wire up the auth reducer under the auth key in reducers/index.js, then implement a class-based app that renders a header with home and post links and a sign in/out button.

Explore how the Redux promise middleware and a middleware stack inspect actions, handle promises, and re-dispatch new actions through all middlewares until reducers receive data.

Handle promise-based actions in Redux middleware by waiting for the payload to resolve, then dispatch a new action with the response data to feed reducers.

Create a user model with email and password using Mongoose, enforcing uniqueness and lowercase normalization, then define a schema, build a model class, and export it for use with MongoDB.

Install and configure mongodb on OS X using Homebrew, update brew, install mongodb, create data/db, take ownership of the directory, and start mongod to run the server.

Extract email and password from the request body of a post request. Check the user model for an existing email and, if none exists, create, save the user, and respond.

Implement Passport.js with a JWT strategy to authenticate users and protect routes, by installing Passport and passport-jwt and configuring token extraction.

Understand how bcrypt stores the salt and the hashed password and uses them to verify sign-in by re-hashing the submitted password. Add a compare password method on the user model.

Wrap the app in a BrowserRouter, add a welcome route at the root, and render it through the app's children prop to centralize routing and component rendering.

Post email and password to the backend API using axios with redux thunk, wiring the signup action creator to the signup form.

Configure the backend to allow cross-origin requests by installing and wiring the CORS module, enabling requests from localhost 3000 to localhost 3090, and resolving CORS errors.

Wire up signout component with the signout action creator using react-redux, call removeItem to delete local storage token and remove json web token from the reducer on mount.

Discover how test reports reveal which specs ran and failed using describe, it, and expect in React projects. Explore live reloading and test driven development through planning and building features.

Learn how to condense tests in React by using a before each hook to set up a shared component before each test, reducing repetition and clarifying test flow.

Refactor tests with beforeEach to render components ahead of time, then verify the app displays a comment box by asserting the presence of a .comment-box element.

Wire up the comment box as a container and connect it to the saveComment action creator using react-redux. Dispatch saveComment with the current comment payload and type SAVE_COMMENT.

Create a comments reducer in a Redux app using tdd, scaffold tests for the default action and save comment, and manage an array of comments as state.

Build a simulate event helper for React components by extending jQuery with $.fn.simulate and using React test utils to trigger events on the first matched element.

Set up React Router with home and resources routes, render nested components via the app, simulate sign-in to toggle auth state, and involve a higher-order component for shared logic.

Flip the user authentication state by introducing a CHANGE_AUTH action, an authenticate action creator, and a simple authentication reducer wired to state.authenticated.

Learn to build a require authentication higher-order component that wraps any child component, guards protected routes by redirecting unauthenticated users to the home route, and passes props through.

Learn how to implement a middleware with the three-function signature to handle asynchronous actions, using an async.js example that logs each action and forwards it to reducers via next.

Leverage an async middleware to resolve actions with promise payloads before reaching reducers, by dispatching a new action with the same type after resolution and re-running through all middlewares.

Hook email and password fields to redux form, wire the on submit handler, and route the sign in form via redux router with this.props.children.

Explore how a single action creator handles authentication by submitting email and password to the server, then redirects to /feature, updates state, and saves the token with error handling.

Create a signout component that logs out on route visit, dispatches a Redux action, and displays a goodbye message via a dedicated signout route.

Improve form validation in advanced React and Redux by enforcing required fields for email, password, and password confirmation, showing per-field errors on touch, and exploring code refactors.

Add a root index route to render default content on the root path, and create a Welcome component that shows 'Welcome to our slice of paradise' for onboarding.

Implement client-side authentication with signinUser and signupUser, localStorage token management, sign-out handling, signup validation via redux form, imperative validate function, and the RequireAuth higher-order component guarding Feature in the router.