Modularity & Import/Export in React

This lesson explains how modules are created and accessed in JavaScript.

We'll cover the following

What are Modules?

It is always recommended to define only one class per file to make it strongly cohesive. These files are basically modules. So, if there are two classes Person and Student defined in the same file, you can split them into two modules and name them as Person.js and Student.js. Note that you must place these files inside your App directory.

Did you know? The classes defined in modules are private by default and can not be accessed by other files that exist inside your project. You can make them public by using import/export statements.

Fortunately, the JavaScript community settled on one way to import and export functionalities from files with JavaScript ES6 with import and export statements.

However, being new to React and JavaScript ES6, these import and export statements are just another topic which requires explanation when getting started with your first React application. Pretty early you will have your first imports for CSS, SVG or other JavaScript files. The create-react-app project already starts with those import statements:

Get hands-on with 1200+ tech skills courses.