Creating React App and Understanding Folder Structures

#beginners #react #webdev

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

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:

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.

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.

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.

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

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

This file contains settings for the React app including:

"name" - This is the name of your app.
"version" - This points to the current version your app is using.
"private": true - This is a setting that prevents npm from publishing your react app publicly or accidental publishing of private repositories.
"dependencies" - This contains all the versions and node modules the app needs, allowing the project to install versions of the modules it depends on.
"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.

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:

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