Egor Smirnov

Voting for the next series of articles about React

Sun, 19 Jun 2016 00:00:00 +0000

I hope you’ve enjoyed reading 6-part series of articles named “React and ES6” (here is the link).

Initially, I didn’t expect so much interest in such an articles. I am happy that you liked them. Thank you so much for all your feedback and contribution!

Because writing of thorough technical blog posts requires enormous amounts of time, I’ve decided to pick one of 4 various themes around React. And let you decide on what will be next.

So, if you interested in further articles, please vote below. I’ll close the poll in a couple of months and start preparing.

Please let me know in comments if you have any questions or suggestions.

Thank you!

Updated React + ES2015 series to babel 6 and React 15

Sat, 18 Jun 2016 00:00:00 +0000

I’ve finally updated React and ES6 series of blog posts to Babel 6 and React version 15.

Hope you’ve enjoyed reading of the series!

Below are the links to the articles:

React and ES6 - Part 6, React and ES6 Workflow with Webpack

Mon, 11 Apr 2016 00:00:00 +0000

This is the last post of series React and ES2015 in which we are going to explore the usage of React with Webpack.

You could find links to all parts of series below:

React and ES6 - Part 1, Introduction into ES6 and React
React and ES6 - Part 2, React Classes and ES7 Property Initializers
React and ES6 - Part 3, Binding to methods of React class (ES7 included)
React and ES6 - Part 4, React Mixins when using ES6 and React
React and ES6 - Part 5, React and ES6 Workflow with JSPM
React and ES6 - Part 6, React and ES6 Workflow with Webpack

The code corresponding to this article is available at GitHub.

Why Webpack?

Like JSPM, Webpack is the solution for module management of your frontend application.

With Webpack, you are able to fully control all the assets of application in a convenient way.

Why is Webpack so popular? There is number of reasons:

Webpack uses npm as a source of external modules. If you want to add React to your project, just run npm install react. This is an added advantage because you’ll already know how to drop your favourite library into a project.
You could load almost everything, not only JavaScript. Webpack uses concept named loaders for that purpose. Just take a look at this list.
Webpack comes with a powerful ecosystem of developer tools. Things like Hot Module Replacement (more on this later in this article) will change your development workflow dramatically.
There is a lot of Webpack plugins for various types of tasks. In most cases, you could use already existing solutions.
Webpack has nice logo ;)

Getting started

Let’s start adapting our application from previous parts of series.

First, we are going to install initial dev.dependencies:

npm install --save-dev webpack@1.x
npm install --save-dev babel-core 
npm install --save-dev babel-preset-es2015 babel-preset-react babel-preset-stage-0

In the above list, webpack package should be self-explanatory. Babel is used for translating of JavaScript version 2015 (ES2015 or ES6) to JavaScript version 5 (should be already familiar to you if you’ve read other articles in “React and ES6” series). Since babel version 6 you have to install separate package for each additional language feature. These packages are called presets. We install es2015 preset, react preset and stage-0 preset (for things like class properties). For more information about babel 6, you could refer to my another article.

Next, install non-dev dependencies (react and react-dom packages):

npm install --save react react-dom

Now the most important step in any project based on Webpack. Create the file named webpack.config.dev.js in the root folder of your project. This file will be used by Webpack to pack all your JavaScript (in the majority of project it won’t be only JavaScript) files in one bundle (or in multiple bundles if you would like to) that will be loaded into user’s browser.

The contents of our webpack.config.dev.js is as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var path = require('path');
var webpack = require('webpack');

var config = {
    devtool: 'cheap-module-eval-source-map',
    entry: [
        './app.js'
    ],
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/dist/'
    },
    plugins: [
        new webpack.NoErrorsPlugin()
    ]
};

module.exports = config;

Main highlights in the above code:

Line 5. We have a choice between various strategies of enhancing debugging of the application. You could read more about strategy cheap-module-eval-source-map be clicking this link.
Lines 6-8. Here we define that app.js will be the main JavaScript file of an application.
Lines 9-13. This configuration specifies that Webpack will pack all modules under one file bundle.js and place it in dist/ directory.

Webpack loaders

It’s possible to load almost everything into your code with Webpack (take a look at this list). The concept that Webpack uses for that, is called Webpack loaders.

You could specify the file extensions to be associated with particular loader.

In our example, we’ll use babel-loader to produce ES5 JavaScript out of ES2015 / ES6 code. First, we need to install corresponding npm package:

npm install --save-dev babel-loader

Then, adjust the configuration file webpack.config.dev.js by adding new loaders key to the exported object:

var config = {
    ... add the below code as object key ...
    module: {
        loaders: [
            {
                test: /\.js$/,
                loaders: ['babel'],
                exclude: /node_modules/
            }
        ]
    }
};

module.exports = config;

Important to note here is that we don’t allow Webpack to parse files inside node_modules directory by using exclude key. This is just slow and useless.

The finishing move will be adding file called .babelrc to the root of the project:

{
  "presets": ["react", "es2015", "stage-0"]
}

This file configures babel to use react, es2015 and stage-0 presets added previously.

Now, whenever Webpack encounters ie. import CartItem from './cartItem.js', it will load this file and transpile ES6 code inside it to ES5.

Adding Webpack Development Server

In order to run an application, we’ll need to run our files on some server.

Luckily, Webpack eco-system already provides all the needed pieces to get you started. You could use either Webpack Development Server or Webpack Development Middleware for Express.js.

