Start a new React project with “create-react-app”

Hi 👋, this is my second Medium post and my purpose is to guide you to become a professional developer. For now, we will look for creating a new project with react using create-react-app.

If you like this type of posts follow me :) I’ll appreciate it too much ❤.

What is Create React App?

React Docs says: “Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React.

It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 14.0.0 and npm >= 5.6 on your machine.” source: https://reactjs.org/docs/create-a-new-react-app.html#create-react-app

Let's Start Installing Nodejs! 👏

First, we need to download Node from https://nodejs.org/es/

Click on the big green button with the XX.XX.X LTS label to download node and install it.

It should change depending on your operative system.

Now, we can check if the installation is correct by typing on the command line 👇

$ node --version
//v14.18.1

Well Done! Now let's create the react project

To create a react project we need to use npx command which is installed with Nodejs, so now we can go to the directory we want to create the project and type on the command line 👇

Remember to use only lowercase letters for the name of the app.

$ cd Documents/ReactProjects/
$ npx create-react-app name-of-the-app

This command will create a new directory and will install all the required dependencies needed to use React.

After finishing, the command prompt should display something like 👇

...
Success! Created name-of-the-app at Documents/ReactProjects/
Inside that directory, you can run several commands:
npm start
    Starts the development server.
npm run build
    Bundles the app into static files for production.
npm test
    Starts the test runner.
npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd name-of-the-app
  npm start
Happy hacking!

To run the project we need to go to the newly created directory typing 👇

$ cd name-of-the-app
$ npm start

Congrats!🎉 Now you have created a React project with create-react-app.

Hope you like it! See you in the next post. 😎

Follow me 👇
Twitter: https://twitter.com/YJDev_

Medium: https://yjdev.medium.com/