React JS - Full Beginners Tutorial

This beginner-focused tutorial introduces React for building interactive web user interfaces. It covers JSX, components, props, state, hooks, event handling, list rendering, conditional rendering, styling, and loading data from an external API; basic JavaScript knowledge is assumed.

Syllabus

- Introduction
- What is the DOM?
- React vs ReactDOM
- Setting up React
- Babel & JSX
- JSX Interpolation
- React Components
- Create React App
- Structuring React components
- Building the CountButton component
- useState hook & React state management
- React functional component lifecycle
- Reusing components
- Props
- Props vs State
- Styling & style props
- External style sheets
- Building a search bar
- Handling inputs in React
- onUpdate input event
- Building a clear input button
- Conditional rendering
- Rendering a list of items & the map function
- The “key” prop
- Using the filter function to filter our list
- Making the SearchBar more reusable
- useEffect hook
- Simulating loading data with useEffect
- Adding a loading indicator
- Loading data from an external API
- The “children” prop
- Closing remarks & outro