We’ll use the latter one. Advantages include faster serving due to handling files in memory instead of file system and watch mode for live reloading.

Let’s install corresponding npm modules:

npm install --save-dev webpack-dev-middleware express

Next, add file named server.js to the root:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.config.dev');

var port = 3000;
var app = express();
var compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
    noInfo: true,
    publicPath: config.output.publicPath
}));

app.use(require('webpack-hot-middleware')(compiler));

app.get('*', function (req, res) {
    res.sendFile(path.join(__dirname, 'index.html'));
});

app.listen(port, function onAppListening(err) {
    if (err) {
        console.error(err);
    } else {
        console.info('==> 🚧  Webpack development
         server listening on port %s', port);
    }
});

That is typical express.js server which uses Webpack Dev Middleware.

Adding Hot Module Reloading

Webpack Dev Middleware already includes live reloading feature. Whenever you change the code of the file, it reloads the page.

Though, Webpack has some more powerful feature called Hot Module Reloading. It reloads not the entire page, but only the part that was changed. This is handy when you are trying to fix the specific bug revealed after 10 subsequent user actions. You don’t have to manually re-do these 10 user actions when the page is reloaded. Just because only the part of the page (corresponding to your changes) was reloaded.

To have a brief look at Hot Module Reloading feature, watch this video by Dan Abramov.

In order to activate Hot Module Reloading, first install necessary npm packages:

npm install --save-dev webpack-hot-middleware

Then adjust entry and plugins fields in your webpack.config.dev.js:

var config = {
    entry: [
        './app.js',
        'webpack-hot-middleware/client'
    ],
    
    ...
    
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ]
};

module.exports = config;

To further use module reloading specifically for React application there are various ways.

One of the easiest is to install special babel-preset-react-hmre babel preset:

npm install --save-dev babel-preset-react-hmre

And adjust .babelrc file:

{
  "presets": ["react", "es2015", "stage-0"],
  "env": {
    "development": {
      "presets": ["react-hmre"]
    }
  }
}

Now the application is fully prepared for hot reloading :)

Finishing strokes

Grab the following files index.html, app.js and cartItem.js from the repository. There is nothing special inside them, that’s why I am not pasting their code here.

Adjusting package.json

Now it’s time to combine all the previous parts in one working piece of software.

We’ll do it ba adding some scripts into package.json scripts section:

{
  "name": "awesome-application",
  "version": "1.0.0",
  ...
  "scripts": {
    "start": "node server.js"
  },
  ...
}

Running the application

Run npm start (this script just runs server.js which in sequence runs Webpack we’ve setup previously), open up http://localhost:3000 in you browser. You should see the familiar picture:

Now slightly change the render method of cartItem.js and go back to a browser.

The part of the page was reloaded. If you clicked +/- buttons of our application before, then you’ll see that total value is still there. That means that the state of application was preserved.

This is hot module reloading system in action. Very convenient, especially when you’re trying to fix some nasty bug that is revealed after some sequence of actions from the user.

Going to production with Webpack

Right now we are capable of running our own development server with hot module reloading (HMR) enabled.

But what if we want to move to production? No problems, Webpack has a solution for that.

Grab the file webpack.config.prod.js from the repository and drop it into the project. It’s similar to Webpack configuration for development mode, but with following differences:

Hot reloading mode is disabled, just because it’s not needed in production.
JavaScript bundle is compressed by UglifyJs using the corresponding webpack.optimize.UglifyJsPlugin.
Environment variable NODE_ENV is set to production. This is required to suppress warnings coming from React in development mode (and could be potentially used for other purposes).

Next, update scripts section of your package.json file:

{
  ...
  "scripts": {
     "start": "node server.js"
     "clean": "rimraf dist",
     "build:webpack": "NODE_ENV=production webpack --progress --colors --config webpack.config.prod.js",
     "build": "npm run clean && npm run build:webpack",
  },
  ...
}

By now, if you run npm run build, compressed file bundle.js file will be created under dist/ directory. This file is ready for production use.

This is just the start

What we’ve just learned is just scratching the surface of what Webpack is capable of.

Webpack is one of such tools that are easy to start with, but hard to master. Learning of it will pay off later.

Talk at Angular Meetup Berlin #26

Thu, 12 Nov 2015 00:00:00 +0000

Yesterday I gave a talk about AngularJS and ES2015+ at Berlin Angular Meetup #26.

Slides are available here.

Upgrading to Babel 6. Babel 6 for Babelify and WebPack.

Tue, 03 Nov 2015 00:00:00 +0000

The code corresponding to Gulp + Browserify + Babelify + Babel 6 setup is available on the GitHub.

The code corresponding to Webpack + Babel 6 setup is available on the GitHub.

Babel 6

Few days ago Babel 6 was released. Babel 6 helps you to transpile your next-generation JavaScript (ES2015+) code to ES5 Javascript.

If you are not familiar with Babel, there is short info about Babel in my previous article about React and ES2015.

Major changes include improved performance, modularization, the introduction of the system of plugins and presets. You could read more about that new things using this link.

The introduction of plugins / presets results in some additional work with you existing project. But nothing crazy.

In this short article, I am going to provide examples of migration in cases of usage of Babelify and Webpack.

Gulp + Browserify + Babelify + Babel 6

More info about Browserify and Babelify is available in my previous article.

Install latest versions of needed packages npm install --save-dev babelify babel-preset-es2015 babel-preset-react gulp vinyl-source-stream. Compared to Babel 5 new packages here are babel-preset-es2015 and babel-preset-react. If you are not using React, installing babel-preset-react is not necessary.
Your gulpfile.js should look like this:

