Author Archives →

Learn Raw React: Ridiculously Simple Forms

Update August 2018: A newer, more complete introduction to React’s fundamentals is available at my course “React (without the buzzwords)”. It uses the latest version of React, and covers many topics that “Learn Raw React” is missing, including component state, asynchronous data storage, JSX, structure best practices, and more.

“React (without the buzzwords)” is composed of 30 lessons, with 55 live examples and exercises. It lets you save your progress through lessons, and automatically saves your exercise answers so you can pick up where you left off.

React (without the buzzwords) is exclusive to Frontend Armory Pro members. But you can try these 8 free lessons just by clicking one of the links – no signup required:

Of course, the original “Learn Raw React” guide is still useful today! Here it is:

So – you’ve got the hang of React, and you’ve even built a little app. But after making your app look nice, you remember that you also need to make it work. And that’s when you start searching for form libraries.

First you look for tools to structure data and event flow. Then you shift focus to libraries which reduce repetition in form components. And while you’re at it, tools which validate user input would certainly help. Tools like react-forms and formsy-react and flux and redux and RxJS and as one redditor put it:

I’ve been evaluating a few frameworks out there. It’s been the bane of my existence for the past two weeks.

Wasn’t the whole idea that tools would save you time?

Why spend two weeks investigating when you could have implemented the most important part in three minutes? Its not even like you’d have to think that hard; all you have to do is follow this exercise:

Continue reading →

React.js By Example: Interacting with the DOM

This article is based on the code from part 2 of my Learn Raw React series: Ridiculously Simple Forms.

Sometimes, the user’s next action is so obvious that it feels almost rude not to do it for them.

The textbook example is when a form has failed validation after “submit” was pressed, and the user needs to correct their mistake. What you’ll often find is that despite the obviousness of this, the user has to manually click on that field.

This is stupid. If the user liked clicking that much, they’d be playing Diablo.

If there is only one field with an error, and the user has to fix it, then the field should be focused for them. But how do we automatically focus fields with React?

Well, assuming we’ve got a reference to the <input> element’s DOM node, it is as simple as calling the focus() method. Ta-da! But React uses the Virtual DOM, not the real DOM! Help?

Continue reading →

Learn Raw React — no JSX, no Flux, no ES6, no Webpack…

Disclaimer: I love JSX, Flux, ES6 and Webpack. I’ll discuss these tools more in another series.

Update August 2018: A newer, more complete introduction to React’s fundamentals is available at my course “React (without the buzzwords)”. It uses the latest version of React, and covers many topics that “Learn Raw React” is missing, including component state, asynchronous data storage, JSX, structure best practices, and more.

“React (without the buzzwords)” is composed of 30 lessons, with 55 live examples and exercises. It lets you save your progress through lessons, and automatically saves your exercise answers so you can pick up where you left off.

React (without the buzzwords) is exclusive to Frontend Armory Pro members. But you can try these 8 free lessons just by clicking one of the links – no signup required:

Of course, the original “Learn Raw React” guide is still useful today! Here it is:

So you’ve heard all the fuss about React.js – apparently it is the best thing since XMLHttpRequest. But you’ve spent a couple hours investigating, only to find so many buzzwords that it just feels overwhelming. JSX and flux and ES6 and webpack and react-router and all I want is somebody to just tell me how to use React already!

Luckily for you, that’s exactly what this series will do! Don’t believe me? That’s OK – you will after you’ve built your first React app in about 2 minutes time. Without downloading anything. Just by following this exercise:

Continue reading →

Structuring React Applications: Higher-Order Components

Do you ever find yourself frustrated with all the boilerplate and repetitive code in React components? Frequent use of patterns make components long-winded, hard to reason about, and difficult to maintain. And with mixins no longer supported in ES6 components, there is no longer any obvious solution!

This became a problem while writing Memamug. Without mixins, the code gradually evolved a bunch of annoying patterns, including:

  • passing unknown props through to child nodes
  • writing out long CSS class names
  • merging internal callbacks with those specified on props

But there is a solution: Higher-Order Components. And seeing how helpful I’ve found them, it is only natural that I want to spread the word!

Continue reading →

A system for structuring your React application’s styles

Read the full specification at the GitHub repository.

Have you ever experienced the frustration involved in adding styles to your new component, just to find that some other style, somewhere in the same project, is conflicting with yours? Without structure, stylesheets become confusing and unmaintainable:

  • Styles with global scope end up biting you in the ass months down the track
  • Deeply nested selectors confuse you as to what it is they’re actually supposed to do
  • Just finding the various rules across various files which combine to make one component’s style can be a pain in itself

Styling components doesn’t have to be a nightmare

Things have certainly gotten better in recent years. For example, compile-to-CSS languages like LESS and SASS help facilitate separation of concerns, and React itself does a lot to encourage good structure.

However, better tools present a new problem – we can end up spending more time deciding where to put things than actually making them. And what if you make the wrong decisions? While React, LESS and SASS certainly encourage good structure, they definitely don’t enforce it.

While we’ve come a long way, what we still need is a specification – a set of decisions which do the hard design work for us. And as it happens, the Pacomo project does exactly that!

Continue reading →

The Road To 100 Signups

The Road To 100 Signups

This year, I had a fuck this moment. I decided that I want to be able to do something interesting with my life. And with the help of 30×500, I actually started working towards it.

To me, “doing something interesting with my life” means making things people love. In my position, the most immediate way I can achieve this is by writing about the Web – it is the thing I’ve spent the most hours of my life doing, and I care possibly a little too much about making it better.

But enough being serious – the real reason I’m writing this is that 100 signups is the best excuse I’ll get to look back at what went well, what didn’t, and how to improve things. And to show you lots of pretty graphs!

And since it’s that kind of article, I’m going to put the meat before the veggies and start with:

Continue reading →

Building a property passthrough Higher-Order Component for React

Just want the component? Find it at GitHub

Possibly the most frequently re-implemented code across any React component is that used to pass properties through to child components. This stems from the fact that you generally need some sort of input to make the component useful, while you don’t want these component-specific properties polluting the props on your children.

This would be all well and good if it wasn’t for the fact it is so easy to avoid re-implementing this over and over again! I mean, you’re already defining the properties you consume in propTypes – why repeat yourself?

In fact, by passing your React classes through a Higher-Order Component, you can easily add a method which returns all props except the ones specified in propTypes – making writing components that-much-easier (and consistent). I’ll show you how to do it in a moment, but first lets have a look at:

Continue reading →

Unlocking decorators and other ES7 features with Webpack and Babel

Update 2015/11/08: This guide assumes you’re using Babel 5.
For Babel 6, see my new guides to Babel 6 & Webpack, and Babel 6 & NPM.

While Babel has great ES6 support and a few ES7 goodies, some of the most interesting proposals are still locked behind the “stage 0” wall. This is all well and good if you need to build code which you can guarantee will work without compilation in a few years time, but if that was the case, you probably wouldn’t be using any ES7 features at all. So given how curious you obviously are (after all, you’re reading this), let’s go ahead and unlock them.

Continue reading →

A Quick Tour Of ES6 (Or, The Bits You’ll Actually Use)

Just want examples of ES6 in use? I’ve put four ES6 projects on Github.

ES6 has been getting a lot of press lately. And with all of the benefits that the new syntax and built-ins bring, it damn well should. But given the breadth of the changes, how is a forward-thinking developer to know where to start? What is worth practicing now, and what is best left for a rainy day?

Well, after spending the last few weeks writing maxim and memamug with ES6, and translating numbat-ui from coffeescript, there are a few parts which have stood out to me.

Continue reading →

Introducing Memamug, a small open-source app made with React and Rails-api

View the source or see it live

One of the biggest pains I hear from new and old developers alike is that once they’ve learned the basics of a new technology, they struggle to apply them to an actual project.

Actually, this isn’t just a problem I’ve heard about – I’ve experienced it myself. In particular, learning React has been as much about figuring out what to do with it as learning the API itself. So to cut a long story short – I’ve built a single-page app with React and Rails-api. And I’d like to share it with you. And it’s not a todo list!

Memamug is a tiny app to help you remember people you meet. However, putting it together wasn’t a tiny job. It demonstrates a number of patterns and techniques which apply to larger projects, including how to:

Continue reading →