React components Import & Export

Importing and exporting React components

So far, we have learned how to write our React and JSX code in a single file – index.js

But remember, one of the main benefits of using React is to create components. Now, putting every component inside a single file isn’t practical or good practice.

React has a convention which suggests putting each component in a separate file.  Another good convention is to keep the file name the same as the component’s name. As our component is called MyApp, let’s create a new folder ‘components’ and a file inside that folder called ‘MyApp.js’. This will make things a lot easier for you when you are looking through a project’s file structure.

Here is a simple file structure, we are going to follow, for this example.

Project File Structure

Here is the code:

Index.html

<div id="root"></div>

MyApp.js

import React, {
    Component
} from 'react'
import image01 from '../tacoslaw.jpg'

function MyApp() {
    return ( <div>
        <h2> Taco Slaw </h2>

        <img src = {
            image01
        }/> 
       <h4> Ingredients </h4>

        <ol>
        <li> 1 / 2 small head cabbage, chopped </li> 
        <li> 1 jalapeno pepper, seeded and minced </li> 
        <li> 1 / 2 red onion, minced </li> 
        <li> 1 carrot, chopped </li> 
        <li> 1 tablespoon chopped fresh cilantro </li> 
        <li> 1 lime, juiced </li> 
        </ol>

        <h4>Directions </h4>
        <p>In a bowl, mix together the cabbage,
        jalapeno pepper, red onion, carrot, cilantro,
        and lime juice. </p>

        </div>
    )
}
export default MyApp

Now compare MyApp.js code with index.js code from the last lesson. You will notice that it is almost the same as index.js, with only a few differences.

Importing React Components

The first thing you need to do is to import React and Component from react.js library. The reason we are importing react is the file contains JSX code. Almost every file containing functional component needs to import react to convert JSX code into vanilla JavaScript.

Anywhere we are going to use JSX, we need to import React.

To import external files, use the relative path. As the file you are importing is outside the folder ‘component’, use:
import style from '../style.css'

Leave the style.css empty for a while. We will learn to style our components in the next lesson.

Exporting React Components

Another difference from the last lesson is the export statement.

export default MyApp

The export statement will make your functional component called MyApp available to other files in your application. If you are not familiar with the import/export statement in ES6, remember to use the following syntax at the end of the component’s file.

export default component_name

Using default means the file contains only one component and you want to export it.

Now, when we have exported our component using the export statement, I’m going to create another file, index.js and import MyApp.js using

import MyApp from './components/MyApp.js'

If the import statement doesn’t name a relative path, it assumes that you are referring to a module. It works okay with react and react-dom as these are third party modules here but when you have to import your defined components, use the relative path.

Import statement assumes that you are importing a JavaScript (.js) files. You can remove the .js from the import statement as this is a default extension.

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import MyApp from './components/MyApp'

ReactDOM.render( <MyApp/> ,
document.getElementById('root')
)

Organizing your React Project

As your project gets more and more complex, it is very important to have a good organizational structure. One simple project tree structure could put all components, style files in separate folders.

Having a separate folder for components is a simplified way to organize your application because if a large application you may have hundreds of components. You need to define a structure that works best for you.

Before moving on to the next lesson, try changing paths a little bit, or change a file name, or move the file to a different location to see what you need to fix to keep everything working.