var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');

gulp.task('build', function () {
    return browserify({entries: './app.jsx', extensions: ['.jsx'], debug: true})
        .transform('babelify', {presets: ['es2015', 'react']})
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('dist'));
});

The part that is changing from Babel 5 here is a call of babelify. Notice how we’ve used presets parameter by passing es2015 and react there.

We are basically done. In the case of using Browserify / Babelify all that you need to do is to add additional npm packages and provide presets additional parameter.

The code corresponding to Gulp + Browserify + Babelify + Babel 6 setup is available on the GitHub.

Webpack + Babel 6

Run npm install babel-loader babel-core babel-preset-es2015 babel-preset-react webpack webpack-dev-server --save-dev. Same as with Babelify we’ve added various Babel presets and additionally webpack itself.
It doesn’t make sense to go through whole webpack config here. You could grab the config from this repository. The interesting part for us is following:

module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel',
                exclude: /node_modules/,
                query: {
                    cacheDirectory: true,
                    presets: ['es2015', 'react']
                }
            }
        ]
    }

Notice how we’ve used presets key here. Very similar to the case of Browserify / Babelify.

So, when you are upgrading your webpack project to Babel 6 don’t forget to install necessary Babel presets / plugins and add these presets / plugins to webpack config.

The code corresponding to Webpack + Babel 6 setup is available on the GitHub.

Babel 6 + ???

In case you are using something else (not Browserify nor Webpack) I basically recommend:

Going to this page.
Selecting tool you are using.
Going to tool’s Github repository and checking the information about Babel 6 (if presented).

Conclusion

As Babel 6 was introduced quite recently, not every tool is upgraded at the moment. Upgrading will take some time. But the most popular tools are already ready to be used with Babel 6.

There are also some bugs, but they are fixed very fast. So I expect that in some weeks we’ll have quite a stable ecosystem around Babel 6.

React and ES6 - Part 5, React and ES6 Workflow with JSPM

Sun, 11 Oct 2015 00:00:00 +0000

This is the 5th post of series in which we are going to explore the usage of React with JSPM.

You could find links to all parts of series below:

React and ES6 - Part 1, Introduction into ES6 and React
React and ES6 - Part 2, React Classes and ES7 Property Initializers
React and ES6 - Part 3, Binding to methods of React class (ES7 included)
React and ES6 - Part 4, React Mixins when using ES6 and React
React and ES6 - Part 5, React and ES6 Workflow with JSPM
React and ES6 - Part 6, React and ES6 Workflow with Webpack

The code corresponding to this article is available at GitHub.

Update from 18.06.2016: Fixed the JSPM version because of the problem found by Mahdi (refer to a comments below the article). Thanks!

What is JSPM?

Nowadays to start a new frontend project we as developers have to do too many actions before writing any line of code. You have to think what JavaScript module loader system you are going to use, prepare gulp / grunt / npm / whatever script to prepare assets for production, you have to select CSS pre-processing tool, you have to think about sourcemaps integration and a lot of other things.

What if we don’t want to mess with all that and want to start coding in 15 minutes? We just want to have a tool which will allow this.

One of such a tools is JSPM (JavaScript Package Manager).

JSPM allows you to load JavaScript modules in different formats (ES6, CommonJS, AMD and global ).
It allows you to install dependencies from different registries - npm or github.
JSPM has ES6+ support out of the box.
You are able to load CSS / images / fonts / other formats of files without additional hassle. That is possible with a help of plugins (described later in this article).
JSPM makes it easy to prepare your files for production use.

In this post, we will re-create project from previous posts, but using JSPM.

I would also recommend you to go through JSPM wiki.

Initial setup our JSPM + React project

First of all run this command:

install -g jspm@0.16.12

update from 18.06.2016 we have to fixate the version because of some further problems with newer version of JSPM. Please refer to Mahdi in a comments below the article.

This will install JSPM as a global npm module. After that, it would be possible to use jspm command from any place in your system.

Next, go to your project directory and run jspm init and provide default answers for all prompts. The output in your terminal should look like this:

Package.json file does not exist, create it? [yes]:
Would you like jspm to prefix the jspm package.json properties under jspm? [yes]:
Enter server baseURL (public folder path) [./]:
Enter jspm packages folder [./jspm_packages]:
Enter config file path [./config.js]:
Configuration file config.js doesn't exist, create it? [yes]:
Enter client baseURL (public folder URL) [/]:
Do you wish to use a transpiler? [yes]:
Which ES6 transpiler would you like to use, Babel, TypeScript or Traceur? [babel]:

You will have to wait while JSPM is doing its own magic. It will download all the initial dependencies needed (like babel etc.) and place them to the folder named jspm_packages (I advise you to add this folder in .gitignore).

jspm_packages folder is used by JSPM for storing and managing packages like jQuery / React / AngularJS etc. which you eventually would use inside your project. Looks like already familiar node_modules and bower_components , isn’t it?

But there is a big difference in the case of jspm_packages folder. It is used by JSPM to store dependencies from multiple sources (from Github / npm / bower). What’s even nicer - inside your code you are able to treat all the dependencies as identical not dependable whether it’s coming from npm or Github repository.

Install needed dependencies

Next thing that will be produced after running jspm init is a file named config.js.

First of all, config.js provides configuration for versions of dependencies we install. Additionally, you are able to rename your packages to the name you like the most.

