React in 1 Hour: Learn the Fundamentals, Fast

Explore how React uses components to break a site into reusable parts, and apply JSX with braces to conditionally render sign in or log out based on the current user.

Explore state and props in React, learn how components track data like login form fields, video playback, and to-do items, and render with props and conditional checks.

Master react lifecycle methods and get started with react by using npm and create react app to generate a basic project with a webpack bundler.

Install node with a recommended version, then install the Create React App CLI using npm and create your first react app folder, including react, react-dom, and react-scripts.

Explore how to run a React app by using npm scripts, understanding start versus build, and navigating the project structure, including node modules, public, and src folders.

Explore JavaScript updates, including var, let, and const keywords, class based components, and aero functions that replace traditional function syntax.

Delete initial files to start with a clean source directory, set up index and app, import react and react-dom, render the app into the root element, and create a component.

Learn to create your first React component by importing React, defining a class that extends React.Component, implementing render, and exporting the component.

Compare class-based and function components in React, define a component with a function, render it, and understand why state requires hooks beyond this course.

Build a to-do list with a class-based React component that manages state and renders TodoList and TodoListItem components, including proper imports, exports, and rendering multiple items in the app.

Explore common styling options for React apps, including regular CSS classes, inline styles, and style components for css-in-js. Learn how to import these styles and apply a red background.

Clean up and refine a simple React to-do app by removing unnecessary components, centering content, and adding title and item inputs, while introducing JSX rendering of to-do list items.

We add state to app by defining a list with title and to-dos, including completed flags. We render items with map and pass props to the to-do list item component.

Learn how to pass props to a to-do item, supplying title and completed status, render them with a checkbox, and add a delete button.

Remove predefined state and let users create two new to-do items; update the list title with a safe onChange handler using setState, and inspect changes with React devtools.

Explore lifting up state by moving to do items data into the to do list state as an array, enabling add, remove, and rendering from the to do list component.

learn to manage user input with a controlled input, update current value via onchange, and prepare adding that value to the to-do list state.

Add items to the list by wiring an on click handler that appends the new item to the current state using the previous state, then reset the list title.

Learn to implement delete functionality by passing a function as props from the todo list to each item, using index as the key and binding in the constructor.

Implement the delete operation by updating state with a slice of the previous to-dos, using the spread operator, and binding the function when passed as a prop in React.

Master the React component lifecycle, covering mounting, updating, and unmounting, and learn how componentDidMount enables data fetching while componentDidUpdate handles automated actions and routing and exporting production assets.

Learn to fetch data in the mount lifecycle using the axioms library to perform a REST API call, handle promises with then and catch, and update component state.

Learn to add a widely used react routing library, install react-router-dom, and build navigation with browser router and links. Explore routes and switch to manage to-do list and profile pages.