Master React, Redux and Next.js: The Practical Course

Create your first react project with the create react app tool, name it with dashed words, view the public and source folder, then start the development server at localhost:3000.

Create your first React component that prints a welcome message using a function component, JSX, and a div with an h2, then render it in app.js and enjoy automatic refresh.

Explore how a React function component is a JavaScript function that returns JSX, as demonstrated in app.js, and see how index.js renders the root component.

Explore how the main app component, a function using Pascal case and JSX, becomes the root component by index.js rendering into the root div.

Learn how React renders JSX to JavaScript behind the scenes by converting a function component into createElement calls. See how to insert JavaScript inside JSX using curly braces.

Add styles to the welcome component by creating a CSS file in the source folder and importing it. Apply the welcome-heading class via className to update color and font size.

Learn to display a list of names in a React component by creating a new file, mapping items to li tags within a ul, and exporting and rendering the component.

Explore conditional rendering in React by rendering different UI based on a login state. Use if statements and the conditional ternary operator to show welcome back or please sign in.

Learn how to render lists in React with the map function, assign unique keys to each item (using index or IDs), and ensure updates re-render correctly.

Learn event handling in React by using camelCase event names like onClick, wiring onSubmit and onChange, preventing form reloads, and logging interactions to the console.

Learn how props pass data from a parent component to a child as a read-only container, enabling a username prop to render a welcome message.

Create a simple personal profile card in React by building a component that renders a name, bio, and image URL via props, styled with a dedicated profile card css.

Master props validation in React by applying prop types, default props, and custom validators; learn how PropTypes provides development warnings, self-documentation, and safer data for components like profile cards.

Explore how React state stores dynamic data and updates the UI as users type. Build a login form using useState for username and password, with onChange handlers.

Learn how stale state occurs in React during asynchronous updates, such as setTimeout, and fix it by using a functional state updater that receives the previous value.

Apply the knowledge gained so far by building a task manager app with React. Add tasks, mark them as done, and delete tasks to solidify your understanding.

Create a new task manager project and build a task list component that uses props to map tasks into an unordered list with checkboxes, a delete button, and conditional rendering.

Create a TaskInput component that includes a task name input and an add task button to add a task; create a file named Task Input js and export the component.

Modify the app component to serve as the parent rendering the task list and task input, manage tasks with useState, and pass data to child components via props.

Implement event handling to add, toggle, and delete tasks by wiring handlers to input and task list components, updating the task array with setTasks, map, and filter.

Style a react task app using app.css to configure the main app container, header, list, and buttons with hover effects; apply inline camelCase styles to reflect completed tasks with line-through.

Explore how React hooks let you use features from components, with names that start with use. Learn useContext, useReducer, and other hooks in detail in this section.

Learn how to replace prop drilling with React context to share user data across components using createContext and useContext, including provider setup and exporting a separate context module.

Master React state with the useReducer hook by building a reducer, an initial state object, and actions like increment and decrement for centralized, scalable state management.

Learn to refactor the task manager app by replacing local state with reducers and a context provider, sharing state and dispatch across task input and list components.

Learn how to use the useRef hook in React to store values that don’t trigger rerenders, and apply it to focus an input after rendering with useEffect.

Leverage the useMemo hook to memoize an expensive calculation, caching results and recomputing only when dependencies like count change, boosting React app performance.

Create reusable logic with custom hooks like useFetch to encapsulate api data fetching across components. Pass the url as an argument to reuse the hook for multiple api calls.

Identify side effects in React as operations that affect outside the function, like http requests or modifying a global variable, and learn to manage them with the useEffect hook.

Learn how the useEffect hook handles side effects like fetching data from an API and updating state, and prevent infinite loops with an empty dependency array.

Trigger the use effect hook with a single dependency, the user id, to fetch user data when the id changes, and render user details or an error.

Use a cleanup function in useEffect to abort ongoing fetch requests when the effect re-runs, preventing memory leaks and improving performance.

Build a SpaceX launch tracker that fetches from the SpaceX API, handles loading and errors, and displays launches with name, date, rocket, site, details, and a watch link.

Enable pagination on the launch tracker by slicing launches per page via current page indices, rendering page buttons, and updating current page with a smooth scroll to top.

Create a launch tracker css file and style the title, launches list, and launch items with borders, shadows, and centered layout; implement a pagination UI with hover and active states.

Explore software testing fundamentals by validating functionality, finding bugs, and preventing regressions to ensure quality. Learn the testing pyramid: unit, integration, and end-to-end tests, and how isolation affects speed.

Learn how gist is bundled with React apps created by Create React App to render components and query with screen and getByText, asserting with toBeInTheDocument.

Learn to build a simple React component and its test, including creating greeting.js, writing greeting.test.js, rendering with testing library, and testing props like name.

Master Jest matchers to validate values, objects, truthiness, and numeric comparisons using toBe, toEqual, toBeNull, and other matchers, then apply them in React component tests with render and screen.

Explore mocking in testing by replacing external dependencies with fake functions, modules, or components, and verify interactions like onClick using jest and fireEvent within a unit test framework.

Group related test cases into test suits from separate files, and use describe to create virtual groups within a file, organizing tests such as rendering with props and button behavior.

Explore Redux, a JavaScript library for predictable global state management used with React or vanilla JavaScript, where dispatching actions through reducers updates a single store and notifies subscribed components.

Create a React app and use Redux to manage a counter with increment and decrement actions. Connect the UI with a store, reducer, dispatch, React-Redux provider, and useSelector and useDispatch.

Learn how to modernize Redux usage with Redux toolkit: configureStore, slices, and createSlice, modeling a counter with increment and decrement actions for readable, scalable state management.

Explore how the React developer tools plugin enhances debugging by inspecting components, hooks, and state, showing reducers, context, and dispatch updates for tasks.

Deploy your React app to GitHub Pages, a static hosting service integrated with GitHub, by creating a repo, configuring homepage in package.json, installing gh-pages, and running deploy.

Deploy your React apps for free with Vercel, sign in with GitHub, and deploy the space launch tracker to production while viewing build and runtime logs on the deployment dashboard.

Implement a match the pairs game in React, featuring a timer, flag cards, and matched pairs that stay revealed; the game resets on completion and tracks the fastest time.

Create a React app and build a header component with a timer, start and reset buttons, then style the UI with CSS for a dark background and white text.

Implement a game timer that starts and restarts, resets to zero, and tracks the current time and fastest time using React state and useEffect with setInterval.

Show how to build a memory game deck from a flag image data file: export card images, duplicate for pairs, shuffle with a random sort, assign ids, initialize once.

Implement a React card component for card matching by wiring props (card object, handle choice, flipped, disabled), handling clicks, and rendering front and back images based on flip state.

Learn to style an interactive card with CSS by using relative positioning, front and back images, and flip animations powered by transform rotate y and transitions driven by flipped prop.

Implement the memory match game logic by tracking two choices, a disabled flag, and a reset, update matches with a 500 ms delay and restart on win to stop timer.

Restart the game after all pairs match by storing updated cards and using every to verify cards are matched, then call handleRestart to reset the timer and update fastest time.