Let’s understand what I mean by all that. Run this command:

jspm install npm:jspm-loader-jsx

If you’ll take a look at config.js now you should see excerpt like below:

map: {
    ...
    "jspm-loader-jsx": "npm:jspm-loader-jsx@0.0.7"
    ...
}

Now it’s possible to use this module inside the code by its name jspm-loader-jsx. Let’s say we don’t like this name and would like to reference it as jsx inside our code.

Run following commands:

jspm uninstall jspm-loader-jsx
jspm install jsx=npm:jspm-loader-jsx

Our plugin will be now referenced as jsx and you could include it into your code by import jsx (though we don’t need to do that as this package is JSPM plugin). By the way, the package we’ve just installed will be needed for our project (JSPM doesn’t support loading of JSX files by default). So don’t delete jspm-loader-jsx package :)

Let’s install other packages we are going to use:

jspm install react react-dom

We haven’t used npm: or github: prefix here because JSPM has the registry of commonly used packages. It’s located here and you could always add a package to the list by opening a new PR.

If you want to dive deeper I recommend reading this JSPM wiki article.

Tweaking config.js

Inside config.js find key named babelOptions and replace it with following lines:

babelOptions: {
    "stage": 0,
    "optional": [
      "runtime",
      "optimisation.modules.system"
    ]
  }

This is needed to make Babel (which is one of default JSPM packages installed into jspm_packages) support all the experimental features like class properties.

Finishing project structure

Now it’s time to code something. I won’t copy their source code as it’s very similar to what we’ve written in previous parts of series.

Create a file named app.jsx with content copied from this location. Next, create file cartItem.jsx and copy it from here. I hope that you are already familiar with contents of that files. It should be like so if you’ve read previous posts from this series.

Grab the contents of index.html. Following is the interesting part for us:

<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
    System.import('app.jsx!');
</script>

Dynamic module loading in JSPM is made possible via library called SystemJS. It’s developed by Guy Bedford who is an author of both JSPM and SystemJS.

On the first line, we include SystemJS, on the second one we include config.js that is created by JSPM. By writing System.import('app.jsx!'); (*) we load entry point script app.jsx which then loads everything else.

We are basically done. Now open index.html in your browser. You should see image like below:

(*) Notice the ! sign in app.jsx!. This is a convention used in JSPM for loading non-JavaScript files.

Additional features of JSPM

What we’ve covered in this article is not all the features of JSPM.

Below are notable features I would like to highlight:

Universal JavaScript module loading via JSPM

JSPM supports different formats of modules. So it’s absolutely legal to load some require.js module along with ES6 class in the same file.

Read more info about module loaders available in JSPM.

Loading of text files, CSS, and other assets via JSPM

It’s possible to load not only JavaScript files, but also other formats. That is made possible via JSPM plugins.

For example, run this command:

jspm install css

After that it’ll be possible to use this piece of code directly inside JavaScript:

import './some/style.css!';

Building for production

You could concatenate & minify your source code with JSPM without using additional tools.

Run the following command from application directory:

jspm bundle-sfx app.jsx! app.js --skip-source-maps --minify

And you will have single minified file with all modules / dependencies included.

React and ES6 - Part 4, React Mixins when using ES6 and React

Wed, 30 Sep 2015 00:00:00 +0000

This is the 4th post of series in which we are going to explore the usage of React with ECMAScript6 and ECMAScript7.

You could find links to all parts of series below:

React and ES6 - Part 1, Introduction into ES6 and React
React and ES6 - Part 2, React Classes and ES7 Property Initializers
React and ES6 - Part 3, Binding to methods of React class (ES7 included)
React and ES6 - Part 4, React Mixins when using ES6 and React
React and ES6 - Part 5, React and ES6 Workflow with JSPM
React and ES6 - Part 6, React and ES6 Workflow with Webpack

Code corresponding to this article is available at GitHub.

Update from 18.06.2016: Updated the code and text to use React 15 and Babel 6.

When using React.createClass() you have a possibility to use so-called mixins. They allow you to mix some additional functionality into your React components. This concept is not unique for React, it also exists in vanilla JS and other languages / frameworks.

It’s no longer possible to use React mixin mechanism for components written in ES6. I won’t dive into the reasons of such a decision (a lot around this topic was written before me). If you are interested, you could check links below for more information around this:

Instead, we are going to concentrate more on concrete examples.

Higher-Order Components instead of Mixins

We will work with CartItem component from part 2 of this series of articles. You could grab its code from here.

Let’s say that along with other controls we would like to show timer with increasing number each second.

To better illustrate the approach, we won’t change the code of CartItem. Instead, we are going to provide some component that will wrap original CartItem and “enhance” CartItem with additional functionality. Such a component is called Higher-Order Component.

This might sound cryptic, but it should become clearer while moving along.

P.S. By “enhancing” I mean simply wrapping component in some function.

Let’s imagine we have IntervalEnhance component:

import React from 'react';
import { IntervalEnhance } from "./intervalEnhance";

class CartItem extends React.Component {
    // component code here
}

export default IntervalEnhance(CartItem);

Now it’s time to write this intervalEnhance component. We’ll add new file called intervalEnhance.jsx:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import React from 'react';

export var IntervalEnhance = ComposedComponent => class extends React.Component {

    static displayName = 'ComponentEnhancedWithIntervalHOC';

    constructor(props) {
        super(props);
        this.state = {
            seconds: 0
        };
    }

    componentDidMount() {
        this.interval = setInterval(this.tick.bind(this), 1000);
    }

    componentWillUnmount() {
        clearInterval(this.interval);
    }

    tick() {
        this.setState({
            seconds: this.state.seconds + 1000
        });
    }

    render() {
        return <ComposedComponent {...this.props} {...this.state} />;
    }
};

Let’s take a closer look.

Line 3. Part ComposedComponent => class extends React.Component - this is the same as defining the function that returns class. ComposedComponent is component we want to “enhance” (in the code above it is CartItem). By using export var IntervalEnhance we are able to export the whole function as IntervalEnhance (refer to CartItem code above).
Line 5. Helpful for debugging. The component will be named as ComponentEnhancedWithIntervalHOC in React DevTools.
Lines 7-12. We initialize the state of a component with seconds equal to zero.
Lines 14-26. Providing lifecycle hooks that will start and stop interval for this component.
Line 29. Most interesting thing here. This line will bring all state / props of our “enhancer” component and transfer to CartItem component. By doing this CartItem will get access to this.state.seconds property.

Last our step is to change render method of CartItem component. We’ll output this.state.seconds directly to the view:

import React from 'react';
import { IntervalEnhance } from "./intervalEnhance";

class CartItem extends React.Component {
    // component code here
    
    render() {
        return <article className="row large-4">
                <!-- some other tags here -->                    
                <p className="large-12 column">
                    <strong>Time elapsed for interval: </strong>
                    {this.props.seconds} ms
                </p>    
            </article>;
        }
}
export default IntervalEnhance(CartItem);

Open the page in a browser and you will see label ticking each second:

Notice - all this is done without touching CartItem component (apart from render method)! This is why Higher-Order Components are so powerful.

Now, please take a look at the final code. If something is unclear I am glad to see your feedback in comments.

Use ES7 Decorators instead of Mixins

If you like ES7 Decorators more then it’s possible to use them in a similar manner.

First, install babel-plugin-transform-decorators-legacy:

npm install --save-dev babel-plugin-transform-decorators-legacy

And grab modified gulpfile.js from the GitHub repository.

Then:

import React from 'react';
import { IntervalEnhance } from "./intervalEnhance";

@IntervalEnhance
export default class CartItem extends React.Component {
    // component code here
}

What about PureRenderMixin?

If you use mixins like PureRenderMixin then there are different approaches bringing such a functionality to React components written in ES6. One of them is following (all credits go to @aputinski at this gist):

class Foo extends React.Component {
   constructor(props) {
     super(props);
     this.shouldComponentUpdate = React.addons.PureRenderMixin.shouldComponentUpdate.bind(this);
   }
   render () {
     return <div>Helllo</div>
   }
 }

Conclusion

Higher-Order Components are powerful and expressive. Currently, they are widely used and are a replacement for old mixin syntax. Feel free to create your own mechanism for dealing with mixing functionality between components.

One of the examples of its usage is Relay framework. Relay is complete React-based framework released by Facebook. Each component your write could be wrapped into Relay Container for automatic retrieval of data dependencies (and many other things). And this is truly convenient and seems like a magic from the first look.

Next two articles would be about a bit different topic - integrating of our project with JSPM or Webpack.

This should bring not only ES6 support but a bunch of other helpful utilities. Stay tuned!

React and ES6 - Part 3, Binding to methods of React class (ES7 included)

Sun, 16 Aug 2015 00:00:00 +0000

This is the third post of series in which we are going to explore the usage of React with ECMAScript6 and ECMAScript7.

You could find links to all parts of series below:

React and ES6 - Part 1, Introduction into ES6 and React
React and ES6 - Part 2, React Classes and ES7 Property Initializers
React and ES6 - Part 3, Binding to methods of React class (ES7 included)
React and ES6 - Part 4, React Mixins when using ES6 and React
React and ES6 - Part 5, React and ES6 Workflow with JSPM
React and ES6 - Part 6, React and ES6 Workflow with Webpack

The code corresponding to this article is available at GitHub.

Update from 18.06.2016: Updated the code and text to use React 15 and Babel 6.

If you look at paragraph “CartItem render method” of the previous article in the series you might be confused by the usage of {this.increaseQty.bind(this)}.

If we try the same example with just {this.increaseQty} we’ll see Uncaught TypeError: Cannot read property 'setState' of undefined in browser console:

This is because when we call a function in that way binding to this is not a class itself, it’s undefined. It’s default JavaScript behavior and is quite expected. In opposite to this, in case you use React.createClass() all the methods are autobinded to the instance of an object. Which might be counter-intuitive for some developers.

No autobinding was the decision of React team when they implemented support of ES6 classes for React components. You could find out more about reasons for doing so in this blog post.

Let’s now see various ways of how to call class methods from your JSX in case you use ES6 classes. All the different methods we consider here are available at this GitHub repository.

Method 1. Using of Function.prototype.bind().

We’ve already seen this:

export default class CartItem extends React.Component {
    render() {
        <button onClick={this.increaseQty.bind(this)} className="button success">+</button>
    }
}

As any method of ES6 class is plain JavaScript function it inherits bind() from Function prototype. So now when we call increaseQty() inside JSX, this will point to our class instance. You could read more about Function.prototype.bind() in this MDN article.

Method 2. Using function defined in constructor.

This method is a mix of the previous one with usage of class constructor function:

export default class CartItem extends React.Component {
    
