Tutorial to create starter React app with create-react-app

Posted in Tutorials

To create a starter React app, a good tool is “create-react-app” which was created by Facebook.   You install it by running npm from your terminal.  This assume you have already installed Node and npm.  I’m using Node 10 and npm.

1.  In your terminal, run …

npm install -g create-react-app

2.  This install “create-react-app” globally in your system.

3.  To run it, type in the terminal…

create-react-app your-first-app

This creates a new folder “your-first-app” at your current location.  Inside that new folder is your React app.

4.  If the above command doesn’t work, type this instead…

npx create-react-app your-first-app

“npx” comes with Node 5.2 or above.

5. Next “cd” into the folder “your-first-app”…

cd your-first-app

6.  And start your app by …

npm start

7.  Yes, the instructions says to start it up with “yarn start”.  If you have yarn installed, then you can do that.

8.  In either case, it should pop open your browser pointing to http://localhost:3000/

9.  If you see the following, that is your starter React app…

 

Note that this is a development build and not suitable for production.

10. If you look in package.json, you will see a script “eject”.  In some situation where you want full control over the source code, you might want to run …

npm run eject

After that you will want to run …

npm install

And your app should start up like normal with …

npm start

 

---