Setting Up React
setting up React JS application
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. We’ll be using a popular package manager named npm. 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.
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 installNode.jsandnpm. If you’ve already installedNode.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:
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.jsonfile, 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 initto 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 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:
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:
Okay so our installation is done for React using Node modules
Last updated