    constructor(props) {
        super(props);
        this.increaseQty = this.increaseQty.bind(this);
    }

    render() {
        <button onClick={this.increaseQty} className="button success">+</button>
    }
}

You don’t have to use bind() inside your JSX anymore, but this comes with the cost of increasing the size of constructor code.

Method 3. Using fat arrow function and constructor.

ES6 fat arrow functions preserve this context when they are called. We could use this feature and redefine increaseQty() inside constructor in the following way:

export default class CartItem extends React.Component {
    
    constructor(props) {
        super(props);
        this._increaseQty = () => this.increaseQty();
    }

    render() {
        <button onClick={_this.increaseQty} className="button success">+</button>
    }
}

Method 4. Using fat arrow function and ES2015+ class properties.

Additionally, you could use fat arrow function in combination with experimental ES2015+ class properties syntax:

export default class CartItem extends React.Component {
      
    increaseQty = () => this.increaseQty();

    render() {
        <button onClick={this.increaseQty} className="button success">+</button>
    }
}

So, instead of defining our class method in a constructor as in method number 3, we use property initializer.

Warning: Class properties are not yet part of current JavaScript standard. But your are free to use them in Babel using corresponding experimental flag (stage 0 in our case). Your could read more about how to do this in Babel documentation.

We’ve already switched to stage 0 in React and ES6 - Part 2, React Classes and ES7 Property Initializers, so this is not an issue for our example.

Method 5. Using ES2015+ function bind syntax.

Quite recently Babel introduced syntactic sugar for Function.prototype.bind() with the usage of ::. I won’t go into details of how it works here. Other guys already have done the pretty good explanation. You could refer to this official Babel blog post for more details.

Below is code with usage of ES2015+ function bind syntax:

export default class CartItem extends React.Component {
    
    constructor(props) {
        super(props);
        this.increaseQty = ::this.increaseQty;
        // line above is an equivalent to this.increaseQty = this.increaseQty.bind(this);
    }

    render() {
        <button onClick={this.increaseQty} className="button success">+</button>
    }
}

Again, this feature is highly experimental. Use it at your own risk.

Method 6. Using ES2015+ Function Bind Syntax in-place.

You also have a possibility to use ES2015+ function bind syntax directly in your JSX without touching constructor. It will look like:

export default class CartItem extends React.Component {
    render() {
        <button onClick={::this.increaseQty} className="button success">+</button>
    }
}

Very concise, the only drawback is that this function will be re-created on each subsequent render of the component. This is not optimal. What is more important that will cause problems if you use something like PureRenderMixin (or its equivalent for ES2015 classes).

Conclusion

In this article, we’ve discovered various possibilities of binding class methods of React components. I’ve prepared test project based on code from part 2 of this series. It’s available here.

Next time we’ll see what is the state of React mixins for ES2015 classes.

React and ES6 - Part 2, React Classes and ES7 Property Initializers

Sun, 14 Jun 2015 00:00:00 +0000

This is the second post of series in which we are going to explore the usage of React with ECMAScript6.

You could find links to all parts of series below:

React and ES6 - Part 1, Introduction into ES6 and React
React and ES6 - React and ES6 - Part 2, React Classes and ES7 Property Initializers
React and ES6 - Part 3, Binding to methods of React class (ES7 included)
React and ES6 - Part 4, React Mixins when using ES6 and React
React and ES6 - Part 5, React and ES6 Workflow with JSPM
React and ES6 - Part 6, React and ES6 Workflow with Webpack

The code corresponding to this article is available on the GitHub.

Update from 14.06.2016: Updated the code and text to use React 15 and Babel 6.

In the first article, we started with an introduction into ES6 and creating static React component outputting “Hello from ES6”. Not so exciting :)

In this article, we are going to create a bit more sophisticated React component named CartItem. It will output information about some product in the cart including image, title and price. Additionally, a user could interact with CartItem component by increasing or decreasing a number of items. Our component will respond to this interaction by changing a total price.

This is what we’ll see in the end:

Creation of index.html file

Let’s start with the creation of simple HTML file that will be our HTML template file.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>React and ES6 Part 2</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css">
</head>
<body>
<div class="root"></div>
<script src="dist/bundle.js"></script>
</body>
</html>

Notice we’ve added Foundation CSS framework served via CDN. It was done just for the prettier look of our micro application. Also div.root will be the place where we will mount React application.

Gulpfile.js

Just copy and paste gulpfile.js from the previous part of series. No changes to it by now.

Same copy & pasting for package.json.

Next, run npm install (to install node dependencies) and then gulp. Gulp will continuously watch for your changes.

Main application React Component

Create app.jsx:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React from 'react';
import ReactDOM from 'react-dom';
import CartItem from './cartItem';

const order = {
    title: 'Fresh fruits package',
    image: 'http://images.all-free-download.com/images/graphiclarge/citrus_fruit_184416.jpg',
    initialQty: 3,
    price: 8
};

ReactDOM.render(
    <CartItem title={order.title} 
              image={order.image} 
              initialQty={order.initialQty}
              price={order.price}/>,
    document.querySelector('.root')
);

What’s going on here:

Lines 1-2. We import React / ReactDOM libraries.
Line 3. Import CartItem React component that we’ll create later.
Lines 5-10. Sending props to CartItem component (props include item title, image, initial quantity and price).
Lines 12-18. Mounting CartItem component to DOM element specified by its CSS class .root.

CartItem React Component skeleton

Now it’s time to create component responsible for displaying item’s data and also for interaction with a user.

