How To Import Components From Another File In React

Posted on by Nathaniel Kirk
Import Components from another file in React

Importing components from another file is an essential thing that every React user should know. Read this article to learn more about how to import components from another file in React in different ways.

Import components from another file in React

Component: is an independent block of code that can be reused many times. By using components, you can divide the UI into many small parts (each part is a component).

  • The variables (information) in the Component are stored in an object named state.
  • If there is a constructor() function in the Component, then this function will automatically run when the Component initializes in the constructor() function. You need to run the super() command to run the React constructor first.
  • Creating components: There are two ways to create classes and functions. Use whichever way you need.

Directly import components

In this way, we will import the Component directly from the original file containing the Component, and in that file are also exported as the code below.

import React from "react";

function App() {
  return (
    <div className="App">
      <h2>Import Components from another file in React | LearnShareIT</h2>
      <p>This App Component is exported </p>
    </div>
  );
}
export default App;

Notice at the end of the line of the code, the App Components are exported by default so that we can import them anywhere in the project. Just point to this correct App.js file with the line code.

import App from “./App”;

In this example, we import the Component into index.js so we can render it to the screen.

Output:

Import Component from the third file

In the above approach, if it is just a tiny program and needs to import few components, there is no problem, but if you need to import many components from different files at the same time, it will immediately become a problem because each component import will need its line of code and will become difficult to debug

So in this way, we will create a separate index.js file to be able to save and batch export many components that will be easier for us to manage.

Code:

export {default as App} from "./App"
export {default as Home} from "./Home"

And when we need to import components from another, you need to import the components with newly defined names from the index.js file. That’s neat.

Code:

import {App,Home} from "./index";

So you already know how to import components from another file in React, hope it will help you in your path of learning React.

Summary

To summarize, all you need to know to be able to import components from another file in React has been written in the article. You can directly import components or import components from a third file. Let’s try one of two methods, it’s helpful for you. Wish you have a nice day!

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *