# Setting Up React

### Installing Node & NPM

Getting React up and running is not as simple as downloading one large piece of software. You will need to install many, smaller software packages.

The first thing to install is a good installer! You need a way to download and install software packages easily, without having to worry about dependencies.

In other words, you need a good [package manager](https://en.wikipedia.org/wiki/Package_manager). We’ll be using a popular package manager named [npm](https://www.npmjs.com/). `npm` is a great way to download, install, and keep track of JavaScript software.

You can install `npm` by installing `Node.js`. `Node.js` is an environment for developing server-side applications. When you install `Node.js`, `npm` will install automatically.

1. [Ctrl-click here](https://nodejs.org/en/) to navigate to the Node.js homepage in a new tab.
2. You should see links to download `Node.js`. Click on the download link of your choice. Follow the subsequent instructions to install `Node.js`and `npm`. If you’ve already installed `Node.js`, that’s okay, do it anyway.

Congratulations! You’ve just installed some incredibly powerful software!

### How NPM is different 

When you install software, you may be used to something like this: you install what you need, it sits there on your computer, and you can use it whenever you want.

You can do that with `npm`! But there’s a different, better way: install what you need, over and over again, every time that you need it. Download and install React every time that you make a React app.

That sounds much worse! Here’s why it’s actually better:

First, `npm` makes installation extremely easy. Installing software over and over sounds like a headache, but it really isn’t. We’ll walk through how soon!

Second, `npm` modules (“modules” are another name for software that you download via `npm`) are usually small. There are countless modules for different specific purposes. Instead of starting your app with a giant framework that includes tons of code you don’t need, you can install only modules that you will actually use! This helps keep your code quick, easy to navigate, and not vulnerable to dependencies that you don’t understand.

IN CONCLUSION: Starting now, every step in this article series will be a step that you have to take ***every time you make a new React app***. You don’t have to install `Node.js` and `npm` anymore, but you should start from here for every new React project that you make.

### NPM init command

Alright, let’s make a React app on your home computer! Where do you start?

To begin, decide where you want to save your app, and what you want to name it. In the terminal, `cd` to wherever you want to save your app. Use `mkdir` to make a new directory with your app’s name. `cd` into your new directory.

Once you’ve done all that, type this command into your terminal:

```
npm init
```

You will get a lot of prompts! You can answer them, but it’s also safe to just keep hitting `return` and not worry about it.

Once the prompts are done, use your favorite text editor to open all of the files in your project’s root directory. You could do this with a terminal command such as `atom .` or `subl .`. You will see that a new file named `package.json` has been created!

What just happened?

The command `npm init` automatically creates a new file named `package.json`. `package.json` contains metadata about your new project.

Soon, you will install more `npm` modules. `package.json` keeps track of the modules that you install. Other developers can look at your `package.json`file, easily install the same modules that you’ve installed, and run their own local versions of your project! This is fantastic for collaborating.

### Install React Library as NPM Module 

Alright! You’ve made a project folder, navigated into it, and used `npm init`to create a `package.json` file. Now you’re ready to install some modules!

To install a *module* using `npm`, you need to know that module’s *name*. If you want to install a module and you aren’t sure of its exact name, you can search for it [here](https://www.npmjs.com/). Our first module is named `react`.

To install the `react` module, type this command in the terminal:

`install` can be abbreviated as `i`, and `--save` can be abbreviated as `-S`, if you like to abbreviate:

![install react-dom](https://1949368877-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LgMQu802me2gEI8E8bY%2F-Lh0yYEFx23sJ9ukoRLz%2F-Lh11CnllC0wylN0a_vx%2FScreen%20Shot%202019-06-10%20at%209.06.32%20PM.png?alt=media\&token=29f228a2-6c3f-4d50-8852-5c89790d64c5)

![install react](https://1949368877-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LgMQu802me2gEI8E8bY%2F-Lh0yYEFx23sJ9ukoRLz%2F-Lh114_boR3pD3F9bNZo%2FScreen%20Shot%202019-06-10%20at%209.05.58%20PM.png?alt=media\&token=c3c3b832-5b94-40eb-95b5-5a2ddc135140)

You just installed React! Now you can access it in your files with the code `var React = require('react')`

### Install React-DOM Library 

If you look at `package.json`, you can see that there’s an object named `dependencies` that now has `react` listed as a dependency. This indicates that your project is “dependent” on having react installed. If someone tries to run your project, it probably won’t work unless they install react first.

You can also see something else new in your directory: a folder named `node_modules`.

`node_modules` is where `npm` modules are saved. If you open `node_modules`, you should see a folder named `react`, which contains the code that makes React run.

The next thing that you want to install is `react-dom`. Once you install `react-dom`, you will be able access it in your files with the code `var ReactDOM = require('react-dom')`.

To install `react-dom`, type one of these two commands in the terminal:

![npm init command ](https://1949368877-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LgMQu802me2gEI8E8bY%2F-Lh0yYEFx23sJ9ukoRLz%2F-Lh12_3V2SAeZ-j-nOvN%2FScreen%20Shot%202019-06-10%20at%209.12.10%20PM.png?alt=media\&token=d44a3816-0ad9-40b7-8be3-fb5c07a4fd7a)

![more package json](https://1949368877-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LgMQu802me2gEI8E8bY%2F-Lh0yYEFx23sJ9ukoRLz%2F-Lh12mskAUk-FpFASZuh%2FScreen%20Shot%202019-06-10%20at%209.13.28%20PM.png?alt=media\&token=439fe980-85f7-44ec-9b74-63f642895c87)

Okay so our installation is done for React using Node modules