Introduction to React

Introduction to React

0%

1. Getting Started: ES6

In this section we will explore why React is useful and why it is worth learning it at all. We will also learn one prerequisite, ES6, which will be used throughout the course.

Node.js and npm

ES6 Arrow Functions

ES6 Destructuring

ES6 Spread Operator

ES6 Ternary Operator

2. Getting Started: JSX

In this section, we will learn another prerequisite - JSX which will be used throughout the course. Finally, we will explore some example code to get acquainted with React.

JSX Introduction

JSX Variables & Nested Elements

JSX Embedding Expressions

JSX Specifying Attributes

Getting Started with React

3. React in Practice

In this section we will learn about the essential and practical parts of React excluding the components – which will be covered in the next section. We will look at how JSX can be used with React, and how to create and render more complex elements in the React DOM using JSX. We will also learn how to set up a React based project, and we will explore its structure for deepening our understanding.

Getting familiar with JSX

Writing more Complex Elements using JSX

Creating a React-Based Project

Structure of a React Project

4. React Components

In this section you’ll be introduced to React components. We will look at what React components are and why we need them. We will explore the two different types of React components and learn the syntax for creating them. We will use them to create a single page application that displays X.

Introduction to Components

Functional Components

Creating React Components

Importing Components

5. Controlling Data & Content

In this section we will learn more about how to combine JavaScript and JSX to create dynamic content. We will also learn how to pass data between components. In the end we will also explore event handling.

Passing Data into Components

Conditional Rendering

Loop Based Rendering

Creating a TODO Application

6. Hooks

In the end of the previous chapter, we tried making a Todo application though in our attempt to do so we soon discovered that we needed some method for re-rendering the components once the data is updated in a component as React wasn’t automatically doing that for us. In this section we will learn how to fix such issues using ‘Hooks’. We will learn and implement hooks in detail. By the end of this section, you will be able to create stateful components in React and combine them to create complex web applications.

Introduction to Hooks

Using the State Hook

The Effect Hook

Rules of Using Hooks

Creating Custom Hooks

Fixing the Todo Application

7. React Router

In this chapter we will learn how to add different pages to our React application and render different components based on URL. You will gain sufficient knowledge to be able to create multi-page applications.

Introduction to React Router

Route-Based Rendering

Creating Navigation Bars

Loop Based Rendering

We can use JavaScript loops to easily render multiple components and perform other repetitive tasks without needing to repeat the code.

For example, we can create multiple instances of a component and store it in an array that can be directly rendered using the embed method.

Code explanation

In the index.js, there is a component called Grid, which contains the main <div> element having an id grid.

There's an empty array called blocks in the function, which is then populated with Block components using nested for loops. Each Block component appended to the array has a color value, either light blue or empty string - indicating the default color(white).

This color is assigned based on the condition (i + j) % 2 == 0, which ensures that each consecutive block has a different color.

In index.css, we set the display of the #grid object to grid, and using the repeat() function, we create 18 rows and 18 columns, each having a width/height of 27px. This arranges all those Block components (which are basically <div> elements) into a neat 18x18 grid structure).

Everything was clear?

Section 5. Chapter 3

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

Loop Based Rendering

We can use JavaScript loops to easily render multiple components and perform other repetitive tasks without needing to repeat the code.

For example, we can create multiple instances of a component and store it in an array that can be directly rendered using the embed method.

Code explanation

In the index.js, there is a component called Grid, which contains the main <div> element having an id grid.

There's an empty array called blocks in the function, which is then populated with Block components using nested for loops. Each Block component appended to the array has a color value, either light blue or empty string - indicating the default color(white).

This color is assigned based on the condition (i + j) % 2 == 0, which ensures that each consecutive block has a different color.

In index.css, we set the display of the #grid object to grid, and using the repeat() function, we create 18 rows and 18 columns, each having a width/height of 27px. This arranges all those Block components (which are basically <div> elements) into a neat 18x18 grid structure).

Everything was clear?

Section 5. Chapter 3

some-alt