I’ve spent roughly the last 6 months investing a lot of time and energy into getting up to speed with Facebook’s React. It has been an overwhelmingly positive experience and I’ve learned a lot throughout the process. I wanted to share some thoughts I’ve formed along the way.
I’ve experienced mild success with both Ember and Angular, but for some reason, neither framework has really compelled me (or employer(s) at the time) to commit and adopt. […] Then came React.
I finally decided to dedicate some time and give React some attention to see what all the fuss was about. Within 30 minutes or so, I had glazed over the docs, worked my way through the tutorial, and React had my attention. Something just felt right.
Fast forward 6 months, and I’m leading a project developing a large new feature […] in React
Fast forward 6 months, and I’m leading a project developing a large new feature (built exclusively in React of course :)) that will live within our primary application at work. As it stands, we are on the path of fully adopting React for new development moving forward and refactoring crucial features as needed. It has been an overly positive experience and had a great effect on our development process, team dynamic, and even product quality.
I attribute this to a number of reasons. Here are some more specific reasons that have contributed to the positive experience.
You can’t get past the React Doc’s Homepage without encountering JSX ([Facebook’s JSX Spec] (https://facebook.github.io/jsx/)). This has been quite the point of contention among developers, and intially received negative feedback when Facebook initially open sourced React.
Personally, that this was initially one of the biggest selling points for me and I feel like it has had a huge impact on React’s rise in popularity and success.
Here is a contrived side-by-side. You can easily imagine how a more complex “without JSX” example might look. Not to say it can’t be done, but I see no reason to shed JSX in favor of “purity”.
Another huge bonus side effect I’ve experienced from diving into React is exposing myself to ES6 (ES2015). This seems like a deliberate descision from the React team to “Promote best practices as default”.
Since I’ve begun working with React, all of my new code has been primarly ES6 thanks to (Babel)[http://babeljs.io/]. There is much more to be said about why you should be looking at or adopting ES6/ES2015 now. If you haven’t given ES6 a shot, I highly recommend you go give Babel a spin.
Much wonder and happiness has come from the two-way data binding that React’s ancestors provided. Being able to fire up a fresh Angular app, add a few ng attributes, and have some text be automatically bound to some input felt like magic! But with power comes a price. Much heartache and sorrow has resulted from large applications and impossible-to-debug scenarios as a result of two-way data binding. If you are coming from that type of world/mentality, then React’s unidirectional data flow may be a bit jarring at first.
I have found it refreshingly explicit.
I feel like the one way data flow that React promotes has had a huge impact on my way of thinking and has opened my eyes to the importance of “data flow”. This definitely takes some getting used to and raises some questions when dealing with parent/child components.
There is no guesswork or piecing together timelines of events to figure out “what will this component look like after X and before Y and during Z”.
With this one way data flow, components are a function of props and state. There is no guesswork or piecing together timelines of events to figure out “what will this component look like after X and before Y and during Z”. This is a paradigm shift I am still wrapping my mind around, but it is becoming clearer with time and has helped me better reason about the responsibilties of my components.
There is so much more to be said about React and the impact it is having on my personal growth/development, team dynamics, and even product quality. Some more topics I would like to put some more thought and time into wrting: