How to build and use a custom react component from scratch?

Open the src folder and create a new file inside the src folder and name it as Profile.js(capitialize the first letter of the component).
Now, type out below code in Profile.js

import React, { Component } from 'react';
 
class Profile extends Component {
  render(){
    return(
      <div>
        <h1>John Doe</h1>
        <h2>Software Developer</h2>
        <h3>New York</h3>
      </div>
    );
  }
}
 
export default Profile;

This import React, { Component } from React; code line tells we have imported Component class from React library which we be use to extend.

We have specified JSX in render method when component's view get rendered it will get inserted in DOM as HTML. The component has to return only a single root element, hence need to add all internal elements inside

export default Profile; this will make our component available for other files in our application to import it.

Now, type out below code in App.js

import React, { Component } from 'react';
import Profile from './Profile'
 
class App extends Component {
  render() {
    return (
      <div className="App">
        <Profile />
      </div>
    );
  }
}
 
export default App;

This import Profile from './Profile' code line tells we have imported our Profile component. Our newly created component is in same app folder hence we used ./ which tells start searching from current folder followed by name of the component.