React Week Day 1 Part 1

By nathanharper

Monday, Mar 9, 2015

Let’s start off with the most important development — The first day of React Week began with check-in and a complementary breakfast of waffles, fruit, and endless flowing coffee.

picture

After some orientation, our first speaker was Ryan Florence, one of the lead developers of React Router. Our first lesson was some introductory material on using Webpack to get our React apps up and running. This portion of the talk was mostly just an extremely gratifying affirmation of a lot of the things I learned the hard way integrating Browserify and Webpack into Styleguide, but there were also some cool tricks to learn from the masters. My favorite was the idea of using the Webpack DefinePlugin to replace environment variables in the code.

new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
})

What’s nice about this as opposed to defining something like __DEV__ as that you don’t have to tell your linting or testing suite about this mysterious global, and in fact you can just configure its value in your .env. Simple, but brilliant.

React.createFactory

I generally like to take the time to really read the docs before I dive into a new framework, but there’s inevitably going to be one or two things I miss. React.createFactory is a part of the API that I slept on for a while, but really shouldn’t have. For a while our application was spitting out a lot of warnings about calling React components directly, but we didn’t pay it much heed since we had bigger problems on our plate, and it was just a future deprecation warning. Apparently, fixing the problem is as easy as this.

var React = require('react');

var Component = React.createClass({displayName: 'Component',
  // ...
});

// WRONG: module.exports = Component;
module.exports = React.createFactory(Component); // RIGHT!

In the future, the React team wants you to be able to create classes that do not have any React dependency, which is why it’s been decoupled from the createFactory method, which used to be called automatically in previous versions. For more info, read this.