React Initial Impressions

I would like to write about my very short experience with React, and how it varies from my very short experience with Angular 1.x. This short experience taught me way more than googling “React vs. Angular” (which I wasted plenty of time on).

Disclaimers

  • I know very little about Angular 2
  • I’m pretty new to modern web applications, Javascript, and React. Let me know if I made any mistakes :)

Initial Hesitations to React

I saw many people raving about the benefits of React, but there were also those who made me doubt whether React was a good idea. Here are some of my initial hesitations I had:

Markup in your Javascript, isn’t this bad?

Do these Facebook guys know or care about MVC? Have they seen what tangled PHP/HTML looks like? When I was using Angular my assumption was that, unlike React, it cleanly followed MVC — the views were the HTML files.

However, a tutorial from Cory House at Fluent 2016 convinced me this isn’t true. It is not fair to call out React for mixing HTML (well, JSX) into Javascript files, when Angular is mixing Javascript into HTML files. Sure, ng-repeat and all those directives are just HTML attributes, but they are giving Angular control over the DOM.

do you want to express display logic in code (React) or in markup (Angular)?

When dynamically generating markup, there is always a grey area where control logic and markup collide. For these two frameworks, the question is: do you want to express display logic in code or in markup? I prefer to use Javascript’s filter() and map() instead of Angular filters and ng-repeat. Yes, you can write your own directives and filters in Angular, but I found it to be more work and less obvious.

I also found it very convenient to see the display logic and the display template in the same Object. It is just easier to see at a glance what is going on, and is easier to debug without special debugging tools.

Is JSX magic?

I also objected to JSX because it seemed just too magical. However, JSX just gets compiled to nested ReactDOM.render() calls. Just flip between the “Live JSX Editor” and “Compiled JS” tabs on the examples on the React home page and even add some nested HTML tags — I think the compilation is fairly straightforward.

You can even forgo JSX and write the nested render() calls, but JSX is just easier to read. It still looks strange to see XML content in Javascript with no quotes, but now that I understand it fairly well, it’s pretty convenient.

Why I’d choose React over Angular

Compared to Angular 1.x, here is why I would choose React:

“Explicit is better than implicit”

With a couple weeks of React, I already feel like I know roughly what is going on and how I could build a complex UI. I think this can be attributed to the fact that React is pretty explicit in what it does:

  • Once I know what JSX compiles to, my component’s render() function just returns an object representing the nested DOM elements that React knows how to quickly render (via Virtual DOM)
  • The component calls render() initially and whenever the props or state changes.

Once you know these things it is pretty easy to understand how your data is transformed into DOM elements. Yes, user-input elements take a little more work to understand, but not much more. On the converse, I can’t say I have any idea of how two-way binding really works in Angular (though that could be my fault in how I learned).

It lets you pick your own libraries

I think this is mostly a good thing. React handles the transformation of your data into views, and then you pick how you are going to fetch your data. Angular is more of a framework in that is batteries included (like it’s own version of q), but you may not like the brand of the batteries it comes with.

By using libraries, not frameworks, I feel less indebted to a style of structuring an app, which might change soon anyway (Angular 1 to 2). But this means you essentially have to construct your own framework, and this could be a downside to you if:

  • Picking all your libraries and your application architecture is overwhelming for you
  • You want new developers to immediately be able to jump into your project and know what is going on

Getting Started With React

I tried getting started with react-starter-kit, but it was overwhelming reading up on CSS modules, Graph QL, Webpack, ES6, NPM scripts (instead of Gulp), and other libraries and tools. There is a whole ecosystem that generally accompanies React, but it would be impossible (at least for me) to learn this all at once!

Instead I found the official tutorial to be super helpful, because I could just copy an HTML file and start developing and and pick up the rest of the ecosystem later. However, with some experience under my belt I’m excited to use:

  • Babel: Transpile from ES2015 (newer Javascript spec) and ditch bind(this) for arrow functions. Use import statements to to include Javascript files. There are way more useful language features I am excited to dive into.
  • CSS Modules: increasing modularity of my components by making my styles only available to the components that need them.

Gotchas

Here are some of the behaviors of React that were non-obvious to me starting out:

  • In JSX, do className= instead of class=. I made this mistake several times because I didn’t understand that JSX (React) favors setting HTML properties over attributes. It looks like HTML but it’s not. You can check out the reasoning for this in detail.
  • JSX attributes have to look like ={Javascript Expression} or =“a normal string”. I tried doing something like className=”{varClassName} staticClassName” but this isn’t valid JSX. A working way of doing this would be className=“{varClassName + ‘ staticClassName’}” but there may be better ways of doing this.
  • Your JSX that render() returns must have a single root element. This makes total sense when you know that JSX just compiles to nested ReactDOM.render() calls.
  • You need to bind(this) for whatever functions you have in your react component methods that need to access this.state or this.props. This is a general concern with programming in Javascript. See above where I mention Babel and ES6 arrow functions.
  • Setting value=”something” for an input element makes it permanently that value. This makes total sense after the revelation I had about className: JSX sets the DOM property value, even though it looks like you’re setting the HTML attribute value. Read this explanation of forms in React.

I hope this helps you understand and get started with React. I am excited to learn more and will (maybe) continue to blog about my experience.