{"id":1742,"date":"2016-03-18T18:21:23","date_gmt":"2016-03-18T12:51:23","guid":{"rendered":"http:\/\/ramkulkarni.com\/blog\/?p=1742"},"modified":"2016-03-18T18:21:23","modified_gmt":"2016-03-18T12:51:23","slug":"using-reactjs-with-babel-and-es6-2","status":"publish","type":"post","link":"http:\/\/ramkulkarni.com\/blog\/using-reactjs-with-babel-and-es6-2\/","title":{"rendered":"Using ReactJS with Babel and ES6"},"content":{"rendered":"

I wanted to create this post\u00a0shortly\u00a0after the last post about Setting up ES6+Babel+Gulp<\/a>, but it got delayed for some reasons. Anyways ..<\/p>\n

Though it is not very complicated to setup ReactJS to work with Babel, there are a few non-obvious things you need to be aware of, specifically the absence of \u00a0auto-binding in ReactJS when\u00a0coded in ES6. Let’s create a small NodeJS project using Gulp –<\/p>\n

Install following packages –<\/p>\n

npm<\/span> install<\/span> gulp<\/span> gulp-connect<\/span> vinyl-source-stream<\/span> browserify<\/span> babelify<\/span> babel-preset-es2015<\/span> react<\/span> react-dom<\/span> babel-preset-react<\/span> --save-dev<\/span>\n<\/pre>\n
In addition to packages installed in the last post, here we are installing react, react-dom and\u00a0babel-preset-react packages.<\/p>\n
The directory structure is similar to one in the previous post<\/a>, except that we add views folder for JSX files.<\/p>\n
ES6ReactJSBabelTest\n  -- build\n  -- src\n    -- js\n       -- views\n    -- html\n  -- gulpfile.js<\/pre>\n
Gulp ‘build’ task is modified to add ‘react’ preset to babelify and add jsx extension to browserify (we want browserify to process .jsx files in addition to .js files)<\/p>\n
gulpfile.js<\/strong> (partial)<\/p>\n
gulp.<\/span>task(<\/span>\"<\/span>build<\/span>\"<\/span>,<\/span> function<\/span>(<\/span>)<\/span>{<\/span>\n    return<\/span> browserify(<\/span>{<\/span>\n        entries:<\/span> [<\/span>\"<\/span>.\/src\/js\/index.js<\/span>\"<\/span>]<\/span>,<\/span>\n        extensions:<\/span> [<\/span>\"<\/span>.js<\/span>\"<\/span>,<\/span> \"<\/span>.jsx<\/span>\"<\/span>]<\/span>\n    }<\/span>)<\/span>\n    .<\/span>transform(<\/span>babelify.<\/span>configure(<\/span>{<\/span>\n        presets :<\/span> [<\/span>\"<\/span>es2015<\/span>\"<\/span>,<\/span> \"<\/span>react<\/span>\"<\/span>]<\/span>\n    }<\/span>)<\/span>)<\/span>\n    .<\/span>bundle(<\/span>)<\/span>\n    .<\/span>pipe(<\/span>source<\/span>(<\/span>\"<\/span>bundle.js<\/span>\"<\/span>)<\/span>)<\/span>\n    .<\/span>pipe(<\/span>gulp.<\/span>dest(<\/span>\"<\/span>.\/build<\/span>\"<\/span>)<\/span>)<\/span>\n    ;<\/span>\n}<\/span>)<\/span>;<\/span>\n<\/pre>\n
We will then\u00a0create index.html in html folder with following content.<\/p>\n
html\/index.html<\/strong><\/p>\n
<!DOCTYLE html><\/span>\n\n<<\/span>html<\/span>><\/span>\n    <<\/span>head<\/span>><\/span>\n        <<\/span>title<\/span>><\/span>Babel + ReactJS Test<\/<\/span>title<\/span>><\/span>\n    <\/<\/span>head<\/span>><\/span>\n    <<\/span>body<\/span>><\/span>\n        <<\/span>div<\/span> id<\/span>=<\/span>\"main\"<\/span>\/><\/span>\n        <<\/span>script<\/span> src<\/span>=<\/span>\"bundle.js\"<\/span>><\/span><\/<\/span>script<\/span>><\/span>\n    <\/<\/span>body<\/span>><\/span>\n<\/<\/span>html<\/span>><\/span>\n<\/pre>\n
We will embed a ReactJS component in the main div above. Now we will create index.js in js folder which will create a ReactJS component and add it to the main div.<\/p>\n
js\/index.js<\/strong><\/p>\n
import<\/span> React from \"<\/span>react<\/span>\"<\/span>;<\/span>\nimport<\/span> ReactDOM from \"<\/span>react-dom<\/span>\"<\/span>;<\/span>\nimport<\/span> MainView from \"<\/span>.\/views\/MainView<\/span>\"<\/span>\n\nvar<\/span> mainView =<\/span> React.<\/span>createElement(<\/span>MainView,<\/span>{<\/span>name:<\/span>\"<\/span>Stranger<\/span>\"<\/span>}<\/span>,<\/span> null<\/span>)<\/span>;<\/span>\nReactDOM.<\/span>render(<\/span>mainView,<\/span> document.<\/span>getElementById(<\/span>\"<\/span>main<\/span>\"<\/span>)<\/span>)<\/span>;<\/span>\n<\/pre>\n
Note that MainView is passed name attribute with “Stranger” value. Let’s now create the ReactJS Component, MainView in views folder.<\/p>\n
views\/MainView.jsx<\/strong><\/p>\n
import<\/span> React from \"<\/span>react<\/span>\"<\/span>;<\/span>\n\nexport<\/span> default<\/span> class<\/span> MainView extends<\/span> React.<\/span>Component {<\/span>\n    constructor<\/span> (<\/span>props)<\/span> {<\/span>\n        super<\/span>(<\/span>props)<\/span>;<\/span>\n        this<\/span>.<\/span>state =<\/span> {<\/span>\n            name :<\/span> props.<\/span>name\n        }<\/span>\n    }<\/span>\n\n    onSetName(<\/span>)<\/span> {<\/span>\n        this<\/span>.<\/span>setState(<\/span>{<\/span>\n            name :<\/span> this<\/span>.<\/span>refs.<\/span>nameTxt.<\/span>value\n        }<\/span>)<\/span>\n    }<\/span>\n\n    render(<\/span>)<\/span> {<\/span>\n        return<\/span> <<\/span>div><\/span>\n            Hello {<\/span>this<\/span>.<\/span>state.<\/span>name}<\/span> !<\/span>\n            <<\/span>br\/<\/span>><\/span>\n            Enter Name :<\/span> <<\/span>input<\/span> type=<\/span>\"<\/span>text<\/span>\"<\/span> ref=<\/span>\"<\/span>nameTxt<\/span>\"<\/span> \/<\/span>><\/span>\n            <<\/span>button type=<\/span>\"<\/span>button<\/span>\"<\/span> onClick=<\/span>{<\/span>this<\/span>.<\/span>onSetName}<\/span>><\/span>Set Name<<\/span>\/<\/span>button><\/span>\n        <<\/span>\/<\/span>div><\/span>\n    }<\/span>\n}<\/span>\n<\/pre>\n
Note that when you write ReactJS component in ES6, you do not override setState method, – you\u00a0create this.state object in the constructor, if you want to initialize the component state. In the above example, we add name to state and initialize it with\u00a0the name attribute\/property passed to the component. Recall that in\u00a0the index.js, we have passed\u00a0name=”Stranger” to the MainView component.<\/p>\n
In the render method we create a greeting string, using name stored in the state and also create a text box and a button to set name. onClick handler of the button is set to onSetName method of the component. So if you type something in the text box and click Set Name button then you would expect greeting to change with the content of the text box. However if you run this example (run gulp and browse to http:\/\/localhost:9001\/index.html) and try to set name, you will see that greeting is not updated with the name. In the JS console you would see following error :<\/p>\n
Uncaught TypeError: Cannot read property ‘setState’ of null<\/span><\/p>\n
The reason is that\u00a0ReactJS component is compiled to a new JS object with method names as keys and method body as values – here the code generated for our MainView component :<\/p>\n
var<\/span> MainView =<\/span> function<\/span> (<\/span>_React$Component)<\/span> {<\/span>\n    _inherits(<\/span>MainView,<\/span> _React$Component)<\/span>;<\/span>\n\n    function<\/span> MainView(<\/span>props)<\/span> {<\/span>\n        _classCallCheck(<\/span>this<\/span>,<\/span> MainView)<\/span>;<\/span>\n\n        var<\/span> _this =<\/span> _possibleConstructorReturn(<\/span>this<\/span>,<\/span> Object<\/span>.<\/span>getPrototypeOf(<\/span>MainView)<\/span>.<\/span>call(<\/span>this<\/span>,<\/span> props)<\/span>)<\/span>;<\/span>\n\n        _this.<\/span>state =<\/span> {<\/span>\n            name:<\/span> props.<\/span>name\n        }<\/span>;<\/span>\n        return<\/span> _this;<\/span>\n    }<\/span>\n\n    _createClass(<\/span>MainView,<\/span> [<\/span>{<\/span>\n        key:<\/span> \"<\/span>onSetName<\/span>\"<\/span>,<\/span>\n        value:<\/span> function<\/span> onSetName(<\/span>)<\/span> {<\/span>\n            this<\/span>.<\/span>setState(<\/span>{<\/span>\n                name:<\/span> this<\/span>.<\/span>refs.<\/span>nameTxt.<\/span>value\n            }<\/span>)<\/span>;<\/span>\n        }<\/span>\n    }<\/span>,<\/span> {<\/span>\n        key:<\/span> \"<\/span>render<\/span>\"<\/span>,<\/span>\n        value:<\/span> function<\/span> render(<\/span>)<\/span> {<\/span>\n            return<\/span> _react2.<\/span>default<\/span>.<\/span>createElement(<\/span>\n                \"<\/span>div<\/span>\"<\/span>,<\/span>\n                null<\/span>,<\/span>\n                \"<\/span>Hello <\/span>\"<\/span>,<\/span>\n                this<\/span>.<\/span>state.<\/span>name,<\/span>\n                \"<\/span> !<\/span>\"<\/span>,<\/span>\n                _react2.<\/span>default<\/span>.<\/span>createElement(<\/span>\"<\/span>br<\/span>\"<\/span>,<\/span> null<\/span>)<\/span>,<\/span>\n                \"<\/span>Enter Name : <\/span>\"<\/span>,<\/span>\n                _react2.<\/span>default<\/span>.<\/span>createElement(<\/span>\"<\/span>input<\/span>\"<\/span>,<\/span> {<\/span> type:<\/span> \"<\/span>text<\/span>\"<\/span>,<\/span> ref:<\/span> \"<\/span>nameTxt<\/span>\"<\/span> }<\/span>)<\/span>,<\/span>\n                _react2.<\/span>default<\/span>.<\/span>createElement(<\/span>\n                    \"<\/span>button<\/span>\"<\/span>,<\/span>\n                    {<\/span> type:<\/span> \"<\/span>button<\/span>\"<\/span>,<\/span> onClick:<\/span> this<\/span>.<\/span>onSetName }<\/span>,<\/span>\n                    \"<\/span>Set Name<\/span>\"<\/span>\n                )<\/span>\n            )<\/span>;<\/span>\n        }<\/span>\n    }<\/span>]<\/span>)<\/span>;<\/span>\n\n    return<\/span> MainView;<\/span>\n}<\/span>(<\/span>_react2.<\/span>default<\/span>.<\/span>Component)<\/span>;<\/span>\n<\/pre>\n
As you can see, setName method becomes value of a field setName in the object passed to _createClass method. ‘this’ scope in this event handler method is n0t the same as ‘this’ scope for the component. If you write ReactJS code in ES5, then the compiler does auto-binding of user defined component methods to the component, but it does not do so when the code is written in ES6. So we need to manually do this auto-binding. One way to do this is to specifically bind user defined methods to the component in the constructor –<\/p>\n
constructor<\/span> (<\/span>props)<\/span> {<\/span>\n        super<\/span>(<\/span>props)<\/span>;<\/span>\n        this<\/span>.<\/span>state =<\/span> {<\/span>\n            name :<\/span> props.<\/span>name\n        }<\/span>\n        this<\/span>.<\/span>onSetName =<\/span> this<\/span>.<\/span>onSetName.<\/span>bind(<\/span>this<\/span>)<\/span>;<\/span>\n    }<\/span>\n<\/pre>\n
But this is not a very good solution, because you will have to do this for all user defined functions in your component.<\/p>\n
Other solution is to use fat arrow, =>, functions\u00a0<\/a>of ES6. When you declare function using fat arrow, the function does not create its own ‘this’ scope, but uses the active ‘this’ scope at that point. So we could write setName event handler in our component as –<\/p>\n
onSetName =<\/span> (<\/span>)<\/span> =<\/span>><\/span> {<\/span>\n        this<\/span>.<\/span>setState(<\/span>{<\/span>\n            name :<\/span> this<\/span>.<\/span>refs.<\/span>nameTxt.<\/span>value\n        }<\/span>)<\/span>\n    }<\/span>\n<\/pre>\n
But this code won’t compile in ES6 (try gulp command to build the application), because ES6 does not support property assignment in classes. This is supported in ES7. The good news is that there is a Babel preset (Stage-0 preset<\/a>) that can translate this code to ES5. So install the preset<\/p>\n
npm install babel-preset-stage-0 --save-dev\n<\/code><\/pre>\n
You also need to add this preset to babelify in the build task to gulpfile.js<\/p>\n
.<\/span>transform(<\/span>babelify.<\/span>configure(<\/span>{<\/span>\n        presets :<\/span> [<\/span>\"<\/span>es2015<\/span>\"<\/span>,<\/span> \"<\/span>react<\/span>\"<\/span>,<\/span> \"<\/span>stage-0<\/span>\"<\/span>]<\/span>\n    }<\/span>)<\/span>)<\/span>\n<\/pre>\n
Remember to remove binding code we added in the constructor, if you are going to use the above Babel preset.<\/p>\n
With stage-0 preset added, our code should compile and run as expected.<\/p>\n
-Ram Kulkarni<\/p>\n","protected":false},"excerpt":{"rendered":"
I wanted to create this post\u00a0shortly\u00a0after the last post about Setting up ES6+Babel+Gulp, but it got delayed for some reasons. Anyways .. Though it is not very complicated to setup ReactJS to work with Babel, there are a few non-obvious things you need to be aware of, specifically the absence of \u00a0auto-binding in ReactJS when\u00a0coded … <\/p>\n
Continue reading “Using ReactJS with Babel and ES6”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[20,1],"tags":[123,127,124,5,128],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p2g9O8-s6","jetpack-related-posts":[],"_links":{"self":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/1742"}],"collection":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/comments?post=1742"}],"version-history":[{"count":0,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/1742\/revisions"}],"wp:attachment":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/media?parent=1742"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/categories?post=1742"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/tags?post=1742"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}