Introduction to React

Course Content

Introduction to React

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

Writing more Complex Elements using JSX

We can combine multiple JSX elements or components into one big element and render it into the root. For example we can create a heading and a paragraph element and embed it into a <div> element:

index.html

If you look at the above code, we have created the element main using two other elements, heading and paragraph.

We used the expression embedding syntax {} to embed other elements inside the main <div> and rendered it through the root's render method. This can be repeated as many times as wanted to create further complex elements.

Everything was clear?

Thanks for your feedback!

Section 3. Chapter 2

Ask AI

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

Course Content

Introduction to React

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

Writing more Complex Elements using JSX

We can combine multiple JSX elements or components into one big element and render it into the root. For example we can create a heading and a paragraph element and embed it into a <div> element:

index.html

If you look at the above code, we have created the element main using two other elements, heading and paragraph.

We used the expression embedding syntax {} to embed other elements inside the main <div> and rendered it through the root's render method. This can be repeated as many times as wanted to create further complex elements.

Everything was clear?

Thanks for your feedback!

Section 3. Chapter 2

some-alt