How to use Create React App

H
andrewgbliss
9 months ago

In this article we will be going over how to install the software, create react app, so that we can begin to build our React app.

. . .

What do we need to install?

  • VS Code (Visual Studio Code)
  • NVM (Node Version Manager)
  • Node and NPM (Node Package Manager)
  • React

VS Code

https://code.visualstudio.com/

NVM - (Node Version Manager)

https://github.com/coreybutler/nvm-windows

This link is for installing NVM on Windows. If you need to install for Mac or Linux, follow this link:

https://github.com/nvm-sh/nvm

Once you have NVM installed go to your command prompt and type:

nvm

This will show that you have correctly installed NVM. If you get an error saying that it cannot find NVM, close down your editor or prompt and open it again. It should load. If for some reason you still can't get it to work, follow the steps again in the above links.

So now that we have NVM installed, let's install Node and NPM.

nvm install latest

This will install the latest version of Node an NPM. Which at the time of this article is 13.12.0. Once it is download we need to tell NVM what version we want to use.

nvm use 13.12.0

Now we can check if we have correctly installed Node and NPM by typing these commands:

node -v
npm -v

If they return without any errors and display the version then it means we now have correctly installed Node and NPM.

Create React App

https://reactjs.org/docs/create-a-new-react-app.html

So now we have Node and NPM installed we can install React. You can read about create react app in the above link. Create react app will install everything for us to start using React. We will install our app called todos with this command:

npx create-react-app todos

This will use npx which is shorthand for running npm and executing the function called create-react-app. It will create a directory called todos with everything installed need to get up and running.

We can now go into the todos directory and start using React.

cd todos
npm start

This command will start the React development server. You can now go to localhost:3000 in your browser.

You should see the default React app that was installed. Now you can go to the src/App.js file, make a change, save it, and watch it reload your changes in the browser.

Next Lesson

In the next lesson we will go over HTML and CSS and how React uses them to display our application.

Next Article
HTML and CSS 101
Previous Article
How to build a React App

H
andrewgbliss
9 months ago