Create React App

Lets create your first React App using create-react-app. Here we will go through all steps required to build a React App.

Follow the instructions shown to create your first React App

  • Download nodejs from below : https://nodejs.org/en/download/
  • After downloading and installing nodejs open command prompt and run below command
    windows users : npm install create-react-app -g
    Mac or linux users : sudo npm install create-react-app -g
  • The project will be installed globally with npm(nodes package manager), npm comes with nodejs, and it is useful for managing third party JavaScript packages. -g is for globally installing the app, so that you can use this app globally on your machine and can use this command from anywhere on your machine.
  • Now the create-react-app is installed on your machine globally.
  • Now you can use command create-react-app to create new React project like below. Before running the below command navigate to the location where you want to create your first react project.

    $ create-react-app projectdebug-react-guide –-scripts-version 1.1.5
  • ‘create-react-app’ is a command used for creating a new react project ‘projectdebug-react-guide’ is a project name of your choice. ‘--scripts-version 1.1.5’ is optional and I added it to make your project folder structure same as mine because the structure may change with new updates. This does not impact the version of react being used in a project. This impacts the structure of your project.

Once you run this command your project will be created like below, I am using Microsoft VSCode but you can use any code editor.

  • Also after running the command to create your react project a folder will be created, for me the name of the folder will be ‘projectdebug-react-guide’, navigate to this folder using your command prompt using command ‘cd’
    $ cd projectdebug-react-guide
  • Now run below command
    npm start
    this starts a development server, it will open a new tab in your web browser. If this command is unable to open a new browser tab. You can type below address in browser to see webpage for your brand new react app http://localhost:3000/

Please note if you close the command prompt, the development server will be stopped and your pages will not be loaded. So keep it running so that background processes for development server keeps running and your webpages will be loaded automatically, any change you make to your code will be loaded automatically without hitting the refresh button.

Folder structure of your new react project

There are lot of files and directories in our project, we will talk about the most important ones, we will need these files in future to edit in various scenarios

  • Package.json : general dependicies used by the project are mentioned in this file. These are created by create-react-app.  There is a list of scripts mentioned in this file. You can run these scripts with npm run and then the script name.
  • Node_modules folder : holds all the dependencies and sub dependencies of our projects. Be careful about node_modoles folder. You shouldn’t be editing anything from this folder.
  • Public folder : it’s the root which is served by the webserver. Inside this folder you have index.html file. This is the only html file and we don’t need to any other html again to our project. If you want to create multiple page application then you will have to create multiple react projects.
  • Manifest.json : metadata about our project
  • Index.js : renders the react app