May 25 2017

React Toolkit

As React advocates, we've used React on a number of client projects, put on a two-day symposium, and frequently share our thoughts on the framework and community here on this blog. Whether you're new to React or using it every day, it's valuable to remain up to date on the latest tools and resources available, so we asked a few of our Mojos to round up their favorite links and resources to share.

React toolkit

Dylan Kirby Developer

Prettier: Prettier is an opinionated JavaScript formatter that transforms your JavaScript code to an AST and pretty prints it. Unlike other linting tools, prettier takes a maximum line length into account, automatically restructuring to not exceed it. We're used to automatic code formatting in languages like Go and Elm, and are now excited that we can do the same with JavaScript.

React Conf 2017: The conference videos for React Conf were recently posted, and are definitely worth checking out. I particularly enjoyed learning about Prettier by James Long, Cheng Lou's talk on Taming the Meta Language, and some exciting new updates from Michael Jackson and Ryan Florence with Learn Once, Route Anywhere.

Cathy Zoller Developer

Immutability Helper: Immutability-helper makes it easy to write immutable updates in React. Although not required by React, using immutable data allows you to increase performance through implemention of a shouldComponentUpdate() method.

React Fiber: React Fiber (React 16) is a backwards compatible re-implementation of React's core algorithm designed to prioritize UI event scheduling. In other words, those interactions which need the fastest feedback (e.g. typing) are given highest rendering priority. Facebook's decision to build scheduling into the library is an opinionated decision, but I believe it's one which will also help to standardize and streamline UX development going forward.

Tim Barmann Developer

Modern React with Redux (\$): This is the best video course I have found to learn the basics of React-Redux. The instructor, Stephen Grider, uses techniques often employed by good teachers, such as repeating key concepts and summarizing each section. He instinctively knows when students will find a particular topic to be confusing, acknowledges that, and promises to explain it in further detail later, which he does.

This is a weather app built in the React-Redux course. This is a weather app built in the React-Redux course.

In the course, which has 17.5 hours of videos, you build 3 small apps using core React and Redux concepts. I liked the fact that the instructor actually wrote the code in the videos - rather than just pasting it in - and talked through the process.

I was also impressed by Mr. Grider's responsiveness to questions. Over the course of a couple weeks, I emailed him two or three times with questions, and he responded promptly.

This course is on As of this writing, the price was listed at $180. But these courses often go on sale for $10 each. Search for Udemy discount codes. This one may work: HSALE10, courtesy of Mr. Grider.

StoryBook: StoryBook is a free library that makes it easier to develop React components. Once installed, it runs separately from your app and can be used to test and demo a component in isolation.

StoryBook example use

For example, let's say you're making a button component. Instead of setting up a fake page in your app, you can use it in StoryBook. And you can set up different instances of your component and StoryBook lets you click between them. You could use that feature to toggle between different states of the button - enabled and disabled - for example.

A nice benefit of using StoryBook is it can serve as a kind of component gallery for your project. If your app has a lot of components, developers can use StoryBook to scan through all the components built by your team without having to find where they might be used within the app itself.

React roundup

In case you missed it, here is a roundup of our favorite React posts, authored by our own Mojos.

Fabric integration for React Native on Android

React and Reflux in 5 minutes

From React to React Native in 5 minutes

React and Redux a la carte

Bonus: Here's the demo starter repo from our React Symposium. This includes a basic React application configured with Webpack, Babel, Mocha, Jade (Pug) and Stylus.

Courtney Fanning