Preparing the development environment for React
Setup for React
This lesson will describe how to: - Use React in an HTML page - Configure your editor to highlight React JSX code - Test the output of JSX in the browser
Adding React to an HTML Page
React can be added like any other library by using a
<script> link in the header
<script> link can be to a Content Delivery Network (CDN) or a local package.
Example HTML File Head
<head> <meta charset="UTF-8" /> <title>Hello World</title> <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script> <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script> <script src="https://unpkg.com/[email protected]/babel.min.js"></script> </head>
Local Package Installation Requirements
You will need to have the following to include React as a local package in your HTML file.
- A package manager like NPM or Yarn
- A package bundler like Webpack or Browserify
- A compiler like Babel
Local Package Installation Setup
We will start with installing React using NPM
npm init -y npm install --save react react-dom
Local Package Installation 1
Download the React, ReactDOM, and Babel Scripts from the Content Delivery Network (CDN)
Local Package Installation 2
Put the content of the scripts into a directory called
src in the project root
mkdir js mv path/to/downloads/react.development.js ./src/ mv path/to/downloads/react-dom.development.js ./src/ mv path/to/downloads/babel.min.js ./src/
Local Package Installation 3
index.html file and source all three files in the head
<html lang="en"> <head> <meta charset="UTF-8" /> <title>Hello World</title> <script src="src/react.development.js"></script> <script src="src/react-dom.development.js"></script> <script src="src/babel.min.js"></script> </head> <body> <div id="output"></div> </body> </html>
Local Package Installation 4
Now simply write some react in a
<script type="text/babel"> ReactDOM.render( <h1>Hello, local React!</h1>, document.getElementById('output') ); </script>
Finished Local Package Installation
Finished simple index.html
<html lang="en"> <head> <meta charset="UTF-8" /> <title>Hello World</title> <script src="src/react.development.js"></script> <script src="src/react-dom.development.js"></script> <script src="src/babel.min.js"></script> </head> <body> <div id="output"></div> <script type="text/babel"> ReactDOM.render( <h1>Hello, local React!</h1>, document.getElementById('output') ); </script> </body> </html>
The VS Code editor extension 'Sublime Babel' will highlight the syntax for React, JSX, and ES6+ Code.
- Search for "sublime babel"
- Extension page for Sublime Babel
- Install the extenstion from the Visual Studio Marketplace or directly within the VS Code editor.
React Setup with NPM
There are several packages to install to get your react app setup properly
npm init -yto initialize your
npm install react react-dom babeland optionally
react scriptsisn't necessary to get your react app up and running, but it will give you some pre-built scripts to make setup much easier
- Be aware though; react-scripts has very specific ideas about how you should structure your directory. If you're missing anything, or things aren't named as expected react-scripts will tell you so when you try to run
- Create a
- inside your public directory create an
- in your index.html set up your basic html structure (! + tab) and create a div in the body called
- inside your public directory create an
In your main directory create a
srccreate a file named
- import react and react dom into index.js
import React from 'react' import ReactDOM from 'react-dom'
- You can now extend the
React.Componentclass to create stateful react components, and the
ReactDOM.render(element, component)method to render your component(s) to the page.
- setup a start script in your package.json `"start" : "react-scripts start"
- see a development version of your app by running
npm startIt will be served at localhost:3000 by default.
Using 'Create React App'
There is also a package called
create-react-app which will automatically install all your required dependencies, and set up a directory for your react app automatically. Using Create React App is simple:
- Install Create React App globally
npm install -g creat-react-app
- In the directory you want to create your react app in; from the command line type
npx create-react-app app-name
This will create a new directory for the front end of your app called
app-name. Inside that there will be another package.json file with all the scripts you need to create a react app, run it locally, and build a production version of that site.
Keep all your react components in the
src folder, and you're good to go!