React and Redux: Learn By Building Real World Projects [13H]

Launch your first React app with Create React App, set up a node environment, and edit source files in Visual Studio Code to see live browser updates on localhost:3000.

Explore the anatomy of a react application by examining create react app files and render flow. See how jsx maps to components and logo.svg is imported and bundled.

Learn to pass information into React components using props, render dynamic text with this.props, and access custom values to customize a status component.

Learn to implement click events on a like button that increments per status, using component state, constructor binding, and setState in React.

Lift the status data into a single array and map through it to render multiple statuses, while refactoring the status component into its own file for modular, collaborative React projects.

Mapping lists part 2 demonstrates refactoring the app to a status list component that manages an array of status strings and uses map to render each as a status component.

Build a status list in React by rendering statuses with map, add a text input and button, and bind input state with on change to add new statuses.

Learn to add list items in a React app by handling form submission without refresh, updating the statuses array, and clearing the input for new entries.

Explore deleting statuses in a React app by adding a top-right X button, using relative and absolute positioning, and wiring the delete function through components to update the statuses array.

Build a BMI calculator with weight and height range sliders, update BMI in real time, and learn to bootstrap React apps using Parcel for zero-configuration bundling.

Explore range inputs in a BMI calculator app built with a React class component, using min, max, and step, and bind onChange to update state and render results.

Explore display filters in React by keeping height in inches and deriving feet and inches for display, while computing weight, bmi, and classification from state, with pluralization and two-decimal formatting.

Build a React app that makes network requests to an API to fetch placeholder text, using bacon ipsum and lorem ipsum generators to display paragraphs.

Set up project infrastructure for a dummy text generator, including an index page and a dummy text component in a components directory, wired with React and React DOM via main.js.

Learn to perform fetch API requests in a React and Redux app, parse JSON, and render dynamic paragraphs with promises and arrow functions that preserve the correct this context.

Learn how to fetch data in a React app using the componentDidMount lifecycle, manage real-time text updates with setState callbacks, handle loading states, and ensure stable UI when paragraphs change.

Implement an isLoading state to show a loading indicator during fetch requests and render results with a ternary expression in React JSX.

Learn to build a navigation bar and switch between pages with React Router. Use BrowserRouter, Route, and Link to define routes for home, about, and contact.

scaffold a react project with yarn, install react, react-dom, and react-router-dom. create basic infrastructure and components, configure babel rc, and prepare a simple app with a container and routing.

Create and style reusable content components for a React app, then wire up routing to swap between home, contact, and about pages using React Router.

Import browser router, Route, and Link to wrap your app, define routes with path and component, use exact for root, and handle grouping with div or fragment for single child.

Learn to build dynamic navigation with react-router by using the Link component inside a browser router, swap components without page reload, and customize the page background per route.

Build an inbox app with react and router, displaying emails from fake data, marking read or unread, selecting all, and navigating to a detail view with keyboard shortcuts.

Automating project setup, this lecture demonstrates building a reusable React app template, installing react and react-dom, and configuring babel and bash profiles to speed future projects.

Learn to generate realistic mock data with mockery, wire an inbox component, map state emails to an email row, and style with css while debugging rendering.

Style the inbox rows with overflow, inline block, and ellipses to display date, subject, and body, and wire routing to show email details on click.

build a client-side routing flow with react router to navigate from the inbox to a read view using dynamic /read/:id paths and link components.

Learn to mark emails as read by building a React inbox with read state, dynamic class names, and state lifting, including navigation and component communication.

Move the link inside the email row to separate the toggle button from the detail link, enabling correct read/unread toggling without opening the email details.

Learn how to implement multi-select with checkboxes in an inbox app, enabling bulk actions like mark read or unread, with state management and select all/none functionality.

Build keyboard shortcuts in a React inbox app, using j/k to move the selection and x to toggle emails, with a blue left border showing the currently selected row.

Learn how redux uses a single store to hold all state, with read-only data updated by actions and reducers that copy state via pure functions.

Explore how React and Redux manage app state with a single source of truth, using actions, reducers, and a store to build a simple counter.

Debug a simple redux counter by validating the store and reducer, fixing action type typos, and initializing the initial state with a default value to enable reliable increments.

Build a command line blackjack game with Redux, managing a deck, dealer, and player hands, while dispatching shuffle, deal, hit, and finish hand actions.

Dispatch keyboard input to redux to control blackjack actions like shuffle, deal, and hit, while computing hand values (ace as 11) and planning robust reducer logic.

Prevent errors by adding safeguards to deal and deck and hit logic, refusing deals with too few cards or hits that would exceed 21, and improving debuggability.

Learn to connect react and redux by building a simple clicker component, creating a store, actions, and a reducer, and integrating redux with a traditional component.

Wrap the app in a Redux provider to expose a store across the app. Use connect with mapStateToProps and mapDispatchToProps to read state and dispatch actions.

Learn to wire a React app with Redux by connecting components to a single store, mapping state to props, and dispatching actions via mapStateToProps, mapDispatchToProps, and reducers.

Set up a React and Redux project to build a grocery checkout app, displaying items with names and prices on the left and a cart on the right.

Learn how to implement a shopping cart in React by adding and removing items, calculating totals, and lifting state through props, with debugging and preparing for Redux integration.

Convert a React grocery cart to a Redux app by creating a store and reducer, adding actions like add to cart and remove from cart, and linking components with connect.

Implement undo history in redux by tracking past states and a history index to enable undo and redo in a cart application.

Learn how Redux action creators in a single actions file improve robustness by eliminating typos, standardizing action shapes, and enabling dispatch of undo and redo actions across reducers.

Learn to use React Router with ducks, combine multiple reducers into namespaced state for teams and games, and build a sports tool to track teams, games, and scores.

Integrate react router dom to navigate a redux-based sports app by wrapping with browser router, defining home and team detail routes, and connecting the team detail page with mapStateToProps.

Build a game detail view with React Router in a React and Redux project, wiring up game routes, detail pages, and data fields like team names and points.

Learn to build a team creation page in React and Redux, wiring navigation, routes, and a form that dispatches create team actions to the store.

Learn how to implement a team edit page in a React and Redux app by updating the teams reducer, dispatching edit actions, and populating and handling a dynamic edit form.

Build and route a create game page in a React and Redux app, converting team data into dropdowns, dispatching a create game action, and updating the games state.

Learn to add team score controls on the game detail page with increment and decrement buttons, dispatch score updates, and immutably update the game reducer to cap at zero.

Build a standings table by computing team wins, ties, and losses from all games, then sort and display results using redux-connected components.