Learn ReactJS Components

Components are the central building blocks of ReactJS. They provide an easy way to organize and develop independent pieces of UI functionality. For example, a navigation menu can be represented by it's own React Component class.

By clearly separating the different pieces or "components" of the UI, React makes it easy to develop reusable pieces of functionality. In this tutorial, we'll examine what React components are and provide working examples of ReactJS components.

What is a React Component?

A component is a ReactJS class that describes how a UI element should render. A component must have a render() function that specifies what to return or "draw" in the UI:

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            Hello React!
         </div>
      );
   }
}

export default App;

If you've followed the recommended environment setup, you'll notice this is the same App component from the example. Notice how we define an ES6 class that extends the React.component class. Using JSX, we return a markup description of what React should render within the render() function.

Components also take optional arguments called props that can be passed down to child elements within the component:

import React from 'react';

class Header extends React.Component {
  render(){
    return (
      <h1>Welcome back, {this.props.name}</h1>
    )
  }
}

class App extends React.Component {
   render() {
      return (
         <div>
            <Header name="Sam" />
         </div>
      );
   }
}

export default App;

In this example, we create a separate Header component that is referenced by the root App component.

Notice how the message attribute on the <Header /> tag corresponds with the {this.props.message} reference in the Header class. Any attributes defined like this will be added to the props object for that component. This allows us to pass values to components for rendering.

React Component Examples

Here are a few more working examples of React components.

Sub Component Example

Components can be composed of other sub components:

import React from 'react';

class Header extends React.Component {
  render(){
    return (
      <h1>Welcome back, {this.props.name}</h1>
    )
  }
}

class Message extends React.Component {
  render(){
    return (
      <div>
        <p>You have {this.props.count} new messages!</p>
      </div>
    )
  }
}

class App extends React.Component {
   render() {
      return (
         <div>
            <Header name="Sam" />
            <Message count={5} />
         </div>
      );
   }
}

export default App;

In this example, our root App component is composed of two child components Header and Message.

React apps commonly have a singular root component like App that renders collections of sub components to form a component tree. This results in an organized tree structure comprised of nested sub components that collectively make up the UI.

Functional Component Example

Components are often times used for simply rendering elements. When this is the case, functional components are used as a shortcut to the more verbose class extension of React.Component():

import React from 'react';

const Header = (props) => {
    return (
      <h1>Welcome back, {props.name}</h1>
    )
}


class App extends React.Component {
   render() {
      return (
         <div>
            <Header name="Sam" />
         </div>
      );
   }
}

export default App;

Notice how the Header component is defined as a function and not a class extension of React.Component. It doesn't have a render() function and simply returns a React element. The props object is explicitly passed as an argument to the Header function. This means you don't use this when referencing the props object as it is simply a parameter passed to the function.

Functional components are good shortcuts whenever a component is simply rendering UI elements.

Conclusion

Components are the central building blocks of React. They optionally take arguments called props that can pass values down to child components. Components require a render() function to describe how they should be rendered by the UI. An exception to this is functional components which simply return UI elements.

Now that you have a basic understanding of React components, you are ready to build out more complex UIs composed of these independent reusable parts.

Your thoughts?