Setting Up ReactJS Environment
Heres a basic react js dev setup (Level : Beginner)
Create a directory and go to the root of the directory
mkdir my-react-dir
cd my-react-dir
Install npm
brew install npm
// installs node
or you can download it directly from NodeJS.org
If Yarn is what you like then ←
Install Yarn
brew install yarn
// installs node
brew install yarn --without-node
Initialize Package.json
npm init
OR
yarn init
Go with the default options.
cat package.json
{ "name": "react-environment",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {},
"author": "",
"license": "ISC"
}
Install webpack and webpack-dev-server using npm or yarn
npm install webpack webpack-dev-server --save-dev
OR
yarn add webpack webpack-dev-server -D
Add an index.html
touch index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>React Environment Setup</title> </head> <body> <h3>Setting the React Env</h3> <div id='app'></div> <script type="text/javascript" src="bundle.js"></script> </body> </html>
Add an index.js file
mkdir app
cd app
touch index.js
Add to index.js this single line
//index.js console.log("Hello React");
Configure WebPack
module.exports = { entry: ['./app/index.js'], output: { filename: 'bundle.js' } };
Install and set Babel dependencies
npm install babel-core babel-loader babel-preset-env --save-dev
OR
yarn add babel-core babel-loader babel-preset-env -D
- babel-core and babel-loader is the dependency, which transpile the ES6 code to ES5
- Use babel-preset-env instead of babel-preset-es2015. babel-preset-env let us use some advanced feature of ECMAScript in our web applications.
Update package.json
{ "name": "react-environment", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "webpack-dev-server" }, "author": "", "license": "ISC" }
Update WebPack config:
module.exports = { entry: ['./app/index.js'], output: { filename: 'bundle.js' }, module: { loaders: [ { loader: 'babel-loader', test: /\.js$/, exclude: /node_modules/ } ] }, devServer:{ port:9000 } };
Run the dev server
npm run build
OR
yarn build
This will run the build script defined in package.json which internally will invoke web pack dev server .
App will be up on http://localhost:9000/
Install and configure React and ReactDOM
We would also need to get the package called “babel-preset-react” and “babel-preset-stage-3” to use latest ES6 features and to write react code in ES6 syntax
npm install --save react react-dom
OR
yarn add react react-dom
npm install babel-preset-react babel-preset-stage-3 --save-dev
OR
yarn add babel-preset-react babel-preset-stage-3 -D
The package.json should look like this :
{ "name": "react-environment", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "build": "webpack-dev-server" }, "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-env": "^1.6.0", "babel-preset-react": "^6.24.1", "babel-preset-stage-3": "^6.24.1", "webpack": "^3.6.0", "webpack-dev-server": "^2.8.2" }, "dependencies": { "react": "^15.6.1", "react-dom": "^15.6.1" } }
Create a file .babelrc in root directory and add the following to it:
{ "presets": ["env", "react", "stage-3"] }
Create a component file App.js inside components folder
cd app
mkdir components
touch app.js
Add the following to app.js
//app.js import React, { Component } from 'react'; export default class MyApp extends Component { render(){ return ( <div> The React Env is now set. Served from react component. </div> ); } }
Import App.js file into index.js file
//index.js //console.log("Hello React"); import React from 'react'; import ReactDOM from 'react-dom'; import App from './components/App'; ReactDOM.render(<App />, document.getElementById('app'));
Now just run the dev server (npm build or yarn build) and launch http://localhost:9000 in your browser
This is a basic react dev setup to get started and going.
You could add rules to your web pack for minification, compression and all.
Personally I found Yarn (from Facebook) to be much faster than npm for installing node modules.
Leave a Reply