Use only as directed. One of the big issues I ran into while building Frontend Armory was that right after launching the site, after spending months developing the original course, the React team released a completely new API which was largely incompatible ... more
According to Twitter’s data on me, I signed up sometime in 2010. And for the first 4 or 5 years, I barely posted at all. I never really understood Twitter. What interest could people find in 140 characters anyway? When I started this blog though, I wanted ... more
Companies everywhere are moving to React, and for good reason. It makes building real-world apps a breeze! But React comes with a boatload of buzzwords. Redux and GraphQL and Webpack and JSX and how am I supposed to get anything done when keeping up ... more
The React ecosystem can feel a little overwhelming at times. The countless libraries to keep track of. The ever expanding toolchain. Even the language itself is changing! And the worst thing? The moment that you think you’ve got a grasp on it all, it ... more
So you’re starting a React project. You know what you want to build, and quickly spin up a project with create-react-app. And then you’re confronted with the problem of where . Where do your components go? Where should you put business logic? Where do ... more
Creating forms with React can be a little tricky. Perhaps you decide to use Raw React, and end up repeating the same handler code each time you need a new field. Or maybe you force the non-global form state into a global Redux store. Either way, things ... more
When I ask people what their favorite part of React is, one of the most frequent answers is “Components”. And I agree. React’s component system is magnificent. It lets you split your code into small, single-purpose parts. It lets you work on one part ... more
Lately, I’ve been hearing a lot of people talk about JSX as if it is HTML-in-JS. So let me clear something up: JSX is not HTML-in-JS. The thing about JSX is that it is just a special syntax for writing plain-old JavaScript. Each JSX element compiles ... more
Read the README and browse the source on GitHub, or mess around with the live demo. Markdown is a fantastic tool. It makes writing simple . Markdown documents are plain text, so you don’t need to worry about tags and HTML and all that. You just write. ... more
This is the third article in a series on junctions.js. You can read this without reading the others first. But for your convenience, here is part one and part two. Junctions.js is a router that is based on principles . These principles ensure that Junctions ... more
TL;DR? Junctions is a new, composable alternative to react-router. Get it at the junctions.js website! It was pretty normal day in Tokyo when I received a request from a client. “I’d like this application screen to be a React Component. And I want it ... more
So you’ve decided to build a React app. It has a few screens, so you need a router. And react-router seems pretty popular, so you npm install it and put together a quick demo. Everything seems fine and dandy! Or it did, until you googled for some docs ... more
I don’t know about you, but when I started writing React apps, I struggled to decide where my state should go. No matter how I re-arranged setState calls, things never felt quite right. And maybe that is why I got so excited when I found Redux. Redux ... more
A while back, I received a great question from a reader: Just a note in your Learn React By Itself tutorial. In the “Components” section, where you say: return ( React.createElement('li', {className: 'Contact'}, React.createElement('h2', {className: ... more
Welcome back to the second instalment of State of React! In case you missed it, the first instalment demonstrated a small app without component state. And it received a bunch of interesting responses, like this one from @metapgmr: using props as state ... more
Have you ever wondered how other people write React apps? There are often multiple ways to solve the same problem, but finding the best way doesn’t have to mean implementing each of them yourself! So what I’m trying to say is that if you don’t like learning ... more
So you heard React was fast , and decided to give it a go. You grabbed a boilerplate, started working through it, and noticed shouldComponentUpdate and PureRenderMixin . Some googling reveals these are the things you use to make React fast. But wasn’t ... more
So you’ve heard the commotion about React, and thought you’d take a look. And you’ve liked what you’ve seen! Or you did, until you saw this: <div onClick={this.handleClick}>JSX butters my toast</div> OK. You’re happy to give a new technology ... more
So you’ve got the React basics down, and you’ve decided to put together an app. Given that React runs on both the server side and the client side, it seems that making a Universal (or Isomorphic) app is a no-brainer. Or it did until you’d spend hours ... more
One of my favourite blog posts on the internet is Steven Luscher‘s guest post on the Babel blog, React on ES6+. It manages to be both incredibly helpful and easy to understand, while being short enough that when you hit the end you’re like “wait, is ... more
So you’ve decided to build a React component. You know what it will do, what it’s called, and where it’ll go. But when you open your editor and go to write the first line, you’re confronted with the decision between three different ways to declare it? ... more
TL;DR? Clone the Starter Kit instead. Have you ever wished that libraries for React apps could be simpler ? Sure, you know that there are cases when all the bells and whistles are an advantage — but for you, features aren’t as important as clarity . ... more
Over the last year, Babel has become the go-to tool for transforming ES2015 and JSX into boring old JavaScript. Which makes it kinda hilarious that by default, Babel 6 no longer transforms either: james$ echo "export function component() { return ... more
This guide is the fourth in the Six Recipes for Babel 6 series. If you’re new to Babel 6, start with Six Things You Need To Know About Babel 6. So you’ve written your app, your tests and your libraries in ES6. You’ve gotten so used to the new syntax ... more
This guide is the third in the Six Recipes for Babel 6 series. If you’re new to Babel 6, start with Six Things You Need To Know About Babel 6. So you’ve written a useful little app with ES6, and being the excellent developer that you are, you want to ... more
This guide is the second in the Six Recipes for Babel 6 series. If you’re new to Babel 6, start with Six Things You Need To Know About Babel 6. The Babel CLI is great for compiling ES6 to ES5 on a file-by-file basis. However, when Babel encounters an ... more
Over the last year, Babel has become the go-to tool for transforming ES2015 and JSX into boring old JavaScript. Which makes it kinda hilarious that by default, Babel 6 no longer transforms either: james$ echo "export function component() { return ... more
This guide is the first in the Six Recipes for Babel 6 series. If you’re new to Babel 6, start with Six Things You Need To Know About Babel 6. Even if you write your NPM package with ES2015, it is important that the code you publish is compatible with ... more
Over the last year, Babel has become the go-to tool for transforming ES2015 and JSX into boring old JavaScript. But seemingly overnight, Babel 6 changed everything . The babel package was deprecated, running babel doesn’t actually transform ES2015 to ... more
While the last few years have seen JavaScript turn from a tangle of jQuery into an orderly affair, CSS has been the subject of neglect. While JavaScript has learned new tricks like modularity, components and dependency bundling, most stylesheets are ... more