React Installation

Before you begin, make sure your development environment includes Node.js® and an npm package manager.

  • js – Angular requires Node.js version 8.x or 10.x. To check your version, run node -v in a terminal/console window. To get Node.js, go to nodejs.org.
  • npm package manager – Angular, the Angular CLI, and Angular apps depend on features and functionality provided by libraries that are available as npm packages. To download and install npm packages, you must have an npm package manager. To check that you have the npm client installed, run npm -v in a terminal/console window.
  • Editor − There are many editors that can be used for React development such as Visual Studio code and WebStorm.

npm Installation

Let’s now look at the steps to get npm installed. The official site for npm is https://www.npmjs.com/

Step 1 − Go to the “get started with npm” section in the site.

Step 2 − In the next screen, choose the installer to download, depending on the operating system. For the purpose of this exercise, download the Windows 64 bit version.

Step 3 − Launch the installer. In the initial screen, click the Next button.

Step 4 − In the next screen, Accept the license agreement and click the next button.

Step 5 − In the next screen, choose the destination folder for the installation and click the Next button.

Step 6 − Choose the components in the next screen and click the Next button. You can accept all the components for the default installation.

Step 7 − Click the Install button.

Step 8 − Once the installation is complete, click the Finish button.

Step 9 − To confirm the installation, in the command prompt you can issue the command npm version. You will get the version number of npm.

CDN Installation

The fastest way to get started is to serve JavaScript from the CDN (also available on cdnjs and jsdelivr):

<!– The core React library –>

<script src=”https://fb.me/react-15.0.2.js”></script>

<!– The ReactDOM Library –>

<script src=”https://fb.me/react-dom-15.0.2.js”></script>

NPM Installation

It’s just as easy with npm:

npm i –save react

Static HTML File

This first method is not a popular way to set up React, but it will be familiar and easy to understand if you’ve ever used a library like jQuery, and it’s the least scary way to get started if you’re not familiar with Babel, and Node.js.

Let’s start by making a basic index.html file. We’re going to load in three CDNs in the head – React, React DOM, and Babel. We’re also going to make a div with an id called root, and finally we’ll create a script tag where your custom code will live.

index.html

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″ />

<title>Hello React!</title>

<script src=”https://unpkg.com/react@16/umd/react.development.js”></script>

<script src=”https://unpkg.com/react-dom@16/umd/react-dom.development.js”></script>

<script src=”https://unpkg.com/[email protected]/babel.js”></script>

</head>

<body>

<div id=”root”></div>

<script type=”text/babel”>

// React code will go here

</script>

</body>

</html>

I’m loading in the latest stable versions of the libraries as of the time of this writing.

  • React – the React top level API
  • React DOM – adds DOM-specific methods
  • Babel – a JavaScript compiler that lets us use ES6+ in old browsers

The entry point for our app will be the root div element, which is named by convention. You’ll also notice the text/babel script type, which is mandatory for using Babel. Now, let’s write our first code block of React. We’re going to use ES6 classes to create a React component called App.

class App extends React.Component {

//…

}

Now we’ll add the render() method, the only required method in a class component, which is used to render DOM nodes.

class App extends React.Component {

render() {

return (

//…

);

}

}

Inside the return, we’re going to put what looks like a simple HTML element. Note that we’re not returning a string here, so don’t use quotes around the element. This is called JSX.

class App extends React.Component {

render() {

return <h1>Hello world!</h1>

}

}

Finally, we’re going to use the React DOM render() method to render the App class we created into the root div in our HTML.

ReactDOM.render(<App />, document.getElementById(‘root’))

Here is the full code for our index.html.

index.html

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″ />

<title>Hello React!</title>

<script src=”https://unpkg.com/react@16/umd/react.development.js”></script>

<script src=”https://unpkg.com/react-dom@16/umd/react-dom.development.js”></script>

<script src=”https://unpkg.com/[email protected]/babel.js”></script>

</head>

<body>

<div id=”root”></div>

<script type=”text/babel”>

class App extends React.Component {

render() {

return <h1>Hello world!</h1>

}

}

ReactDOM.render(<App />, document.getElementById(‘root’))

</script>

</body>

</html>

Now if you view your index.html in the browser, you’ll see the h1 tag we created rendered to the DOM.

Create React App

The method I just used of loading JavaScript libraries into a static HTML page and rendering the React and Babel on the fly is not very efficient, and is hard to maintain.

Fortunately, Facebook has created Create React App, an environment that comes pre-configured with everything you need to build a React app. It will create a live development server, use Webpack to automatically compile React, JSX, and ES6, auto-prefix CSS files, and use ESLint to test and warn about mistakes in the code.

To set up create-react-app, run the following code in your terminal, one directory up from where you want the project to live. Make sure you have 5.2 or higher in Node.js.

npx create-react-app react-tutorial

Once that finishes installing, move to the newly created directory and start the project.

cd react-tutorial

npm start

Once you run this command, a new window will popup at localhost:3000 with your new React app. If you look into the project structure, you’ll see a /public and /src directory, along with the regular node_modules, .gitignore, README.md, and package.json.

In /public, our important file is index.html, which is very similar to the static index.html file we made earlier – just a root div. This time, no libraries or scripts are being loaded in. The /src directory will contain all our React code.

To see how the environment automatically compiles and updates your React code, find the line that looks like this in /src/App.js:

To get started, edit `src/App.js`

and save to reload.

And replace it with any other text. Once you save the file, you’ll notice localhost:3000 compiles and refreshes with the new data. Go ahead and delete all the files out of the /src directory, and we’ll create our own boilerplate file without any bloat. We’ll just keep index.css and index.js.

For index.css, I just copy-and-pasted the contents of Primitive CSS into the file. If you want, you can use Bootstrap or whatever CSS framework you want, or nothing at all. I just find it easier to work with.

Now in index.js, we’re importing React, ReactDOM, and the CSS file.

src/index.js

import React from ‘react’

import ReactDOM from ‘react-dom’

import ‘./index.css’

Let’s create our App component again. Before, we just had an <h1>, but now I’m adding in a div element with a class as well. You’ll notice that we use className instead of class. This is our first hint that the code being written here is JavaScript, and not actually HTML.

class App extends Component {

render() {

return (

<div className=”App”>

<h1>Hello, React!</h1>

</div>

)

}

}

Finally, we’ll render the App to the root as before.

ReactDOM.render(<App />, document.getElementById(‘root’))

Here’s our full index.js. This time, we’re loading the Component as a property of React, so we no longer need to extend React.Component.

src/index.js

import React, { Component } from ‘react’

import ReactDOM from ‘react-dom’

import ‘./index.css’

class App extends Component {

render() {

return (

<div className=”App”>

<h1>Hello, React!</h1>

</div>

)

}

}

ReactDOM.render(<App />, document.getElementById(‘root’))

If you go back to localhost:3000, you’ll see “Hello, React!” just like before. We have the beginnings of a React app now.

React Developer Tools

There is an extension called React Developer Tools that will make your life much easier when working with React. Download React DevTools for Chrome, or whatever browser you prefer to work on.

After you install it, when you open DevTools, you’ll see a tab for React. Click on it, and you’ll be able to inspect components as they’re written. You can still go to the Elements tab to see the actual DOM output. It may not seem like that much of a deal now, but as the app gets more complicated, it will become increasingly necessary to use.

Now we have all the tools and setup we need to actually begin working with React.

 

Get industry recognized certification – Contact us

Menu