Golang React JS Technology Blog

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

In this tutorial, we will learn how to build and use a custom react component from scratch.

First, head over to nodejs.org and install Node if you already don't have it on your machine. Now, open up the Terminal on Mac or Command Prompt on Windows and run the following command to install create-react-app package.

npm install -g create-react-app

Create Your First React App

Now, type the following command to create a new react app:

create-react-app example

Now, go to the project folder:

cd example

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

src\Profile.js

Example

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

src\App.js

Example

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.

Now launch the application

npm start

This will developed a static website on web server on port 3000 on your machine. This also launch your browser to navigate http://localhost:3000.


Most Helpful This Week
Glyphicon Rating Star component onClick Event binding and get event name in ReactJs How to show hide component on Click in React JS? Embed JavaScript Expressions in JSX Example of React JS with Material UI components How to get a clicked HTML element in React? Display JSON Data in React JS How to handle events using expressions inside JSX? Getting Started with React and Hello World Example Create Functional Component using ES6 Arrow Syntax