Creating a React component

A React component is created by extending the Component class provided by React as follows:

import React, { Component } from 'react';
import './button.css';

export class Button extends Component {
    render() {
        return (
            <button className={this.props.type}>
                {this.props.children}
            </button>
        );
    }
}

Here, the Button class extends React's Component class and overrides the render method. The render method returns the JSX, which will be rendered on the DOM when the page loads. The type and children properties are available in this.props. React allows you to pass data to its components through props and does so by using the following syntax:

import React, { Component } from 'react';
import { Button } from './components/Button/button';
import './App.css';

export default class App extends Component {
    render() {
        return (
            <div className="App">
                <Button type="secondary">CANCEL</Button>
                <Button type="primary">OK</Button>
            </div>
        );
    }
}

Here, we have wrapped the Button component inside a parent component, App, to render two button elements. The type attribute is consumed by the Button component to set the class name (className) of the CANCEL and OK buttons and text mentioned inside the Button tag. This can be referenced using the children property. The children property can be plain text or other view components. The child component gets a reference to the data provided by its parent component using this.props. The children property in 'this.props' provides a reference to all the child elements included between the tags by the parent component. If you've used Angular in the past, consider the preceding snippet as similar to how you would include elements using ng-transclude in AngularJS, or ng-content in Angular.

Here, the <App> component contains the <Button> component and can be referred to as a container component, which is responsible for rendering the buttons on the page.

The next step is to render the <App> component on the DOM. The <App> component serves as a root component, that is, a root node in a tree. Every component in the application has the <App> component as its top-most parent component:

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

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

This code is included in index.js, which imports the React and ReactDOM libraries. The ReactDOM library has a render method, which accepts the component to be rendered as its first parameter, and a reference to the DOM node where the root component has to be rendered.

When the app is run, the content inside the <App> component is rendered: