What does import React from ‘react’ mean?

How to create a Hello World app in React.js »

Inside index.js, write down the following code:

// Import Libraries

import React from ‘react’;

import ReactDOM from ‘react-dom’;

Let’s breakdown the first line of code.

import: You are asking React to import other dependencies or packages from the same project in your current file. It simply means you want to use code that is available in other folder or file within the same project. But, you do not have direct access to that code, so you use the import statement.

React: The second word is the name of the variable where all the imported code is assigned into. We refer to all the imported code from that statement as this variable name. The variable name could be anything. However, as per general naming convention, we give it a name over the imported package or dependency or name of the library itself for easier understanding (capitalized).

from: It tells React from where it should take all the code from

‘react’: It is the name of the package (it should be a valid name)

So, what Node.js does is, when it reads import React from ‘react’, it looks for a folder named react inside the node_modules directory, takes all the code from there, and assigns it to the given variable name. In this case, the variable name is React itself.

The same thing is repeated with react-dom as well. Obviously, you can import any of the folder that you see inside the node_modules directory the same way.

If you’ve worked in a Node.js project before, you might question yourself that you use require() statement instead of import statement there. For example, in a Node.js project, you may import a library as follows:

const React = require(‘react’);

instead of

import React from ‘react’;

Here, import is a ES2015 statement while require is a CommonJS import statement. ES2015 and CommonJS both have different module systems containing a set rules which define how code is shared among different files within a project. Since you’re using ES2015 in React, you would use import statement instead of the require statement.

Next up, you’ll create a React component using the imported libraries. If you don’t remember what a React component is, you can refer to the previous article where React component was defined. In short, a React component is either function based or class based. It simply produces HTML to show on the web-browser using JSX. It also handles feedback from the user using Event Handlers.

Inside index.js, add the following code:

// Import Libraries

import React from ‘react’;
import ReactDOM from ‘react-dom’;

// Create React Component

const App = function() {

return <div>
Hello World!
</div>

};

You’ve just added a function based component. You can also write the same function using the ES2016 arrow function as follows:

const App = () => {

return <div>
Hello World!
</div>

};

Inside the function named App, you’ve returned some JSX that simply returns the text “Hello World!”. Next, you need to render the component on the web browser. You can do that in this way:

// Import Libraries
import React from ‘react’;
import ReactDOM from ‘react-dom’;

// Create React Component
const App = function() {

return <div>
Hello World!
</div>

};

// Show React Component On The Browser
ReactDOM.render(
<App />,
document.querySelector(‘#root’)
);

In the third step, you’ve used ReactDOM library to render some content on the web browser. If you go to public directory in your project folder, you’ll find a file named index.html. This is the default file that is shown to the user. In this file, you’ll find a <div> element with an id of #root. This is where you are rendering the App component.

document.querySelector is a very basic Javascript statement understood by all web browsers.

Now, if you save the file, go to your web browser, you’ll find Hello World! written on it.

Voila! That is Hello World in React.js for you.

View course outline