React is a lifesaver. Being the number one library used to create interactive UI's, it helps developers build applications faster and with more complex data.
While learning React, I was amazed by the JSX and how the mix of HTML and JS worked to make life easier while coding. That's until I got to components.
What are components?
Let's imagine React as a big painting. You want to show the final result, but you also have to realize how many divisions are in it and how you have to work on them separately. Make a sketch, final draw, coloring, shading, and finally framing it. That's what components are in React; A division that allows you to split your code into independent and reusable pieces, and to work in each piece in isolation.
Now that you know what components are, we should put it in practice! Let's build a simple React App using some components.
If you don't know how to start your React.App, I suggest you follow the steps in this react doc.
Great! Let's look into our src folder and see what's in there.
Those are some of our components! We so far only have two: App.js and Index.js to which App is called. In this post, we will be creating two more: A header componente and a body component. You can name your components however you want, this is just an example.
This is the code for our header component (You can delete whatever code between return in App and add the follow)
<div className="App">
<header className="App-header">
<h1>Hello!</h1>
<h2>This is a lesson about components</h2>
</header>
</div>
And now this is what our page is gonna look like:
Now let's build our body
<body>
<p>In this blog post, you gonna learn the importance of React components</p>
<p>Some of those are:</p>
<ul>
<li>Writing easy debugging code</li>
<li>Create independent bits of code</li>
<li>Make it simpler to work it more complex data</li>
</ul>
</body>
This bit of code will look like this:
Okay... this seems to work just fine, but our code is pretty simple. If you're working with more complex data, you'll have so many lines of code that it will be extremely hard to see in case you make even a simple syntax error. To save us from that, let's create our components.
Now, we can transfer our code from both those elements directly to the components.
Analyzing what we did there, we can see there are a few rules to follow while writing components:
- You must always import React before writing the code;
- Write your code inside a function with a return, otherwise your code won't be passed to the parent component;
- Your function MUST start with capital letter. I know, in vanilla JavaScript you're not supposed to use capital letters to start names, but that's a React rule. Don't forget!
- And at last, remember to export your component!
Why export my function?
That will allow your other components to use that component in them. If you don't export, you won't be able to import it inside the other elements.
Let's see how those components will look inside our App component.
Reloading your browser, you will see that the layout is the same as when we wrote the code directly into App. But now you have access to that code separately, and it's easier for you to work on and build more intricate apps.
Have fun working with your components!
Sources:
Components - React Docs
React JS Components - Geeks for Geeks
Building React Components - DEV
Top comments (0)