Creating a React Project

Following the React documentation, to create a React project you will need a package manager like npm, yarn or npx. For these three cases, we have three different commands (Fig 1).

Fig 1 — Commands to create a react project

With your project created, you can open it in the editor code of your preference. In case you are using Visual Studio Code, just type ``code .`` inside the project folder in the terminal, the project will be opened in VS Code. In the actual version of React, the initial project looks like this(Fig 2).

Fig 2— Initial setup of a React project

If everything went as planned, inside the project folder in the terminal, you can type ``yarn start`` or ``npm start`` to run the project, a new window of your browser will be opened with the homepage content of your project (Fig 3). If the window doesn’t open automatically, check the terminal for any errors, if not, you can by yourself open the new window and go to `` http://localhost:3000``.

Fig 3 — Project homepage

Understanding the folder structure

We have two important folders to talk about, the “src” and “public”. The “src” is where we will save all code that we will write in our application(Mainly Javascript code) and the “public” folder is where will be our public files, or “assets”, just like images, icons and others.

In public folder, the most important and the only mandatory file is the index.html. This file is where React injects our code so the browser can run it, it’s also where we make changes like adding fonts, change the page title or icon, etc…

Inside the src folder we have the “index.js” and “app.js” files. We can think of the index.js file as the entry-point of our “React code” and it will be responsible for rendering the App component. What index.js is doing is basically injecting our component “App” in the div with id “root” in the index.html so the browser can know what to render. (In the day-to-day you probably will not make any changes in the index.js file).

If you want to start “playing” with React, you can directly change the content of the App component or create a new component and paste it there.

Cleaned React Project (Bonus)

The project created comes with a lot of files, but some of them we can delete to help us in the learning process.

You will need to have git installed in your machine, after that, just go to the terminal in the directory that you want to clone the project and enter this command: ```git clone https://github.com/Verdant31/Cleaned-React-Project``. To “clean” the project I deleted the files below and changed the initial content of the homepage to a div with an h1 tag.

• setupTests.js: A file to set the tests configuration using jest (We will not work with tests now)
• logo.svg
• index.css
• App.test.js: File to run an test to the initial component
• App.css
• favicon.ico
• logo192.png
• logo512.png
• robots.txt: Text file created to prevent the search engines and bots from crawling up the application. (Not useful for projects in development environment)
• manifest.json: File to provide information about the project (Again, not useful for projects in a development environment).
• reportWebVitals.js: Tool for measuring the real life performance of the application (Useful, but not for now).

Just to be clear, dont skip the process of learning better what this files that i delete does, i just did that to the initial setup of a React project doesn’t scare you.

I hope this article helped you somehow in your study of React, any suggestion is welcome, thanks for your attention and never forget, don’t stop learning.