React Setup, Part I: React and ReactDOM
The Codecademy site provides you with a development environment already set up for you to complete exercises and run your code. Now that you’ve learned how to code in React, let’s go through the process of setting up your development environment on your computer so that you can write your own applications.
We’ve written a brief guide for each major step of the installation process! This is the first guide in the series. This guide will teach you:
- How to install Node.js and npm
- How npm is different than what you may be used to.
- How to create a package.json file, and what that means.
- How to install the React and ReactDOM libraries.
Installing Node and 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.
You can install
npm by installing
Node.js is an environment for developing server-side applications. When you install
npm will install automatically.
Ctrl-click here to navigate to the Node.js homepage in a new tab.
You should see links to download
Node.js. Click on the download link of your choice. Follow the subsequent instructions to install
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:
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!
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
npm anymore, but you should start from here for every new React project that you make.
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:
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?
npm init automatically creates a new file named
package.json contains metadata about your new project.
Soon, you will install more
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.
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. Our first module is named
To install the
react module, type this command in the terminal:
install can be abbreviated as
--save can be abbreviated as
-S, if you like to abbreviate:
You just installed React! Now you can access it in your files with the code
var React = require('react').
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 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').
react-dom, type one of these two commands in the terminal:
Whenever you’re ready, continue to our next article!