How to add multiple components in React app?

Let’s spin up the basic app using these steps.

Create React App

Let’s go inside the src folder to make some changes.

Delete these files:

• reportWebVitals.js
• logo.svg
• App.css
• App.test.js
• setupTests.js

Replace the index.js code with this code:

In the following code, the last line represents a React component with a name App. It checks for the element with id “root” and renders its content into it.

import ReactDOM from "react-dom";
import App from "./App";

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

Replace app.js with this code:

This code replace the regular function with an arrow function and saves the value in a variable.

import React from "react";
const App = () => (
  <div>
    <p>Hello there!</p>
  </div>
);

export default App;

The function above has HTML code. Let’s convert that into JSX.

Project created using create-react-app are compiled automatically and the compilation is handled by Babel.

Multiple components

Let’s define a new component and add it into the main App component.

import React from "react";
const Name = () => {
  return (
    <div>
      <p>My name is Yogesh.</p>
    </div>
  );
};

const Greetings = () => {
  return (
    <div>
      <p>Nice to meet you!</p>
    </div>
  );
};

const App = () => {
  return (
    <div>
      <h1>Hey there!</h1>
      <Name />
      <Greetings />
    </div>
  );
};

export default App;

React components are reusable and that’s why you can add the same component multiple times too!

Share this post