Importing Components

Writing all the components in a single file is not a very good idea since it can become problematic and hard to manage as the code grows.

To avoid that, we divide the code into smaller parts (also called modules). React allows us to import components from other files using the import statement:

For example, consider the following component:

This is a small script, but it is sufficient to show how we can divide a script into smaller parts.

We will create a new file called example.js and put the following code inside.

Export default function:

Notice how there's an export default before the function. This is the syntax for exporting a function or component so it can be used in another file. We will save this file in the same directory as index.js. Finally, we will make the following modifications to the index.js file:

We imported the ExampleComponent using the syntax import ComponentName from ComponetPath; and removed the component code from this file.

That is it! We have successfully imported a component. You can check the result in the browser, there should be no changes in the appearance or functionality of the website.

Everything was clear?

Section 4. Chapter 4

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