My thoughts on React

I’ve been playing with React for some time now. React is:

“A JavaScript library for building user interfaces”.

Unlike other libraries something about React just clicked with me. Back in October a client project came along that presented a golden opportunity to develop a web app. I decided to use React, and I now consider myself comfortable in its ecosystem.

Below this huge logo are some of my thoughts on React.

the React logo

React has its own JSX syntax for writing components. JSX tightly couples HTML with JavaScript in a readable fashion. It does not adhere to a ‘separation of concerns’ in that regard. Rather, it fully embraces the alternative.

This isn’t a React tutorial but here are two contrived examples that hopefully illustrate my thoughts later. I present a simple button and toolbar:

const Button = props => {
  return (
    <button className="button" onClick={props.onClick}>{props.label}</button>
  );
};
const Toolbar = props => {
  return (
    <nav className="toolbar">
      <Button onClick={props.undo} label="Undo"/>
      <Button onClick={props.redo} label="Redo"/>
    </nav>
  );
};

Apologies for the lack of syntax highlighting.

There are imperfections to JSX for sure. The class HTML attributes become className for example (the former is a reserved keyword in JavaScript). Components without children must use self-closing tags — flashback to the days of XHTML.

By the way, if you’ve never used React, the components you define like <Toolbar/> can be re-used like HTML elements in other components. They exist in JSX-world only. When React writes to the DOM it uses your semantic HTML underneath.

Despite the quirks I’ve fostered a preference for using JSX over HTML templating used by other libraries. Writing stateless functional components that are presentational-only further satisfies my fondness for readable code. (I’m using Redux to manage state. A topic for another day.)

Transpiling

JSX is not native JavaScript so it must be transpiled. For this I’m using Babel. And with Babel as a dependency comes an excuse the ability to use new JavaScript features. I’ve fallen in love with arrow functions and the rest/spread operator. These things may not be supported in web browsers but we can transpile them away.

So the necessity to transpile code before it can run is a bit iffy. But it’s trivial for me to write Gulp watch tasks to do this in the background.

I was flirting with the idea of using TypeScript (or Flow). Decided against it. Too much new tech at once and I’d be one of ‘those’ developers.

Dependencies

I suspect a few readers are already balking over the number of names and acronyms I’ve already dropped. A year ago I wrote “I don’t do Angular, is that OK?”. I deliberated over what I should know as a professional front-end developer.

The piece “How it feels to learn JavaScript in 2016” by Jose Aguinaga sums up this quandary from an amusing, if cynical, perspective shared by many.

As with all tools and technology some amount of prerequisite knowledge is required. Efficient development of React requires a bit of transpiling and automation know-how. Coding in plain JavaScript requires understanding of web standards. That, in turn, requires computer literacy — and so on up and down the dependency chain. Obviously knowing how to turn on a computer is assumed but to me it seems somewhat arbitrary, or at least highly subjective, where to draw the line.

I still don’t “do Angular” but now I do do React.

That’s the worst sentence I’ve ever written.

Anyway, my point is that rejecting new technology on the premise that it introduces complexity is simply wrong if said tech proves to make life easy for those involved (not drive-by Githubers). For me — and I hope plan for those reading my documentation — React make coding web apps a delightful experience.

What makes React special is its singular focus on user interface. It doesn’t box you into a framework. It doesn’t force you to solve app architecture problems too early. From my own usage I believe this makes React the most approachable library of its ilk.

One last thing…

It would be criminal not to give a shout-out to Preact. A magical “fast 3kB alternative to React with the same ES6 API” written by Jason Miller.

Vue and Inferno are also on my radar.

Buy me a coffee! Support me on Ko-fi