Setting Up A React Project Boilerplate

Setting Up A React Project Boilerplate


Package Manager (Node + npm)

React is a UI library, and you will encounter that many times you will need to add other packages to your React application. A package in JavaScript contains all the files needed for a module. To install these packages effectively and manage their dependencies you can use a package manager like Node Package Manager (NPM).

You can install npm by installing Node.js, which will then automatically install npm.

What is Node Package Manager(NPM)?

When Node.js is installed on a computer, npm comes bundled with it.

With npm, you can:

  1. Author your own Node.js modules ("packages"), and publish them on the npm website so that other people can download and use them

  2. Use other people's authored modules ("packages")

So, ultimately, npm is all about code sharing and reuse. You can use other people's code in your projects and publish your own Node.js modules so that other people can use them.

An example npm module that can be useful for a new React developer is create-react-app. While this npm module comes with its own website, you can also find some info on the create-react-app project on GitHub.

Whenever you run the npm command to add other people's code, that code, and all other Node modules that depend on it, get downloaded to your machine.

However, although it's possible to do so, this is not necessary, at least in the case of the create-react-app Node module. In other words, you can avoid installing the create-react-app package but still use it. You can do that by running the following command: npm init react-app example, where “example” is the actual name of your app. You can use any name you’d like, but it’s always good to have a descriptive and short name.

In the next section, you'll learn how to build a new app that you can name: firstapp.

Building firstapp:

  1. Open the terminal on your VS Code or your terminal.

  2. Run the command below:

     npm init react-app firstapp

    The installation and setup might take a few minutes.

    Here's the output of executing the above command:

     Creating a new React app in /home/pc/Desktop/firstapp.
     Installing packages. This might take a couple of minutes.
     Installing react, react-dom, and react-scripts with cra-template...
     added 1383 packages in 56s
     190 packages are looking for funding
                            run `npm fund` for details
     Initialized a git repository.
     Installing template dependencies using npm...
     npm WARN deprecated source-map-resolve@0.6.0:
     added 39 packages in 6s
     190 packages are looking for funding
                            run `npm fund` for details
     Removing template package using npm...
     removed 1 package, and audited 1422 packages in 3s
     190 packages are looking for funding
                            run `npm fund` for details
     6 high severity vulnerabilities
     To address all issues (including breaking changes), run:
     npm audit fix --force
     Run `npm audit` for details.
     Created git commit.
     Success! Created firstapp at /home/pc/Desktop/firstapp
     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 firstapp
     npm start

    If you follow the suggestions from the above output, you'll run: cd firstapp, and then npm start.

    This will end up with the following output in the built-in terminal:

  3. Again, following the instructions, opening a browser with the address bar pointing to http://localhost:3000, will show the following page in your browser:

This means that you've successfully:

  • Set up your local development environment

  • Run the create-react-app npm package (without installing it!)

  • Built a starter React app on your local machine

  • Served that starter React app in your browser