React from A-Z — Part D — Import Statements and JavaScript Module Systems
First, open your project in VS Code by typing code . in the command prompt in your working directory. Then run your project as described in Part C in our React A-Z.
Now, let’s go to our code editor and open the “src” folder. In there you can see App.css, App.js, App.test.js, and few other files. First, we are going to delete all the files inside that “src” folder.
Now, when you go to the browser, you will see an error like this. It is totally fine. We are going to fix it while understanding JSX.
Now, create a file named “index.js” inside the “src” folder. The name of this file is very important, so be sure to create the file as “index.js”. The reason we create the file as “index.js” is the error we got, ask for a file named “index.js”. Therefore, we create our file as “index.js” and you can see that our error is getting fixed at the browser with a completely blank screen(Refresh the page if the error is still there).
Once, we get to know how to show things on the web page we will learn how to write JSX and create the components we want. So, in order to show some content on the web page, you have to follow three steps.
- Import “React” and “ReactDOM” libraries.
- Create a React component.
- Take the React component and show it on the screen in our browser.
To import “React” and “ReactDOM” libraries, we have to type, import React from ‘react';and import ReactDOM from 'react-dom'; in our “index.js” file. The reason we want to “import” these two libraries is that we need the content inside these libraries to create the component we are going to create. There are several syntactical rules tangled with “import” statements. We will learn about them along the way.
Now, let’s understand a bit about these “import” statements.
First, we type the “import” keyword. This tells JavaScript that we want to reach out to a dependency or file inside our project. So import statements like these can be used to import packages or dependencies that we installed to our project like “react” and “react-dom” or files that we author.
The second word is the name of the variable we are going to put all the code we extract from either a dependency or file. Simply speaking, in import React from 'react'; statement we are going to put all the code we extract from the'react' library to this React variable. As this is a variable we can have a name like MyReact or something and it will not give an error message. But as the convention is to use React we are going to stick to it.
Now, the next word is the “from” keyword. It says that we want to pull a code from a file or dependency. Then the last word is the filename or the dependency we need to import from or the path to the file we need to import.
And when we say that we want to import a dependency the JavaScript is going to search that dependency in our “node_modules” folder and let us know that it is available or not. For example, if you go inside the “node_modules” folder and scroll down, you will find a folder named “react”.
A quick thing to mention about “import” statements is that if you have worked with Node JS projects you must have seen the keyword require is used for importing files or dependencies. For example, you must have seen code like const React = require('react'); To simply tell about the difference between the “import” statements and “require” statements, we use the “import” system with a module system called “ES2015 Module System” and we use the “require” with the “common JS module system”. These module systems are a set of rules which describe how to share code between different JavaScript files.
Since we are using ES2015 modules we are going to use “import” statements instead of “require” statements.
In the next article, we will create our first “react” component.
