Our React App component

We have already touched on the use of components in React. By default, we will always have an App component. This is the component that will be rendered to the root element in our HTML. Our components derive from React.Component, so the start of our App component looks like the following:

import * as React from 'react';
import './App.css';

export default class App extends React.Component {

}

Of course, our component requires a well-known method to trigger the rendering of the component. It will not come as much of a surprise to learn that the method is called render. As we are using Bootstrap to display our UI, we want to be rendering out a component that relates to our Container div. To do this, we are going to use a Container component from reactstrap (and introduce the core component that we are going to use to display our interface):

import * as React from 'react';
import './App.css';
import Container from 'reactstrap/lib/Container';
import PersonalDetails from './PersonalDetails';
export default class App extends React.Component {
  public render() {
    return (
      <Container>
        <PersonalDetails />
      </Container>
    );
  }
}