Add this code to file named cartItem.jsx:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import React from 'react';

export default class CartItem extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            qty: props.initialQty,
            total: 0
        };
    }
    componentWillMount() {
        this.recalculateTotal();
    }
    increaseQty() {
        this.setState({qty: this.state.qty + 1}, this.recalculateTotal);
    }
    decreaseQty() {
        let newQty = this.state.qty > 0 ? this.state.qty - 1 : 0;
        this.setState({qty: newQty}, this.recalculateTotal);
    }
    recalculateTotal() {
        this.setState({total: this.state.qty * this.props.price});
    }
}

Explanation:

Lines 4-10. This is the constructor of newly added React class. The first thing to note here is call to super(props) which is required. Another thing - instead of using React getInitialState() lifecycle method, React team recommends to use instance property called this.state. We initialize our state with props sent from app.jsx file. Personally, I like this improvement.
Lines 11-13. Declaration of componentWillMount() lifecycle method (which is eventually just CartItem class method). Inside this method, we do a recalculation of the total price. To calculate total price we use recalculateTotal() which multiplies quantity (which is state of our component) by price (which is props).
Lines 14-20. These are methods for increasing or decreasing the amount of items by a user. These methods will be called when user clicks corresponding buttons in the view (refer to the screenshot of the application at the beginning of post). Also notice that we are using second callback parameter of this.setState() method to recalculate the total price.

CartItem render method

Add this new method inside CartItem class:

export default class CartItem extends React.Component {

    // previous code we wrote here
    
    render() {
        return <article className="row large-4">
            <figure className="text-center">
                <p>
                    <img src={this.props.image}/>
                </p>
                <figcaption>
                    <h2>{this.props.title}</h2>
                </figcaption>
            </figure>
            <p className="large-4 column"><strong>Quantity: {this.state.qty}</strong></p>

            <p className="large-4 column">
                <button onClick={this.increaseQty.bind(this)} className="button success">+</button>
                <button onClick={this.decreaseQty.bind(this)} className="button alert">-</button>
            </p>

            <p className="large-4 column"><strong>Price per item:</strong> ${this.props.price}</p>

            <h3 className="large-12 column text-center">
                Total: ${this.state.total}
            </h3>

        </article>;
    }
}

Here we just output tags using JSX + component state and apply some Foundation CSS beauty.

Don’t worry about {this.increaseQty.bind(this)} - I am going to cover this in the next part of series. For now just believe me that this line will call increaseQty() method of CartItem class.

So, now we have pretty simple application interacting with a user. Even this example is simple, it showed us how to write React components using ECMAScript6. Personally I like the new syntax that ES6 brings to us.

We are not done yet. Before finishing the article, I would like to take a look at a couple of additional ES6 features.

Default Props and Prop Types for ES6 React classes

Imagine we want to add some validation and default values for CartItem component.

Luckily, this is built-in into React and called Default Props and Prop Types. You could familiarize yourself with both of them here.

Right after CartItem class add these lines:

1
2
3
4
5
6
7
8
9
10
CartItem.propTypes = {
    title: React.PropTypes.string.isRequired,
    price: React.PropTypes.number.isRequired,
    initialQty: React.PropTypes.number
};
CartItem.defaultProps = {
    title: 'Undefined Product',
    price: 100,
    initialQty: 0
};

As a result, if you now send numeric title prop inside app.jsx you’ll have a warning in console. This is the power of React props validation.

Bringing ES7 into the project

You could ask a very reasonable question - why do you have ES7 in heading above if even ES6 is not yet finalized?

I will answer that let’s look into the future. And start using non-breaking features like property initializers or decorators.

Even if ES7 is still in the very early stage, there is number of proposed features that are already implemented in Babel. And these experimental features are transpiled to valid ES5 code from ES7. Awesome!

First, install the missing npm module by running npm install --save-dev babel-preset-stage-0.

Next, in order to bring that additional syntax sugar to our project, we’ll need to make the very small change on line 8 of gulpfile.js. Substitute this line with the code below:

     .transform('babelify', {presets: ['react', 'es2015', 'stage-0']})

You could grab final gulpfile.js from GitHub repository

ES7 Property Initialiazers for Default Props and Prop Types of React component

Inside CartItem class add this right above constructor:

export default class CartItem extends React.Component {
    static propTypes = {
        title: React.PropTypes.string.isRequired,
        price: React.PropTypes.number.isRequired,
        initialQty: React.PropTypes.number
    };    
    static defaultProps = {
        title: 'Undefined Product',
        price: 100,
        initialQty: 0
    };
    
    constructor() {
        ...
    }
    
    // .. all other code
}

This is doing the same thing as code after the class definition, just in a bit more neatly way (in my opinion). You could also delete code related to propTypes / defaultProps that goes after CartItem class definition as it is not needed anymore.

ES7 Property Initialiazers for initial state of React component

The finishing step will be transferring initial state from the constructor to property initializer.

Add this right before constructor of CartItem class:

