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