How to Create Root Component and Import Another Component in ReactJS

Here is how to create Root Component and import another Component.

Inside App.js create root component and import another component.

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


class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Title</h1>
        <p>Sub Title</p>
        <Person />
      </div>
    );
    // return React.createElement('div', { className: "App" }, React.createElement('h1', null,'Title'));
  }
}

export default App;

Add a folder named Person. Inside Person folder add Person.js with the following code to create component. This exports a component named person which then is used in root component.

import React from 'react';

const person = () => {
    return <p>Person Component</p>
}

export default person;

The output will be something like this:

Title

Sub Title

Person Component