Creating React App and Understanding Folder Structures
Tags: beginners, react, webdev
Published: 2022-05-18 14:07:50

Hi Everyone! So I'm currently new to using React for web development and decided to write a bit on what I know about creating your first React app as well as some nice folder structures you can incorporate. I'll try to make it easy to understand in this article.

## Create React App
So basically React is a JavaScript library for building user interfaces. To get started, you need to open your terminal in the directory you want to create the app and the run the following command:

```
npx create-react-app my-app
```
or

```
yarn create react-app my-app
```
You could use anyone of them depending on the packet manager you prefer. I personally prefer using yarn.
This would create a list of files and folders that your app needs to run. When it's done, you should have this:

![Code Editor with React app folders newly created](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/azppcg38qv9ndcry2lg3.png)
You can see the list of folders and apps on the left side-bar. If you look at your terminal, you should see the command to start your application. Again depending on your packet manager you should run either of these commands:
`npm start` or `yarn start`

You should see your application on your web browser with the spinning React logo.

![Web browser showing showing newly created React app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hcgvgdk909iee02tqrvz.png)
If you have this on your web browser, Congratulations! you've just created your first React app.

Now let's move on to the folder structures.

## Folder Structures
Let's look at the folders that came along with our application.

- **node_modules**
: To keep this short, this is a repository of modules/library that your project is using. It contains all dependencies and sub-dependencies specified in _package.json_ used by the React app. This folder shouldn't be tampered with unless of course you're sure of what  you are doing.

![Image of folders in node_modules](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vw92436w5mhbamdw9kur.png)

- **public**: This folder contains static files such as the index.html, assets such as images and audios. You can see the icon image there that shows the react icon on your web browser. This folder also holds a file called _manifest.json_ that holds information about the application such as name, description, author, etc. Inside the _index.html_ file here is where we would import our JavaScript libraries for fonts, our stylesheets and images, you can also set the page title here.

![index.html file in code editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wpd66hhadmvhkxxkx67f.png)

![second half of index.html in code editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nfo6b9ybrigze7kl5um1.png)

- **.gitignore**: This is the standard file used by the source control tool git to identify the files and folders that are to be ignored while committing the code. Unless this file exists, the create-react-app will not create a git repo in the folder.

![Image of .gitignore file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nr6yh4knbq2uy3u1popi.png)

- **package.json**: This file contains dependencies and scripts required for the project

![package.json file with different settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xuszpw6xrf3gfzgfhorm.png)
This file contains settings for the React app including:

1. "name" - This is the name of your app.
2. "version" - This points to the current version your app is using.
3. "private": true - This is a setting that prevents npm from publishing your react app publicly or accidental publishing of private repositories.
4. "dependencies" - This contains all the versions and node modules the app needs, allowing the project to install versions of the modules it depends on.
5. "scripts" - These specify some aliases that are used to access some React commands more efficiently. They're shared amongst everyone using the codebase.

- **yarn.lock** or **package-lock.json**: Depending on what you used to install your app, you'd have one of these files. It contains information about the dependencies in a project. It helps when working with a team to make sure everyone is working with same version of dependencies and sub-dependencies.

![Image of yarn.lock file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cdmetj300pbayj8qsfo5.png)

- **src**: This is known as the source folder. They're very important files here such as _index.js_ which is the main JavaScript entry point of the project, _App.js_ which is the main component that contains all the other components. You also have the _App.css_ which is CSS file that corresponds to the App component. The _index.css_ corresponds to the _index.js file_. The _App.test.js_ file is used to test and verify that the component file renders properly, you can delete this file. 
The _setupTests.js_ is a file also used for running tests and can be deleted. The last file we have is the _reportWebVitals.js_ which is used to log results to the console or send to particular endpoint and this file can also be deleted.

That's it for the folder structures that we have.

## Organizing Folder Structures
The last thing I want to touch is organizing your folders. It's good to adopt a good structure on time. I'll give a list of some extra folders you can make and what to put inside them:

1. **Components:** This folder can be used to put reusable components such as buttons, inputs, etc. This way you don't have to recreate the same thing over and over again
2. **Pages:** Here you can put the different pages you are working on. You can go ahead to put those pages and their CSS styles in their own individual folders for easier navigation.
3. **Assets:** In this folder you can put the images and audio files that will be used in your project.

They are many more folders you can create depending on what you're working on and how far you go but I'll stop here for now.


I hope this article was useful for you guys, please leave a comment and if you liked it, feel free to stay in touch. You can follow me on [Twitter](https://twitter.com/Kvothe_Killer)