Setting up React for ES6 ES2015 with Webpack and Babel

es6-webpack-react-babel

This resource came in quite handy when setting up React in combination with ES6 ES2015, Webpack and Babel.

Installing all the required dependencies:

# Install Webpack
npm install --save-dev webpack

# Install the Babel Loader, for use with Webpack
npm install --save-dev babel-loader

# Install the es2015 and react presets, for use with Babel
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react

The contents of webpack.config.js:

var path = require('path');

module.exports = {
  entry: path.join(__dirname, '../src/scripts/index.js'),
  output: {
    path: path.join(__dirname, '../build/scripts/'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        },
        progress: true
      }
    ]
  },
};

Integrate it as a grunt task using grunt-webpack, or run it directly using webpack-dev-server (install either one using npm i):

$ webpack-dev-server --progress --colors
Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

ReactiveElements: Convert React.js components into Web Components

ReactiveElements

Create your component as you normally would, and then register it on the document using document.registerReact(…)

/* @jsx React.DOM */
MyComponent = React.createClass({
  render: function() {
    console.log(this.props.items); // passed as HTML tag`s argument
    console.log(this.props.children); // original tag children
    return <ul><li>React content</li></ul>;
  }
});

document.registerReact('my-react-component', MyComponent);

You can then use it as follows:

<body>
    <my-react-component items="{window.someArray}"></my-react-component>
</body>

ReactiveElements →
ReactiveElements Demo →

(via)

Sending/Getting messages to/from a React Native Webview

Enter react-native-webview-bridge, a JavaScript bridge between your React Native app and a WebView contained inside it:

var WebViewBridge = require('react-native-webview-bridge');

const injectScript = `
  (function () {
    if (WebViewBridge) {

      WebViewBridge.onMessage = function (message) {
        if (message === "hello from react-native") {
          WebViewBridge.send("got the message inside webview");
        }
      };

      WebViewBridge.send("hello from webview");
    }
  }());
`;

var Example = React.createClass({
  onBridgeMessage: function (message) {
    const { webviewbridge } = this.refs;
    switch (message) {
      case "hello from webview":
        webviewbridge.sendToBridge("hello from react-native");
        break;
      case "got the message inside webview":
        console.log("we have got a message from webview! yeah");
        break;
    }
  },
  render: function() {
    return (
      <View>
      <WebViewBridge
        ref="webviewbridge"
        onBridgeMessage={this.onBridgeMessage}
        javaScriptEnabled={true}
        injectedJavaScript={injectScript}
        source={require('./test.html')}/>
      </View>
    );
  }
});

module.exports = Example;

React Native Webview with Javascript Bridge →

Related: JockeyJS

Facebook: Mobile @Scale London recap

12419742_1708087056131058_1313459180_n

Less than three years ago, engineers from Twitter, LinkedIn, Dropbox, Pinterest, and Facebook — including two from the then brand-new Facebook London office — met at Mobile @Scale in Menlo Park to talk about the challenges of building mobile software at large scale. Last Wednesday, the first Mobile @Scale London showed how far mobile development at scale has come in only a few short years.

Videos of the event are posted on the page. Recommended stuff if titles such as “Scaling iOS @ Google”, “6 lessons learned scaling mobile at SoundCloud”, “Backend-driven native UIs”, “3,000 images per second”, “React Native: Bringing the best of web development to native”, etc. ring a bell.

Mobile @Scale London recap →

Testing React Native Apps on Android and iOS

react-native-apps-twitter

These apps are regular native Android and iOS apps, and basically any test automation frameworks works for them: Robotium, Appium, Calabash, uiautomator, Espresso, Jasmine, UI Automation, TestNG, Frank, KIF and many others! Therefore, you do have a great freedom of choice when you build your apps based on React Native framework.

Contains example scripts for most of the mentioned test suites.

Testing React Native Apps on Android and iOS →

Introduction to React Native

687474703a2f2f692e696d6775722e636f6d2f4a37536379396a6d2e706e673f31 687474703a2f2f692e696d6775722e636f6d2f783737784f45676d2e706e673f31

The React Native project was introduced during the first React conference in January 2015. It allows you to build native mobile applications using the same concepts from React. In this post I am going to explain the main building blocks of React Native through the example of an iOS demo application.

The demo application uses Last.fm as its dataset.

Introduction to React Native →
Example project repository (GitHub) →