Setting up React JS Development can be sometimes confusing and time consuming. In this Setup React JS Development Environment for ES5 and ES6 tutorial we will go though some easier way of setting up the env. We have separate setup instructions for ES5 and ES5. The objective of this tutorial is to have you up and running with React JS in no time. We will use browser based JAXTransformer for ES5 and WebPack for ES6.
React JS Setup for ES5
Most of the production ready codebase is using ES5 and it’s easier to integrate with existing framework when using ES5. Setting up React JS is ES5 is also fairly easy and does not need any specific tools.
Download React JS
Download React Starter Kit from https://facebook.github.io/react/downloads.html
. We will use the react-dom-x.xx.x.js
and react-with-addon-x.xx.x.js
. As of now React 0.14.7
is the latest version. The JSXTransformer-0.13.3.js
is no longer available as part of the React Starter Kit.
Babel
If you have started learning React JS, then you must know that you will be using JAX to create the DOM Elements.You need to then use a transformer in order to convert the JAX Syntax into regular Java Script. We will use Babel for for.
Please add the following to your html.
1 2 |
https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser-polyfill.js |
Now, these can’t be used in the production, since you want to pre-build your js and add that to your project. However for a development environment these browser transformers are just fine.
Adding JSX File
We will now add app.jsx
in the index.html. The type should be text/babel
.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<head> <meta charset="utf-8"> <title>React Setup</title> <script src="js/react-with-addons-0.14.7.js"></script> <script src="js/react-dom-0.14.7.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser-polyfill.js"></script> </head> <body> <div id="root"></div> <script type="text/babel" src="lib/app.jsx"></script> </body> |
Create a new file named app.jsx
inside lib folder. Add the following code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
var App = React.createClass({ propTypes: { }, getInitialState:function(){ //this.setState() in constructor() return {}; }, render: function() { return( <div> <h1>React Tutorial - ADeveloperDiary.com</h1> </div> ) } }); ReactDOM.render(<App/>,document.getElementById('root')); |
Now open the index.html using any web server (I recommend Brackets.io) and you should be able to see the output is getting rendered by React JS.
Please find the ES5 related files in github.
React JS Setup for ES6
Setting up React JS for ES6 is not as easy as ES5, however you need to just follow some simple steps. We will be using WebPack Here.
Prerequisites
Node.js
is the only prerequisites for installing React JS Dependencies in ES6 Environment. Please install it if you don’t have it already before proceed to the next step.
Install modules using npm
Create a new folder for your project. Open command prompt/terminal there and execute following commands.
1 |
npm init |
Press enter to set the default values. Here is a screen print.
1 |
npm install --save react |
Here is the screen print
1 |
npm install --save react-dom |
Here is the screen print
Then execute the following as well.
1 2 3 4 |
npm install --save-dev webpack npm install --save-dev babel-loader babel-core npm install --save-dev babel-preset-es2015 npm install --save-dev babel-preset-react |
Configure Babel
We would now need to create a configuration file named .babelrc
. Please execute the following lines to create and configure the file (this will work if you are in unix/mac). Alternatively you can just add { "presets": ["react","es2015"] }
to the .babelrc file.
1 |
echo '{ "presets": ["react","es2015"] }' > .babelrc |
Configure WebPack
Now lets create a file name webpack.config.js
in order to configure WebPack. Add the following contents to the file. We will have our code inside ES6 folder, otherwise can can remove the ES6 folder and directly refer lib
and dist
.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
module.exports={ context: __dirname + "/ES6/lib", entry: "./app.jsx", output: { path: __dirname + "/ES6/dist", filename: "bundle.js" }, module: { loaders: [ { test: /\.jsx$/, exclude: /node_modules/, loader: ['babel'], query: { presets: ['es2015', 'react'] } } ] } }; |
Running WebPack
Our final task would be to run the WebPack. Here is the command to listen to any changes to the *.jsx files and make the bundle.js. If you run it now you might get an error saying that the app.jsx does not exists.
For windows, you might just want to run the webpack.bat
file with the same argument.
1 |
./node_modules/.bin/webpack -d --watch |
Building JSX in ES6
Now add the index.html
in the ES6 folder. Here is the content of the file.
1 2 3 4 5 6 7 8 9 10 |
<head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="root"></div> <script type="text/javascript" src="dist/bundle.js"></script> </body> |
Create a folder named lib
and add the app.jsx
there.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import React ,{Component} from 'react'; import ReactDOM from 'react-dom'; class App extends Component { render(){ return( <div> <h1>React Tutorial - ADeveloperDiary.com</h1> </div> ); } } ReactDOM.render(<App />,document.getElementById('root')); |
Now go ahead and the run the webpack using this ./node_modules/.bin/webpack -d --watch
. You might see the following as the output.
Now the dist/bundle.js
must have been created. Open index.html
in any web server and you should be able to see the output.
Please find the code in github.
Let me know if you have any questions. Hope this Setup React JS Development Environment for ES5 and ES6 will help you to get started with React JS. I will have more tutorials on React JS posted soon.
ks says
Hi :
I tried to launch the index.html at /react_setup/ES5/index.html , why m i seeing a blank page.
Did i miss any step ?
adeveloperdiary says
hi ks,
Could you please open the console and find out whether you are seeing any error? Please post the error here.
Thanks,
A Developer Diary
ks says
Hi : I running on windows, I didn’t see any error from the command prompt when i issue this command
C:\Users\react_setup\ES5>start index.html
Arindam says
The right babel configuration that worked for me is
echo { “presets”: [“es2015”]} > .babelrc
or change the content of .babelrc to
{ “presets”: [“es2015”]}
Sudipto Roy says
In webpack.config.js, we need to change the loader description follows:
loader: ‘babel-loader’,
It’s no longer allowed to omit the ‘-loader’ suffix when using loaders. You need to specify ‘babel-loader’ instead of ‘babel’, see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed