One of the biggest benefits of using a front-end framework is making your application easier to manage by breaking down the page into smaller pieces called components.
Think of components as boxes where you can put anything, including other smaller boxes, to organize your stuff. This article will explain how to create and import React components.
Pre-requisites
JavaScript modules: Know the basics about the import and export statements. Ignore the parts that mention Node.js and require().
Intended result
This is what we will have by the end of the article.
Figure 1: A simple page with 3 elements (components) on screen.
Figure 2: This is the app hierarchy chart. We will use it as a simplified version of the Activity diagram to see how the project looks behind the scenes.
Getting started
To create a component, follow these steps:
- Create a folder called
components
inside thesrc
folder - Create a new file with the extension
.jsx
inside yourcomponents
folder. - Create a function with the same name as your file using this pattern:
//MyComponent.jsx (the name of the file)
export default function MyComponent() {
return (
<div className="my-component">
<p>Hello world</p>
</div>
);
}
Here we are going to learn what each line of code does:
-
export default
: As the name says, it tells React this is the main component inside this file. You can export more than 1 component per file, but it is frown upon. -
MyComponent()
: Is the name of the component. You can change it to anything, but do not forget that it must be the same name as your.jsx
file. In the next chapter, we will learn what arguments we can put inside the parenthesis. -
return()
: Is the content to be displayed on the webpage. You can nest as many tags as you need, but only 1 can be on the root. -
className
: This is the way to add a CSS class in React.
Using a component
To use a component, you need to do 2 things. Importing the component and using it inside the parent component.
Importing:
Open the component file where you want to insert your newly created component, for example, App.jsx, and follow these steps:
- Use
import
on the top of the file followed by - The name of the component. In this example
MyComponent
. -
from
determines the route. -
"./components/MyComponent"
a string with the relative path of the component.
Using the component inside another component:
Inside the return()
:
-
<MyComponent/>
you use the component like a HTML tag. - As you can see, you can put as many copies (instances) of the same component. In another article we will learn a better way to make multiple copies.
// App.jsx
import MyComponent from "./components/MyComponent";
export default function App() {
return (
<div className="App">
<MyComponent />
<MyComponent />
<MyComponent />
</div>
);
}
Conclusion
Now that you have learned how to create components and import them, you can move to the next chapter: Passing information to components by using props.
In you want to see the finished code, open this link and open the branch create-component.
Finally, this is the TLDR (To Long Did not Read) version of this article.
Top comments (0)