Stay up to date with the latest news on React.
View this email in your browser

The React Newsletter

The Anatomy Of A React Redux App

If you inspect the source of a React Redux app, it could be overwhelming. But there is a method to the madness and it becomes very simple once you understand what’s going on.

To understand it better, we need to install React Developer Tools Chrome extension to Chrome browser and inspect it from within that tool.

Note: This is different from Redux DevTools which is helpful for debugging Redux’ “States” and “Actions” but won’t help to understand the “anatomy”.
Once installed, React Developer tools shows up inside Chrome’s JS Debugger as a tab called “React”. You simply need to open a React application and open this “React” tab to use the tool.

Read more
The Idiot’s Guide to Publishing a React Component to NPM
This was not as trivial as I was hoping it was, but I finally did it. I made a very simple component that I thought was relatively cool and wanted to share it with the world. You can see its effect here in this gif:

Check it out here and leave me a star if you think it’s cool!

So I went looking and found a bunch of articles telling me what to do, but since I used Brunch as a build tool, almost none of them applied to me. I wanted someone to hold my hand and I almost found it.

Enter JedWatson and the generator-react-component. Trust me, this is going to make your life a LOT easier.

Read more
Building Chrome Extensions in React+Redux with GoGuardian
GoGuardian for Teacher's product manager Tyler Shaddix walks us through how the GoGuardian team uses React to build chrome extensions at SoCal React JS.

Watch video
How Airbnb Uses React

React is used by a number of well-known companies with large applications that cater to millions of users, and their code base is being constantly changed by engineers.

A wide range of articles show how to create simple apps like ToDo lists with React, but there aren’t many that show how React is used in production.

This is why I’ve been working on a series of interview articles that will show how React is used in large apps.

In my first article, I had the honor of asking a couple of questions to Leland Richardson, Software Engineer at Airbnb, and the main contributor to their React Testing LibraryEnzyme. Read on to find out why they chose React, how they use it, and what challenges they have encountered in the process.

Read more
React Full Stack Tests and Continuous Delivery Part 1/4: Nightwatch

Plenty of great ink has been spilled over unit testing React components and Redux reducers et al, but we had a lot of difficulty finding meaty posts about settings up proper full-stack integration tests for the modern JS stack.

This is article 1 in a 4-part series:

Our setup was particularly tricky because we have a handful of fully decoupled backend services and two React apps sharing a lot of code. If you’re going down a similar road, hopefully this series saves you a couple steps.

Read more
Leveling Up With React: Container Components

In the first article, we created routes and views. In this tutorial, we’re going to explore a new concept in which components don’t create views, but rather facilitate the ones that do. There is code to follow along with at GitHub, if you like to dive right into code.

We’ll also be introducing data to our application. If you’re familiar with with any sort of component-design or MVC patterns, you probably know that it’s generally considered poor-practice to mix your views with application behavior. In other words, while views need to receive data to render it, they shouldn’t know where the data came from, how it changes, or how to create it.

Read more
My SublimeText-killer Atom setup for developing React apps
TL;DR: VS Code is good for ng2 apps but isn’t good enough for react. Just install Atom (if you haven’t already, open a terminal and run: apm install atom-beautify autoclose-html highlight-selected language-babel react linter linter-eslint minimap minimap-highlight-selected pigments seti-ui monokai-seti

I’ve been a SublimeText fan for a while. There was something about WebStorm that didn’t quite fit my idea of what I was looking for in a text editor and both Atom and, more recently, Visual Studio Code had their own issues.

Time passed and both projects (Atom and VS Code) became mature text editors with active communities eagerly building hundreds of plugins to achieve almost any task you could imagine.

Read more

This post is for those of you with a complex React application. If you're building something smaller, you might not need to focus on performance yet. Don't prematurely optimize! Go build things!

However, if you're building DNA design tools, gel image analysis software, a rich-text editor, or full-feature spreadsheets, you're going to hit performance bottlenecks, and you're going to need to solve them. We hit our fair share of this at Benchling, so this post attempts to share some of what we've learned - it's targeted towards folks out there on the Internet and fellow Benchlings alike. 

Read more

Copyright © 2016 ABL - The Problem Solver, All rights reserved.

unsubscribe from this list    update subscription preferences 

Email Marketing Powered by Mailchimp