React Tutorial
A front-end JavaScript library gaining popularity globally
List of Lessons to Learn React
This is a list of React lessons where you can start learning immediately without environment setup.
Study
React I
Estimated 1h40m
0%
React is a JavaScript library used to make beautiful, interactive websites. In React Study I, we'll learn about "state", one of the most important parts of React!
What You Can Learn in This Lesson
-
1. Getting Started
-
Welcome to React
-
Displaying Things
-
-
2. Introduction to JSX
-
JSX
-
The img Tag
-
The App.js File
-
JSX and JS
-
-
3. State & Events
-
Updating the Page
-
The onClick Event
-
State
-
Displaying State
-
Updating State
-
Adding Methods
-
-
4. Counter App
-
The Counter Feature (1)
-
The Counter Feature (2)
-
Study
React II
Estimated 1h30m
0%
In React Study II, you'll learn to use important React fundamentals like props and components.
What You Can Learn in This Lesson
-
1. How React Works
-
How React is Displayed
-
Applying CSS
-
-
2. Components
-
Creating Components
-
Displaying Components
-
How To Use Components
-
-
3. Props
-
Props
-
How to Use Props
-
The Map Method
-
Study
React III
Estimated 1h40m
0%
In this lesson, you will create a website using and reviewing what you learned in React Study I and II like state, components and props.
What You Can Learn in This Lesson
-
1. Checking the Target
-
Create a Website with React
-
-
2. Creating Components
-
Creating Components
-
Creating a Component
-
Creating Several Components
-
-
3. Preparing the Modal
-
JSX of the Modal
-
Hiding the Modal (1)
-
Hiding the Modal (2)
-
-
4. Completing the Modal
-
Displaying the Modal
-
Hiding the Modal
-
Study
React IV
Estimated 2h
0%
In React IV, you will learn how to create a contact form. Let's create an authentic form equipped with functions such as input data check.
What You Can Learn in This Lesson
-
1. Check the Target
-
Checking the Contact Form
-
-
2. Displaying the "Sent" Message
-
input and textarea
-
Creating the "Sent" Message
-
Updating the State with onSubmit
-
-
3. Managing the Input Value with State
-
Managing the State of the Input Value
-
Acquiring the Input Value with onChange
-
Updating the State
-
-
4. Checking the Input
-
Creating the Error Message
-
onChange and Input Check
-
-
5. Challenge
-
Managing the State of the Message Content
-
Courses Related to React
Expand what you can do by learning related courses.
Start the lesson from the initial state.
Warning: your code will be deleted.
Review the lesson without
resetting your code.