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

Passing Data into Components

It is very useful to be able to pass data into the components. The syntax of passing data into a component is similar to the syntax for assigning attributes in HTML.

Consider, for example, we have a component called Main, and we want to pass a string called "Hello World" into it. We can do so using the following code:

js

The above component will create a <h1> element with the "Hello World" text inside it. Notice that we use the term text as the attribute name, therefore, when accessing the value from inside the component, we refer to the text attribute of the props object: props.text. The name text was an arbitrary choice, in fact, we can name it anything we like, for example:

js

In this case, we will use the term headingContent to access the value that has been passed:

js

We can also pass multiple strings into a single component:

js

In this case, the method for accessing the values passed will be the same:

js

To simplify the above code, we can just pass a single array that contains all the strings:

js

We can pass values of any data type ranging from integers to complex objects! It is important to note that when passing raw integer values, we need to enclose them in braces:

js

Everything was clear?

Thanks for your feedback!

Section 5. Chapter 1

Ask AI

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