How to Properly Import React in Component Files in React.js

In this blog post, we'll explore how to properly import React in component files in React.js. React is a popular JavaScript library for building user interfaces, and it relies on a component-based architecture. This means that a React application is made up of small, reusable pieces of code called components. To make use of these components, we need to properly import React and other required dependencies in each component file. We'll cover how to do this in detail with clear code examples and explanations, making it easy for beginners to follow along.

Why Import React?

Before diving into the how-to, let's briefly discuss the reasons behind importing React in component files. React is a library, and like any other library, it provides a set of functions and objects that we can use in our code. To access these functions and objects, we need to import them into our component files.

When we import React, we're essentially telling our code to make use of the functions and objects provided by the React library. This enables us to create and manage our components and their state more easily.

Importing React in JavaScript (ES5)

In the early days of React, we used to work with ES5 (ECMAScript 5) syntax. To import React in component files using ES5 syntax, we use the require function. Here's an example of how to do this:

var React = require('react');

Once we've imported React, we can create a simple React component using the React.createClass method:

var MyComponent = React.createClass({
  render: function() {
    return (
      <div>
        <h1>Hello, world!</h1>
      </div>
    );
  }
});

However, with the introduction of ES6 (ECMAScript 2015) and its features like import and export statements, the way we import React and create components has evolved. It's important to be familiar with the modern approach, which we'll discuss next.

Importing React in JavaScript (ES6+)

The ES6 syntax is now the standard for writing modern JavaScript code, including React applications. To import React in component files using ES6 syntax, we use the import statement:

import React from 'react';

With React imported, we can create a simple functional component using an arrow function:

const MyComponent = () => {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
};

Or, if we prefer, we can create a class component using the class keyword and extending React.Component:

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
      </div>
    );
  }
}

Importing React and React Component Separately

In some cases, you might see developers import React and Component separately. This can make the code slightly more concise, as we don't need to write React.Component when creating a class component. Here's an example:

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
      </div>
    );
  }
}

Importing Other Dependencies

In addition to importing React itself, we often need to import other dependencies to create more complex components. For example, if we want to use the useState and useEffect hooks in our functional components, we can import them like this:

import React, { useState, useEffect} from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

In this example, we import the useState and useEffect hooks from the React library and use them in our functional component. This allows us to manage the component's state and side effects.

Exporting Components

To use our components in other parts of our application, we need to export them. In ES6, we can use the export statement to do this:

import React from 'react';

const MyComponent = () => {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  );
};

export default MyComponent;

With this export statement, other parts of our application can now import and use the MyComponent component. For example, we can import it in another component file like this:

import React from 'react';
import MyComponent from './MyComponent';

const App = () => {
  return (
    <div>
      <MyComponent />
    </div>
  );
};

export default App;

FAQ

Q: Why do we need to import React in every component file?

A: We need to import React in every component file because React provides the necessary functions and objects required to create and manage components. By importing React, we're telling our code to make use of these functions and objects, allowing us to build our components.

Q: What's the difference between import React from 'react' and import * as React from 'react'?

A: Both statements import the React library, but they do so in different ways. import React from 'react' imports the default export of the React library, while import * as React from 'react' imports all named exports from the React library as an object. The first approach is more common and recommended.

Q: Can I use both ES5 and ES6 syntax in the same project?

A: Yes, you can use both ES5 and ES6 syntax in the same project. However, it's recommended to stick to one syntax for consistency and readability. Modern React projects typically use ES6 syntax.

Q: What does the export default statement do?

A: The export default statement is used to export a single value (e.g., a component) as the default export from a module. This makes it easy to import the component in other parts of the application using a simple import statement.