DEV Community

Isabelle Bessa
Isabelle Bessa

Posted on • Updated on

Why you should use components when building your React.app

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.

Image description

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>
Enter fullscreen mode Exit fullscreen mode

And now this is what our page is gonna look like:

Image description

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>
Enter fullscreen mode Exit fullscreen mode

This bit of code will look like this:

Image description

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.

Image description

Now, we can transfer our code from both those elements directly to the components.

Image description

Analyzing what we did there, we can see there are a few rules to follow while writing components:

  1. You must always import React before writing the code;
  2. Write your code inside a function with a return, otherwise your code won't be passed to the parent component;
  3. 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!
  4. 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.

Image description

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)