There are many ways to start building a web page or web application using React. Luckily Facebook has created a command line to make the process easy.

This article will teach you how to use the installation command and give you a quick tour of the files it installs.

Pre-requisites

In order to create a React project, you need to know and install the following stuff:

1. Learn what is Node.js and NPM: To be familiar with a the jargon mention during this article and know a bit of what is running behind the scenes of your project.
2. Install Node.js LTS (Long Term Support version): To be able to download and run JavaScript libraries from the web.
3. Terminal tutorial: Be comfortable using the command line.
4. Install VSCode: You need a text editor to follow this tutorial. Visual Studio Code is free and has a lot of plugins to personalize it.
5. Install Prettier plugin for VS Code: Short video explaining how to install a plugin for auto formatting in VS Code.

Install command

To get started, use the official Create React App command:

npx create-react-app your-project-name

1. npx is a new way of installing Node packages.
2. create-react-app with - between words.
3. your-project-name is the name of your project folder. You can name it whatever you want.

Start command

Once the project is installed, open it in your code editor and run the following command:

npm start

If you see this screen, your project is up and running 🎉

Note:
Look at the URL on your web browser. It should be localhost:3000. This is because Create React App creates a virtual server to debug your application.

Project structure, a quick tour

Now that you installed your project let's explore what does it contain. We will focus on these areas:

1. The overal project folder.
2. The src folder.
3. The App.js file.

Project folder:

These are the subfolders and files you see on your new project.

1. node_modules/: A folder with all the dependencies for the project. Think of Gradle or Maven in the Java world.
2. public/: A folder with the icon and the webpage that runs your React application.
3. src/: The folder where you put all your project files.
4. .gitignore: As you know, this one is to tell Git what files should not be uploaded to your repository.
5. package-lock.json: A backup copy of the file explained below.
6. package.json: A file with information about how to run your project. It includes a list of dependencies to install each time you clone your project using Git, the terminal commands to start it, etc.
7. README.md: The file where you write what your project is about, how to install it, how to use it, the dependencies it has, etc.

Source folder in detail:

Now let's focus on the src/ folder:

1. App.css: Takes care of the CSS of the App component.
2. App.js: This is the entry point of your project. The equivalent of Main.java in Java.
3. App.test.js: The test file for App.js.
4. index.css: This file has global font settings for the index.html inside the public folder.
5. index.js: Has the initialization files of your React project. You do not need to focus on this one. You only use App.js.
6. logo.svg: The atom logo of React. It is added by default to show how to import images inside App.js.
7. reportWebVitals.js: Facebook says that it reports your app performance to improve your app and the React library.
8. setupTest.js: As the name says, it set up the entire project's unit testing.

App file:

import logo from "./images/logo.svg";
import "./styles/index.css";
import "./styles/App.css";

export default function App() {
  return (
    <div className="App">
      <img src={logo} className="App-logo" alt="logo" />
      <p>
        Edit <code>src/App.js</code> and save to reload.
      </p>
    </div>
  );
}

Note: This is a simplified version of the default App file to remove visual clutter. You can copy and paste it to follow along.

Let's analyze the code:

1. First, we import logo from a path inside our project folder. To be organized I create a folder called images/.
2. Then we import index.css and App.css. To be organized, I moved these file from the src/ folder to a styles/ folder.
3. className="": React uses className instead of class to differentiate its code from normal HTML code.
4. We can see that the import logo appears inside the src property of the <img> tag. This is how React can pass variables to the tags.

Conclusion

With a project set up and knowing what each file does, we can move to the next topic: How to create components.

If you want to see the finished code, to see how the files where reorganized, you can open this link and check the branch create-react-app.

Credits

Cover image: Photo by Surface on Unsplash