Create & Start React App

We are going to learn how to create react app using Node Package Runner. In short npx is the command for node package runner

npx command is available in node version 5.x onwards, please make sure you have Node.js & npm installed globally. If you have not installed, please visit this post on how to install node-js

Open terminal if you are using Mac or command prompt if you are using Windows and enter following command to ensure we have node and npm installed

node -v
npm -v

If you don’t see version number, then mostly like you don’t have npm or node is installed, either npm & node is not setup properly in environment variables.

I am going to using Visual Studio Code Editor for the development. I am launching VSCode and choose the folder I like to create my project. Open new terminal and typing following command

npx create-react-app classroom
Video tutorial to demonstration on how to create react app in VisualStudio Code

npx is a replacement for installing global packages. It encourages you to install packages locally, but still be able run them as if they were global, just with npx.

Once installed successfully you will see below screen

Now navigate to react app and start the server. I created classroom as application name, so I will have folder name “classroom”

cd classroom
npm start

npm start command will start react-app we created and launch the default browser, you should be able to see app up and running shortly.

Nice to have tools for React app development

1.) Code Snippet

Code snippets for Visual Studio code is great for beginners to expertise to get things done quickly. It will allow us focus on building application.

Follow this link to Install Extension in your VSCode ReactJS Code snippet extension for Visual Studio or Go to extension sidebar in VSCode and search for Reactjs code snippet and click install button

2.) Chrome React Extension

React team has very good chrome browser based extension, it’s one of good tool to have for react app debugging, profiling, etc.

Follow this link to installChrome reactjs extension

Categories: ReactJS

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.