ReactJS Components

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called "props") and return React elements describing what should appear on the screen.

Functional and Class Components

The simplest way to define a component is to write a JavaScript function:

function Welcome(props) {

     return <h1>Hello, {props.name}</h1>;

}

This function is a valid React component because it accepts a single "props" object argument with data and returns a React element. We call such components "functional" because they are literally JavaScript functions.

You can also use an ES6 class to define a component:

class Welcome extends React.Component {

render() {

    return <h1>Hello, {this.props.name}</h1>;

  }

}

The above two components are equivalent from React's point of view.

The following component is owner of Header and Content. We are creating Header and Content separately and just adding it inside JSX tree in our App component. Only App component needs to be exported.

App.jsx

import React from 'react';

class App extends React.Component {

   render() {

      return (

         <div>

            <Header/>

            <Content/>

         </div>

      );

   }

}

class Header extends React.Component {

   render() {

      return (

         <div>

            <h1>Header</h1>

         </div>

      );

   }

}

class Content extends React.Component {

   render() {

      return (

         <div>

            <h2>Content</h2>

            <p>The content text!!!</p>

         </div>

      );

   }

}

export default App;

To be able to render this on page, we need to import it in main.js file and call reactDOM.render(). We already did it when we were setting environment.

main.js

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));    

Composing Components

Components can refer to other components in their output. This lets us use the same component abstraction for any level of detail. A button, a form, a dialog, a screen: in React apps, all those are commonly expressed as components.

For example, we can create an App component that renders Welcome many times:

function Welcome(props) {

return <h1>Hello, {props.name}</h1>;

}

function App() {

  return (

    <div>

      <Welcome name="Sara" />

      <Welcome name="Cahal" />

      <Welcome name="Edite" />

    </div>

  );

}

ReactDOM.render(

  <App />,

  document.getElementById('root')

);

Try it on CodePen.

Typically, new React apps have a single App component at the very top. However, if you integrate React into an existing app, you might start bottom-up with a small component like Button and gradually work your way to the top of the view hierarchy.

Caveat:

Components must return a single root element. This is why we added a <div> to contain all the <Welcome /> elements.

Extracting Components

Don't be afraid to split components into smaller components.

For example, consider this Comment component:

function Comment(props) {

return (

    <div className="Comment">

      <div className="UserInfo">

        <img className="Avatar"

          src={props.author.avatarUrl}

          alt={props.author.name}

        />

        <div className="UserInfo-name">

          {props.author.name}

        </div>

      </div>

      <div className="Comment-text">

        {props.text}

      </div>

      <div className="Comment-date">

        {formatDate(props.date)}

      </div>

    </div>

  );

}

Try it on CodePen.

It accepts author (an object), text (a string), and date (a date) as props, and describes a comment on a social media website.

This component can be tricky to change because of all the nesting, and it is also hard to reuse individual parts of it. Let's extract a few components from it.

First, we will extract Avatar:

function Avatar(props) {

return (

    <img className="Avatar"

      src={props.user.avatarUrl}

      alt={props.user.name}

    />

  );

}

The Avatar doesn't need to know that it is being rendered inside a Comment. This is why we have given its prop a more generic name: user rather than author.

We recommend naming props from the component's own point of view rather than the context in which it is being used.

We can now simplify Comment a tiny bit:

function Comment(props) {

return (

    <div className="Comment">

      <div className="UserInfo">

        <Avatar user={props.author} />

        <div className="UserInfo-name">

          {props.author.name}

        </div>

      </div>

      <div className="Comment-text">

        {props.text}

      </div>

      <div className="Comment-date">

        {formatDate(props.date)}

      </div>

    </div>

  );

}

Next, we will extract a UserInfo component that renders an Avatar next to user's name:

function UserInfo(props) {

return (

    <div className="UserInfo">

      <Avatar user={props.user} />

      <div className="UserInfo-name">

        {props.user.name}

      </div>

    </div>

  );

}

This lets us simplify Comment even further:

function Comment(props) {

return (

    <div className="Comment">

      <UserInfo user={props.author} />

      <div className="Comment-text">

        {props.text}

      </div>

      <div className="Comment-date">

        {formatDate(props.date)}

      </div>

    </div>

  );

}

Try it on CodePen.

Extracting components might seem like grunt work at first, but having a palette of reusable components pays off in larger apps. A good rule of thumb is that if a part of your UI is used several times (Button, Panel, Avatar), or is complex enough on its own (App, FeedStory, Comment), it is a good candidate to be a reusable component.