Course Content

Introduction to React

1. Getting Started: ES6

Why React?Node.js and npm ES6 Variables ES6 Arrow Functions ES6 Map Method ES6 Destructuring ES6 Spread Operator ES6 Ternary Operator

2. Getting Started: JSX

JSX Introduction JSX Variables & Nested Elements JSX Embedding Expressions JSX Specifying Attributes Getting Started with React

3. React in Practice

Getting familiar with JSX Writing more Complex Elements using JSX Creating a React-Based Project Structure of a React Project

4. React Components

Introduction to Components Functional Components Creating React Components Importing Components

5. Controlling Data & Content

Passing Data into Components Conditional Rendering Loop Based Rendering Keys in Lists Event Handling Creating a TODO Application

6. Hooks

Introduction to Hooks Using the State Hook The Effect Hook Rules of Using Hooks Creating Custom Hooks Fixing the Todo Application

7. React Router

Introduction to React Router Route-Based Rendering Creating Navigation Bars Using Params

Getting Started with React

The simplest way to start using React is to create a basic HTML page:

index.html

Afterward, to install React, we will import React to our project by adding the following links in the header section:

index.html

However, this won't be sufficient since we also want to be able to use JSX for ease in creating elements. After adding all three of these links, the HTML script should look something like this:

index.html

React needs an HTML container element (for example, a <div> element) to render components inside the HTML document. This base container is also often referred to as root.

Everything React renders will be inside this root element. We will create a <div> element in the HTML body, with an id "root" so we can access it from JavaScript code.

index.html

To complete the program, we will add two additional lines of code, which will print a "Hello World!" heading inside the root:

index.html

The ReactDOM.createRoot function creates a React root object from the referenced element – an object that enables React to create elements inside the HTML document. Here the referenced element is the <div> having the id="root" (document.getElementById('root')).

The second line of code is the render method of the root object. The render method accepts JSX elements or React components to be rendered inside the root. Here we are rendering a simple <h1> element having "Hello World!" as its content.

Everything was clear?

Thanks for your feedback!

Section 2. Chapter 5

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Course Content

Introduction to React

1. Getting Started: ES6

Why React?Node.js and npm ES6 Variables ES6 Arrow Functions ES6 Map Method ES6 Destructuring ES6 Spread Operator ES6 Ternary Operator

2. Getting Started: JSX

JSX Introduction JSX Variables & Nested Elements JSX Embedding Expressions JSX Specifying Attributes Getting Started with React

3. React in Practice

Getting familiar with JSX Writing more Complex Elements using JSX Creating a React-Based Project Structure of a React Project

4. React Components

Introduction to Components Functional Components Creating React Components Importing Components

5. Controlling Data & Content

Passing Data into Components Conditional Rendering Loop Based Rendering Keys in Lists Event Handling Creating a TODO Application

6. Hooks

Introduction to Hooks Using the State Hook The Effect Hook Rules of Using Hooks Creating Custom Hooks Fixing the Todo Application

7. React Router

Introduction to React Router Route-Based Rendering Creating Navigation Bars Using Params

Getting Started with React

The simplest way to start using React is to create a basic HTML page:

index.html

Afterward, to install React, we will import React to our project by adding the following links in the header section:

index.html

However, this won't be sufficient since we also want to be able to use JSX for ease in creating elements. After adding all three of these links, the HTML script should look something like this:

index.html

React needs an HTML container element (for example, a <div> element) to render components inside the HTML document. This base container is also often referred to as root.

Everything React renders will be inside this root element. We will create a <div> element in the HTML body, with an id "root" so we can access it from JavaScript code.

index.html

To complete the program, we will add two additional lines of code, which will print a "Hello World!" heading inside the root:

index.html

Everything was clear?

Thanks for your feedback!

Section 2. Chapter 5