React Components

17th December 2017

Whilst you can define react elements within a pair of <script> nodes in an HTML document, it is recommended to use components. React components allow you to split the UI that you write into modular, reusable pieces of code.

The most simplest example of a component can be a JavaScript function that accepts a properties (a prop) argument and returns an element.

function SayGreeting(props) {
    return <h1>Hello, {props.name}</h1>;
}

You can also use an ES6 class to define a component. If using ES6, the component must implement render().

class SayGreeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

React also traditionally provided a createClass() function to be used to create components, however it is now understood that ES6 is favoured.

const Contacts = React.createClass({
  render() {
    return (
      <div>
          <ul>
              <li>Bob</li>
              <li>Alice</li>
              <li>John</li>
          </ul>
      </div>
    );
  }
});

If you’ve installed and created a project using the create-react-app npm package, using the below commands.

$ npm install -g create-react-app
$ create-react-app myreactapp
$ cd myreactapp
$ npm build

You should then see the React application render in the browser.

Within the project’s src directory, an App component exists in the App.js file.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code>and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

This component is rendering within index.js via ReactDOM’s render() function.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

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

The App.js file is the main file responsible for rendering the application’s content. Any other components of the applications can be included within the render() function.

This can be demonstrated by adding a component within the project.

Within the project’s src directory, add a Content.js file which will be used to create a Content component.

Most of the contents within App.js can be copied over, and the Content.js might end up looking like the following.

import React, { Component } from 'react';

class Content extends Component {
    render() {
        return (
            <div className="App-content">
                <p>Hey! Here's some content</p>
            </div>
        );
    }
}

export default Content;

It’s important to note that components should start with a capital letter. This is so React can distinguish components from regular DOM nodes, e.g. an <App> node from a <div>.

The <Content/> component can then be included as part of the return in App.js.

class App extends Component {
  render() {
    return (
     <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <Content/>
      </div>
    );
  }
}

Don’t forget to include a import Content from "./Content"; line near the top of the file to import the added component.

If you ran the npm build command described above, your application should rebuild automatically and the content defined in Content.js should now show in the browser.

And there you have a basic example of how React components can be created and used within a project. Having reusable chunks of code as components is beneficial in large applications where you might have parts of your UI rendering more than once, such as a navigation or a form.