Hello, in this tutorial, we'll talk about components.
Components
Learn what are components and how to create and add them to the page.
In React Project Structure, you saw that there is this code snippet in index.js.
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
A React application generally based on the concept of components - where you have a root (main) component and in it, can contain other components.
They can be as small as a button or something that fills the whole page.
<App /> is a component that is generated when we created the React application via the command line. It is what you see when you launch the server and viewed the application on the browser using npm run start.
The Basic Structure of a Component
If we look into the App.js file, it contains the code for the App component.
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
There are 3 sections to it:
import logo from './logo.svg';
import './App.css';
B) The component logic and markup used to render the component onto the page.
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
C) The export statement which determines what the component is called when used in amother component. Keep in mind, that it must match the name of the function name in section B.
Since the function is called App(), we want to export App.
export default App;
With this knowledge, let's create our own component and see how it works.
Creating our First Component
Step 1:
To begin, create a folder inside the src directory call components. This is optional but we're doing it to be more organized and keeping all the components in a folder call components.
Step 2:
Now create a new file call MyFirstComponent.js inside the components folder. Make sure to have the "js" extension.
Step 3:
(Optional)
If you are using React version 18+, you will not need to import React into the component. But if you are using a lower version of React, you need to import it like this at the top of the component file.
import React from 'react';
You can find out what version of React you are using in the package.json file inside the dependencies object.
Since I am using version 18 of React, I do not need to import it.
Step 4:
Create a function call MyFirstComponent.
function MyFirstComponent(){
}
Step 5:
Export it so we can use it in another component.
export default MyFirstComponent;
We're finish, we have our first component. The next step is to add it to the page.
Using the Component
Now that we have a component, we can add it to a component.
Since the App component is already being rendered on the screen, let's add the component to it.
Step 1:
Go into the App.js file.
Step 2:
Import MyFirstComponent, since we want to bring that over.
import MyFirstComponent from './components/MyFirstComponent';
In this line, we want to import MyFirstComponent from the MyFirstComponent.js file in the components directory.
MyFirstComponent is the name of our component function and we used the export default statement so other files can use it.
The "./" means the current directory.
Since the components folder is in the same directory of the App.js file, we use it to point to the same directory. Then we access the components folder to get to the MyFirstComponent.js file.
The ".js" extension is also omitted.
Step3:
Now that we brough our component over to the App component, we can render it inside.
Remove everything inside the root div element so you end up like this.
function App() {
return (
<div className="App">
</div>
);
}
Now we can add the component inside like this:
function App() {
return (
<div className="App">
<MyFirstComponent />
</div>
);
}
Now save ALL the files and launch the app.
You should see nothing. That is expected since we did not add anything inside our component.
If you look at the App component function, you can see that it returns some HTML code.
function App() {
return (
<div className="App">
<MyFirstComponent />
</div>
);
}
Since our component is not returning anything, we get nothing.
Return HTML
Step 1:
Step 2:
Add this return statement inside the component function.
function MyFirstComponent(){
return (
);
}
Step 3:
You may see some errors, but that is OK. We just need to add some HTML inside the parenthesis,
Add a <h1> element inside the parenthesis with some text.
return (
<h1>Hello World</h1>
);
Step 4:
If you save All the files again and look at the application, you should see the text printed on the screen.
That's all for this tutorial. You made your first component!
