DEV Community

Cover image for Creating React App and Understanding Folder Structures
Kosi Iyiegbu
Kosi Iyiegbu

Posted on

Creating React App and Understanding Folder Structures

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
Enter fullscreen mode Exit fullscreen mode

or

yarn create react-app my-app
Enter fullscreen mode Exit fullscreen mode

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
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
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

  • 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

second half of index.html in code editor

  • .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

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

package.json file with different settings
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

  • 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

Discussion (12)

Collapse
andrewbaisden profile image
Andrew Baisden

Great introduction i'm currently working on using a more advanced project architecture in React.

Collapse
killerkvothe117 profile image
Kosi Iyiegbu Author

Thank you
That's nice, looking forward to hearing more about it

Collapse
andrewbaisden profile image
Andrew Baisden • Edited on

Can't wait to start working on it the information will help other developers to create more robust projects.

Collapse
zainbinfurqan profile image
Zain Ahmed

What about having folder for utils functions generic function . e.g like get a name combination of first & last

Collapse
killerkvothe117 profile image
Kosi Iyiegbu Author

Yes you can, in a folder called utils or utilities

Collapse
israelchidera profile image
Israel Chidera

This is awesome.

Collapse
killerkvothe117 profile image
Kosi Iyiegbu Author

Thanks bro

Collapse
batuhan_ozkose profile image
Batuhan 🦊

great content!

Collapse
tchukwuleta profile image
HipPreacher

A good one you did here. Welldone man

Collapse
killerkvothe117 profile image
Kosi Iyiegbu Author

Thanks

Collapse
enigmaiam profile image
Nwagba Okechukwu Martin

This is awesome man

Collapse
thekillerrex27 profile image
TheKillerRex27

I love this, really helps me