React Tutorial

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.

Was this tutorial helpful ?