Create a React app using the command line

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