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).
- I know very little about Angular 2
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:
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.
do you want to express display logic in code (React) or in markup (Angular)?
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.
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:
- CSS Modules: increasing modularity of my components by making my styles only available to the components that need them.
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.
- 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.
- 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.