Coming from Angular, you’re intimately familiar with its built-in directives:
ng-class, and all the others that make up a big part of Angular’s appeal.
So if you’ve looked at React, you might’ve noticed that it doesn’t have anything like these. You have to write everything manually. How can you map the Angular directives you know over to React?
In this post we’ll cover how these Angular directives would be written in React (click to jump around):
In React, use the ternary operator (
?) or a logical AND (
&&). The logical AND can cause errors if the variable is not a boolean, so be careful with that one (or just stick with the ternary operator).
React doesn’t provide something like
ng-class, but there is a great library called classnames that does the same and more. Install it:
npm install classnames
Import it however you like:
Then it supports things like this (from their docs):
And use it similarly to
ng-class (also from their docs):
In React, use Array’s built-in
map function to turn an array into elements.
Pay attention to the special
key prop passed to the
li. This is necessary for React’s diffing algorithm to work correctly, and you’ll get warnings in the console if you forget the
You can write it as a “stateless functional component” with a little help from ES6’s destructuring and arrow functions, the syntax is even lighter:
Either way, use it in a component like this:
In React, pass a function to the
Notice how with
ng-click, we pass code to run, whereas with React’s
onClick, we pass the function itself. All of React’s events work this way, and React comes with handlers for all the standard DOM events.
The only difference is that they’re named with camelCase like
onDragEnter instead of the all-lowercase names from HTML (
ondragenter). Check out the React Event System docs for more info.
switch statement. It’s common to extract this into a function to keep the
render function tidy.
In React, use the
style prop, which gets translated into the
style attribute on the actual DOM element.
Alternatively, with the style split out as an object:
A couple things to notice about this:
Double braces are an illusion. Despite the appearance of double braces, this is not special syntax! (This threw me for a loop the first time I saw it).
Look at it as passing an object to the style prop. React lets you pass JS inside single curly braces. Passing an object literal inside those single curly braces results in double curly braces.
CSS properties must be camelCased. React automatically turns camelCased properties like
fontSize into a
font-size that CSS understands.
CSS values can be unitless. Certain properties (like
fontSize) will assume a unit if none is provided. In this case the default is
Vendor prefixes should be Uppercased (except
ms). See the docs.
In Angular, you can respond to changes in an input with
In React, you can do the same with the
onChange event, similar to how we passed a function to
However, there’s a difference, and it’s a big one: when your
onChange handler is called, nothing has been done yet. You type a letter, React tells you about the change, and then its job is done. It’s literally just telling you that a change occurred, and is not updating the input automatically to reflect that change.
So how do you make an input actually, you know, work? You need to update the state, and pass that state back into the input. It’s a feedback loop.
Here’s how that data flow works:
This is probably one of the biggest things to get used to in React – this flow where data goes out and then back in. It seems very counterintuitive at first, and frankly, kind of a pain. Seems like an awful lot of typing to make a simple input control, especially when Angular did all that for you.
However: with great responsibility comes great power.
Want to validate the user’s input before it ever renders at all? You can do that.
Want to force the input to be less than a certain length? You can do that too, and it won’t flicker, because you can truncate the string before calling
Want to make your input look like a credit card number with dashes in between the numbers, and only allow numbers to be entered? Yep.
With Angular you’d need to juggle model values and view values, where small errors cause infinite loops or nothing appears at all.
With React? Just set up the logic in
handleChange, and call
setState with the string that should appear, given the new input value.
You don’t need these anymore! React won’t show flashes of unpopulated content like Angular sometimes does.
This isn’t necessary in React, since components combine the rendering (the “template”) with the logic. In effect, the component is the controller.
Just because the view and the logic are combined, though, doesn’t mean that everything needs to be piled into the
render function. In fact, that’s a bad idea.
Split the logic into methods on your component, and call those methods from
render. This is how you’ll keep the
render function looking more like a nice, readable template and less like a jumble of badly-written PHP :)
I hope this helped clear up some of the differences between Angular’s directives and React’s approach. There’s also a quick reference cheatsheet – put in your email below to grab that.
Learning React can be a struggle -- so many libraries and tools!
My advice? Ignore all of them :)
For a step-by-step approach, read my book Pure React.