I've been checking out ReactJS over the past few days, and to say the least I'm impressed.

I started by going through Facebook's tutorials, but they only seemed to scratch the surface. Suffice it to say, I needed to do more to understand. So, I started googling and found a bunch of articles that went deeper into React.

React "Coolness"


First, React is fast. We all know that DOM manipulations are some of the slowest things in front-end development, and we try to touch it as little as possible. Thanks to React's use of the virtual DOM and its diff algorithm we get very good performance.


Since starting front-end development I've always been told to keep everything separate. HTML should be separated from JS, logic shouldn't be stored in the templates, etc. React seems to take the opposite stance on this; making it normal to put HTML and JS in the same file.

This is possible because of JSX, which isn't actually required when writing React code. JSX is just a pre-compiler that you run on your files to transform the HTML into valid JS.

I'm starting to see this separation isn't always a good thing, and I don't miss moving between JS and template files.

I still believe Angular takes template logic a step too far, but that's a whole different subject.

React, Webpack, and ES6

Like I said prior, tutorials on Facebook's site only go so far. I really wanted to start using ES6 and found Webpack to be a great solution.

It took a little bit of time to understand the set-up and whatnot, but in the end it worked perfectly. I had my React components compiled, without having to use the JSX transformer, and set up hot reload. Pretty cool.

Then came the ES6 part, which I assumed would be tough, but Babel made it super easy. It's really simple to add to Webpack as they have a loader (babel-loader) specifically for that. All that's needed is an npm install and an additional config object in the webpack config file.

React App Architecture

While I really like React, I've been struggling with how to use it in an application structure. While many say use Flux, everyone seems to have a different implementation. Facebook haven't released a library for it yet, just a "way of thinking/process." Can't wait to learn more about it.

Edit: I found this post that goes more into detail about Flux. The author poses some questions at the end, most of which I had, but the comments are very good and explain a lot.

I'm really looking forward to continuing with React, but it seems there is a steep learning curve after understanding the component layer.