export default class CartItem extends React.Component {
    // .. some code here
    state = {
        qty: this.props.initialQty,
        total: 0
    };
    // .. constructor starts here

You could also delete code related to initializing of state from the constructor.

Done. You could check out final cartItem.jsx for this part on the series on the GitHub.

Conclusion

In this part, we familiarized ourselves with writing React components using ES6 classes and introduced ES7 property initializers.

Stay tuned for the next parts of React + ES6 series!

Browserify, Babelify and ES6

Mon, 25 May 2015 00:00:00 +0000

This post is connected with React and ES6 - Part 1, Introduction into ES6 and React. It explains the usage of node.js modules described in this article.

This post briefly describes the purpose of 3 npm modules - Browserify, Babel and Babelify.

Example gulpfile.js

Let’s assume we have the following gulpfile.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');

gulp.task('build', function () {
    return browserify({entries: './app.jsx', extensions: ['.jsx'], debug: true})
        .transform(babelify)
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('dist'));
});

gulp.task('watch', ['build'], function () {
    gulp.watch('*.jsx', ['build']);
});

gulp.task('default', ['watch']);

You could notice we are using Browserify and Babelify here. Let’s dive a bit into them.

Browserify

Browserify lets you require(‘modules’) in the browser by bundling up all of your dependencies. Source: http://browserify.org/

To quickly grasp what Browserify does, let’s examine the simple example.

Say, we have multiply.js file with the following content:

module.exports = function multiply(a, b) {
  return a * b;
}

And app.js:

var multiply = require('./multiply');
console.log(multiply(2, 3)); // => 2 * 3 = 6

See this require('./multiply') statement? You used function from multiply.js file inside your app.js. Without adding <script> tag!

The aim of Browserify is to make it possible to run the code above in browser.

How Browserify does this magic is out of the scope of this article. If you are interested, I would suggest going through various resources about Browserify here.

Browserify + Babel

Ok, let’s assume we now understand what Browserify does. But how Browserify relates to ECMAScript6?

It turns out that ES6 introduces long-awaited module support (learn more). Usage of modules leads to better-structured code and eliminates issues with the globally defined state.

Let’s see how above two files might look using ES6 modules.

multiply.js

export default function multiply(a, b) {
  return a * b;
}

app.js

import {multiply} from 'multiply';
console.log(multiply(2, 3)); // => 2 * 3 = 6

Nowadays, such a syntax is not supported by browsers out of the box. To tackle this problem, a lot of different solution were proposed.

One of these solutions is using of Babel in conjunction with Browserify. Behind the scenes, Babel will transform our code to ECMAScript 5:

multiply.js

.. some was thrown away for brevity ..

exports["default"] = multiply;
function multiply(a, b) {
  return a * b;
}
module.exports = exports["default"];

app.js

var _multiply = require('multiply');
console.log((0, _multiply.multiply)(2, 3)); // => 2 * 3 = 6

You could notice that Babel added require statements in the resulting code. Later, these require statements will be handled by Browserify.

Please note, that using of Browserify is not the only option - you could use a number of tools like JSPM, System.js, Webpack, require.js etc. Moreover, Babel currently supports a lot of different module loaders - learn more here.

Babelify

Browserify supports so-called transforms. These transforms will be executed for your code prior to running Browserify. It allows pre-processing of code before sending it to Browserify opening a lot of possibilities for developers.

There is a big list of various Browserify transforms. We are going to use babelify in order to transform our ES6 code to ES5 version. This ES5 version (with require statements) will be processed by Browserify later.

To sum up, our code transformation looks like following:

We write code using ECMAScript6 capabilities including (but not limited to) ES6 module loading.
Babelify translates this code to ES5-compatible code with require statements included.
ES5 code with require statements is transformed to the version that is fully understandable by browsers by Browserify.

Egor Smirnov

Voting for the next series of articles about React

Updated React + ES2015 series to babel 6 and React 15

React and ES6 - Part 6, React and ES6 Workflow with Webpack

Why Webpack?

Getting started

Webpack loaders

Adding Webpack Development Server

Adding Hot Module Reloading

Finishing strokes

Adjusting package.json

Running the application

Going to production with Webpack

This is just the start

Further Reading

Talk at Angular Meetup Berlin #26

Upgrading to Babel 6. Babel 6 for Babelify and WebPack.

Babel 6

Gulp + Browserify + Babelify + Babel 6

Webpack + Babel 6

Babel 6 + ???

Conclusion

Further Reading

React and ES6 - Part 5, React and ES6 Workflow with JSPM

What is JSPM?

Initial setup our JSPM + React project

Install needed dependencies

Tweaking config.js

Finishing project structure

Additional features of JSPM

Universal JavaScript module loading via JSPM

Loading of text files, CSS, and other assets via JSPM

Building for production

Further Reading

React and ES6 - Part 4, React Mixins when using ES6 and React

Higher-Order Components instead of Mixins

Use ES7 Decorators instead of Mixins

What about PureRenderMixin?

Conclusion

Further Reading

React and ES6 - Part 3, Binding to methods of React class (ES7 included)

Method 1. Using of Function.prototype.bind().

Method 2. Using function defined in constructor.

Method 3. Using fat arrow function and constructor.

Method 4. Using fat arrow function and ES2015+ class properties.

Method 5. Using ES2015+ function bind syntax.

Method 6. Using ES2015+ Function Bind Syntax in-place.

Conclusion

Further Reading

React and ES6 - Part 2, React Classes and ES7 Property Initializers

Creation of index.html file

Gulpfile.js

Main application React Component

CartItem React Component skeleton

CartItem render method

Default Props and Prop Types for ES6 React classes

Bringing ES7 into the project

ES7 Property Initialiazers for Default Props and Prop Types of React component

ES7 Property Initialiazers for initial state of React component

Conclusion

Further Reading

Browserify, Babelify and ES6

Example gulpfile.js

Browserify

Browserify + Babel

Babelify