React 101 in 60 minutes

Learn to set up the React development environment, choosing between an online sandbox and a local setup, and explore npm packages like react-dom and react-scripts.

Set up a development environment with node and npm, bootstrap a new project with create react app, and explore public and src folders to learn rendering with state and props.

Explore what React is as an open-source library from Facebook, focusing on how it renders the UI and sets the foundation for creating interfaces.

Discover why React emphasizes a component-based, declarative UI that makes state easy to reason about, and how isolated components can be composed to build web, mobile web, or desktop apps.

Create and render your first React component by setting up a local project with a web app, then import React and render a Hello world component into a div.

Learn how jsx embeds javascript expressions in curly braces, uses tsx to render elements with attributes and children to build your user interface.

Learn how React components and props work, compare function components with class components, and render dynamic UI using JSX, props, and keys for multiple component instances.

Explore how state updates drive the user interface by rendering a clock every second and calling a function to refresh the time, introducing the core concept of state in React.

Learn how to use setState correctly by avoiding direct state mutations, using functional setState with prevState, and recognizing asynchronous updates to props and state.