Components

Syntax of a React component

What Exactly Are Props in React?

How to Invoke React Components

Invoking components without props

Invoking components with props

Invoking components with nested content

Invoking components with variables

Invoking components with the dot notation

How to Display a Component Inside a Browser’s DOM Node

1. Create a new ReactDOMRoot object instance

2. Display your component inside the root object instance

3. Enable strict mode

Important Things to Know About React Components

1. Use the Pascal case naming convention for your components

React component tag example

HTML component tag example

2. Bracket notation expressions do not work as React component tags

3. Bracket notation expressions in variables work as React component tags

4. Make your components pure

Example 1: Impure React component

Example 2: Pure React component

5. Define components at your file’s top level

Creating Reusable React Components

The issue with rigid components

How to split rigid components into reusable chunks

1. Create a new project directory

2. Install React and ReactDOM

3. Create the web page

4. Create the BlogPost component

5. Create the Header component

6. Create the FeaturedImage component

7. Create the Post component

8. Import your extracted components into the BlogPost.js file

9. Run your application

Tips on creating reusable React components

Time to Practice with Components

How did you create your checkboxes?

1. Create a new project directory

2. Install React and ReactDOM

3. Create the web page

4. Create a components directory

5. Create the Checkbox component

6. Create the root component

7. Create the entry script

8. Run your application

The checkbox app without reusable components