Create a React app using the command line
Tags: react, node, npm
Published: 2021-03-10 10:58:46

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](https://javascript.plainenglish.io/what-is-node-js-5fe50e4332c8): 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.
1. Install [Node.js LTS](https://nodejs.org/en/download/) (Long Term Support version): To be able to download and run JavaScript libraries from the web.
1. [Terminal tutorial](https://www.youtube.com/watch?v=5XgBd6rjuDQ): Be comfortable using the command line.
1. [Install VSCode](https://youtu.be/0AHpD5_2-ow): You need a text editor to follow this tutorial. Visual Studio Code is free and has a lot of plugins to personalize it.
1. [Install Prettier plugin for VS Code](https://www.youtube.com/watch?v=J-JRwDkDJHc): 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.
1. `create-react-app` with `-` between words.
1. `your-project-name ` is the name of your project folder. You can name it whatever you want.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uzc05mwtknduwigxlzbd.png)

---

# Start command
Once the project is installed, **open it in your code editor** and run the following command:
```
npm start
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2xt2h2n6p6kwyi6xf1tt.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ovqq8fwokrth5mvwf3ji.png) 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. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x516z9dne97we750pldh.png)

---

# 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](#guide-project).
1. [The `src` folder](#guide-source).
1. [The `App.js` file](#guide-app).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n2856hffwpt8khpugl46.png)

<span id="guide-project">&nbsp;</span >
### 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. 
1. `public/`: A folder with the icon and the webpage that runs your React application. 
1. `src/`: The folder where you put all your project files.
1. `.gitignore`: As you know, this one is to tell Git what files should not be uploaded to your repository.
1. `package-lock.json`: A backup copy of the file explained below.
1. `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.
1. `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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tgn8wtrqqw15mc1ushbd.png)

<span id="guide-source">&nbsp;</span >
### Source folder in detail:
Now let's focus on the `src/` folder:
1. `App.css`: Takes care of the CSS of the App component.
1. `App.js`: This is the entry point of your project. The equivalent of Main.java in Java.
1. `App.test.js`: The test file for App.js.
1. `index.css`: This file has global font settings for the index.html inside the public folder.
1. `index.js`: Has the initialization files of your React project. You do not need to focus on this one. You only use App.js.
1. `logo.svg`: The atom logo of React. It is added by default to show how to import images inside App.js.
1. `reportWebVitals.js`: Facebook says that it reports your app performance to improve your app and the React library.
1. `setupTest.js`: As the name says, it set up the entire project's unit testing.

<span id="guide-app">&nbsp;</span >
### App file:
```jsx
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/`.
1. Then we import `index.css` and `App.css`. To be organized, I moved these file from the `src/` folder to a `styles/` folder.
1. `className=""`: React uses `className` instead of `class` to differentiate its code from normal HTML code.
1. 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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/346bmq0nkvefg9k0t8aa.png)

---

# Conclusion
With a project set up and knowing what each file does, we can move to the next topic: [How to create components]
(https://dev.to/eduardo_alvarez_946ae8b20/3-create-functional-components-in-react-1je8).

If you want to see the finished code, to see how the files where reorganized, you can open this [link](https://github.com/elalienx/sda-react-articles) and check the branch `create-react-app`.

---

# Credits
Cover image: Photo by <a href="https://unsplash.com/@surface?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Surface</a> on <a href="/@surface?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>