React Tutorial, Part 3: Component Files, Project Structure

In this article we will talk about the component files and the structure of React-projects.



→ Part 1: Course Overview, React, ReactDOM, and JSX Reasons
→ Part 2: Functional Components
→ Part 3: Component Files, Project Structure
→ Part 4: Parent and Child Components
→ Part 5: Getting Started on a TODO Application, Basics of Styling
→ Part 6: Some of the features of the course, JSX and JavaScript
→ Part 7: Inline Styles
→ Part 8: continued work on the TODO application, familiarity with the properties of components
→ Part 9: Component Properties
→ Part 10: Workshop on working with the properties of components and styling
→ Part 11: dynamic markup generation and the map array method
→ Part 12: workshop, the third stage of work on the TODO application
→ Part 13: Class Based Components
→ Part 14: Workshop on Class Based Components, Component State
→ Part 15: workshops on working with the state of components
→ Part 16: the fourth stage of the work on the TODO application, event handling
→ Part 17: the fifth stage of working on a TODO application, modifying the state of components
')

Lesson 8: Component Files, React Project Structure

→ Original

Component Files

If we assume that you performed the task from the previous practical lesson using a standard project created by create-react-app , then now it uses the index.html file from the public folder, the contents of which suits us, and the index.js file from the src folder, in which we write code. In particular, index.js now looks like this:

 import React from "react" import ReactDOM from "react-dom" function MyInfo() { return (   <div>     <h1>Bob Ziroll</h1>     <p>This is a paragraph about me...</p>     <ul>       <li>Thailand</li>       <li>Japan</li>       <li>Nordic Countries</li>     </ul>   </div> ) } ReactDOM.render( <MyInfo />, document.getElementById("root") ) 

Please note that the code of the functional component MyInfo contained in this file. As you remember, React allows you to create many components, this is one of its strengths. It is clear that to place the code of a large number of components in a single file, although technically feasible, in practice means great inconvenience. Therefore, the code of components, even small in size, is usually made up as separate files. This approach is recommended to follow when developing React-applications.

Component files are given names that correspond to the names of the components whose code they store. They are create-react-app , in the case of create-react-app , in the same src folder where the index.js file is index.js . With this approach, the file with the MyInfo component will be named MyInfo.js .

Create the file MyInfo.js and transfer the code of the component MyInfo into it, removing it from index.js .

At this stage of work, index.js will look like this:

 import React from "react" import ReactDOM from "react-dom" ReactDOM.render( <MyInfo />, document.getElementById("root") ) 

The code for MyInfo.js is:

 function MyInfo() {   return (     <div>       <h1>Bob Ziroll</h1>       <p>This is a paragraph about me...</p>       <ul>         <li>Thailand</li>         <li>Japan</li>         <li>Nordic Countries</li>       </ul>     </div>   ) } 

Here is how it all looks in VSCode.


Transferring the component code to a new file

We transferred the component code from index.js , but the structure that we have now is not working yet.

First, remember - why index.js we need the import React from "react" , even taking into account the fact that we do not directly React here. The reason for this is that without importing React mechanisms of this library will not work, in particular, JSX. Thanks to this import command, we were able, in previous lessons, to pass the JSX code to the ReactDOM.render() method and output the HTML markup created on its basis to the page. All this means that in the MyInfo.js file we also need to import React. This is a common practice for component files.

Secondly, we need to make it so that the MyInfo function from the MyInfo.js file can be used in other application files. It needs to be exported. It uses the features of the standard ES6. As a result, the updated code MyInfo.js takes the following form:

 import React from "react" function MyInfo() {   return (     <div>       <h1>Bob Ziroll</h1>       <p>This is a paragraph about me...</p>       <ul>         <li>Thailand</li>         <li>Japan</li>         <li>Nordic Countries</li>       </ul>     </div>   ) } export default MyInfo 

Now let's work on the index.js file. Namely, we need the MyInfo component to be available in this file. You can make it available in index.js importing it.

What if you try to write a component import command based on the import and react-dom import react in index.js ? For example, add the following import command to the file:

 import MyInfo from "MyInfo.js" //  

The system, seeing such a command, in particular, based on the fact that it lacks information about the relative path to the file, will look for a project dependency - a module with the name specified when calling this command ( here's how to install dependencies in projects created using the create-react-app ; these dependencies can then be imported into React projects in the same way as the React library was imported). It will not find such a module, as a result the import command will not work. Therefore, the file import command must be rewritten with the path to it. In this case, we are satisfied with the indication of the current directory ( ./ ) and the import command will take the following form:

 import MyInfo from "./MyInfo.js" //  

In addition, if we talk about the import command, it is important to bear in mind that it implies that JavaScript files are imported with its help. That is, the .js extension is quite possible to remove, and the import command, acquiring the form shown below, will not lose its operability.

 import MyInfo from "./MyInfo" //  

Usually, such JS file import commands are written in this way.

Here is the full code for the index.js file.

 import React from "react" import ReactDOM from "react-dom" import MyInfo from "./MyInfo" ReactDOM.render( <MyInfo />, document.getElementById("root") ) 

Project structure

With the growth of the size and complexity of React-projects, it is very important to maintain their structure in good condition. In our case, although our project is now small, you can, in the src folder, create the components folder for storing the files with the component code.

Create such a folder and move the file MyInfo.js . After that, you will need to edit the command to import this file into index.js .

Namely, now the path to MyInfo.js indicates that this file is located in the same place as index.js , but in fact this file is now located in the components folder located in the same folder as index.js . As a result, the relative path to it in index.js will look like this: ./components/MyInfo . Here is the updated index.js code:

 import React from "react" import ReactDOM from "react-dom" import MyInfo from "./components/MyInfo" ReactDOM.render( <MyInfo />, document.getElementById("root") ) 

And this is how it all looks in VSCode.


Folder for storing components and importing a component from this folder into VSCode

In fact, one components folder, intended for placing the code of all components, is an example of an extremely simplified project structure. In real projects, to provide the convenience of working with a large number of entities, much more complex folder structures are used. What exactly these structures will be depends on the needs of the project and on the personal preferences of the programmer.

It is recommended to experiment with everything that you have learned today. For example, you can try to move the file MyInfo.js to a folder and see what comes of it, you can try to rename it, change some code in it. When in the course of such experiments, the correct work of the project will be disrupted - it will be useful to understand the problem and bring the project back to working condition.

Results

In this lesson, we talked about the design of the component code as separate files, about exporting and importing code using ES6 tools, and about the structure of React projects. Next time we will continue to get acquainted with the capabilities of the components.

Dear readers! We ask experienced React-developers to share with newbies ideas about the organization of the project structure.