What is React?
React is the library for web and native user interfaces. We’ll focus on React for the web in this tutorial series.
React does two main things:
- Display HTML.
- Change the HTML when the user interacts with the application.
In React, a component is a function that returns JSX. JSX stands for JavaScript XML. JSX is an extension syntax of JavaScript that allows you to write HTML-like code directly within JavaScript code.
The following example shows how to create an App
component that displays the h1
tag with the text "Hello, World!"
:
function App() {
return <h1>Hello, World!</h1>;
}
Code language: JavaScript (javascript)
React receives JSX from the App
component, translates it into JavaScript, and displays the component on screen. In this example, React renders the <h1>
tag on the screen.
Typically, a React app has many components that work together. Each component is responsible for displaying a portion of the user interface (UI).
To learn React quickly, it’s recommended to write many React applications, starting from simple ones and gradually moving to real-world projects.
Section 1. Getting started with React
This section will help you start with React quickly by explaining how React works.
- React Hello World – Let’s create a simple React app.
- JSX – Learn about JSX and how to write JSX elements properly in a React application
- Props – Learn to pass data from the parent component to child components using the React Props system.
- Key Prop – Show you how to render a list in the React app properly using the key prop.
- Conditional Rendering – Learn how to render JSX elements based on a condition.
- Events – Guide you on handling events such as mouse clicks or form submissions using the React events.
- State – Show you how to work with React state and events to create interactive React components.
Section 2. Interacting with API
This section shows you how to create a react app that uses an external API.
- React API Call – Show you how to create a Wikipedia search app in React.
Section 3. Todo Apps
In this section, we’ll progressively create three versions of the Todo app in React.
- React Todo App – Learn how to create a React Todo App step by step.
- React Todo with API – Create a Todo app that uses API for data persistence.
- React Todo App with Context – Use context to share state across your entire React App.
Section 4. React portals & reducer
- React Portals – Learn about React portals and how to use them to create a reusable modal component in React.
- useReducer – Show you how to use the useReducer hook to manage multiple closely related state more efficiently.