Advanced React 2023 (Performance & Best Practices)

Set up your project to work throughout the course and establish a foundation for all exercises and examples. Ensure the initial setup is correct for reliable progress.

Explore Redux and Redux-Saga: state and side effects, Material UI components, Axios for HTTP, routing with React Router DOM, and Ember.js for data; Babel and Webpack handle transpilation and bundling.

Explore the source folder and its design-pattern driven structure, separating containers (modules) from reusable components, with actions, sagas, selectors, services, utilities, and a storage store.

Automate repetitive container setup by using npm run generate a container to create a new folder with components, index, and default actions, selector, and producer from templates.

See how reducers act as listeners to dispatched actions, taking state and action to return a new, cloned state. Apply switch cases to update state based on action types.

Explore redux-saga features to write your own saga effects and structure async code for maintainability and readability in your React applications.

Learn how Redux middleware runs between dispatch and reducers, catching actions to run logic, inspect state, and forward actions with next, using saga middleware demonstrations.

Learn how saga listens for dispatched actions using take every and executes side effects. Explore core effects such as put, call, and select to dispatch actions and perform async requests.

Explore how the high order component pattern works, a function that takes a component and returns a new one, injecting props and redux state via with and connect.

Preserve state in a functional React dynamic form using useState to hold a fields array initialized with first name and last name labels, and add fields on button clicks.

Learn to update state in a functional React component by clicking a button to add a new field, using useState and the spread operator to extend the fields array.

Learn how to use the useRef hook to create and attach a container reference, and measure the container height as text fields are added.

Observe props changes in a functional React component using useEffect with dependencies. Update and render the first three fields when not extended form, or all fields when extended form.

Learn how to build a custom hook for a dynamic form by implementing a use interval that remembers its callback with a ref, triggering every three seconds to add fields.

Adopt practices to deliver a high quality code base by focusing on performance, consistent design, scalable modules, and reusable, maintainable code.

Build a reusable network service with configurable endpoints and headers, using axios for post, get, put, and delete requests; manage authorization via a setCredentials function and environment-based base URLs.

We store user credentials from the server in cookies to remember the user on subsequent visits, saving the token and email and initializing authentication state from cookies.

Test the authentication flow, manage credentials in state and browser cookies, implement logout, and redirect to the navigation container upon authentication while using a user selector to display the username.

Explore important software principles that I recommend developers adopt to achieve high quality code and high quality applications.

Discover and apply the solid principles, focusing on the single responsibility and dependency inversion principles, to build modular, maintainable JavaScript code with encapsulated services and reusable components.

Explore the reusability principle as duplicate button code becomes a reusable component with props like variant, color, disabled, and text, boosting maintainability and a consistent user interface.

Explore consistency as a core design principle, defining it as the same reaction for the same action and identical UI elements across views to create conventions and reduce user confusion.

Implement a light and dark mode toggle by dispatching an update theme action, wiring a switch in the navigation header, and injecting the theme via a provider.

Discover how themes centralize styling in a React app with a single theme object to control colors, typography, light and dark modes, and Material UI overrides.

Explore how to structure a React Router app using BrowserRouter, Switch, and Route to render components based on path, use exact matching, and pass parameters via path or render props.

Implement public and private routes to guard pages by authentication, using reusable route components that redirect authenticated users to home and unauthenticated users to login, with a navigation container.

Navigate between pages by wiring the sidebar buttons to the link components and update paths for vacations and profile, pushing routes through the history to render the corresponding pages.

Learn to pass and read URL parameters with useParams, navigate to vacation details, and fetch and render vacation data via a container and dispatch actions on mount.