Table of contents
Prerequisites
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:
Author your own Node.js modules ("packages"), and publish them on the npm website so that other people can download and use them
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:
Open the terminal on your VS Code or your terminal.
Run the command below:
npm init react-app firstappThe 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: See https://github.com/lydell/source-map-resolve#deprecated 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 startIf 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:
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