Introduction to React's Components

Let's get started...

As we may know, React is a JavaScript library for building user interfaces. It exemplifies presenting HTML to the user in the most succinct, effective manner possible. React has a few features that allow my prior statement to be true. The feature I want to discuss in the post is “Components.”

What are Components?

Components, in their simplest form, are the building blocks of React. Think of each component as an independent piece. Therefore, think of a React application as being made up of many of these blocks. Within these individual blocks come individual responsibility: components allow an application to implement separation of concerns, which we see in the most effective technologies.

Each component returns a specific piece of JSX code that then tells the application what should be rendered to the client-side. Think declarative programming. Ultimately, the component structure makes the task of building and rendering the user interface DRY, clean and more effective.

Types of Components

Now with an overview of what components are and what they accomplish, we can talk about the different types of components we may see in an application. The two major component types are Functional components and Class components.

Functional components are simple JavaScript functions usually written in ES6 arrow function notation. Again, a functional component’s goal is to return code that then will be rendered onto the browser. A functional component may be used in instances where the data may not be dynamic or where the ultimate goal of the function is very simple. Below, I have attached an example:

function App() {

  return (
    <Router>
      <div>
        <Navbar/>
        <Route exact path="/" component={Home} />
        <Route exact path="/login" component={Login} />
        <Route exact path="/signup" component={Signup} /> 
      </div>
  </Router>
  )

}

export default App;

In the example, I am showing you an App component. My App component returns the instructions to render a navigation bar with routes to specific links (Home, Login, Signup). The App component is (usually) the top-level component of each React application, meaning it is the parent component and has many children components. While this is a complex concept, what I am actually rendering to the page is pretty simple. Hence, the use of a functional component.

On the other hand, we have Class components. Class components, ultimately, have the same goal as Functional components. Yet, Class components are utilized for more advanced user interactions, such as a form or search field. Class components are written in ES6 JavaScript class notation. As we may now, the class notation provides the ability to manipulate, persist and render more complex and dynamic data to the client-side. Below, I have attached an example:

export default class Movies extends React.Component {
  render() {
    return (
      <div>
        <h1>Movies Page</h1>
        {movies.map((movie, index) => (
          <div key={index}>
            <h3>Name: {movie.title}</h3>
              <p>Time: {movie.time}</p>
              <p>Genres:</p>
              <ul>
                  {movie.genres.map((genre, index) => (
                      <li key={index}>{genre}</li>
                  ))}
              </ul>
          </div>
        )) }

      </div>
    )
  }

}

In this example, we are rendering a list of movies to the client-side in the class component "Movies." Since we need to retrieve the data from the backed, this makes the Movies component essentially more complex and dynamic.

Conclusion

While React components can be described in very few words (“the building blocks of a React application”), components are very complex. The ability to build and maintain dynamic components can greatly affect an application’s ability to be effective and easy to use.

Leave a comment + happy coding!