Working with React.js
This week I used React and made a simple app that works with the Youtube API. My first impression was “What am I supposed to do with this?” — probably because I was using Backbone.js for a couple of days and got used to it.
But soon, meaning about 6 hours of searching, reading the docs and trying out the tutorials, I suddenly understood what React does.
And for me, it was amazingly simpler than writing code with Backbone.js. All I had to do was understand what components, props and states are. I don’t want to go into the details but I’d like to point out a few aspects that made me think React is awesome.
Everything is a component
The whole time I was working with React, All I was doing was making components. Some of them had only one job, rendering a div with data into the page while others had more complex jobs, like sending an asynchronous GET request to the Youtube API. But that was all I had to worry about, the components.
This simplicity is even stated in the official documentation.
In fact, with React the only thing you do is build components. Since they’re so encapsulated, components make code reuse, testing, and separation of concerns easy. (https://facebook.github.io/react/docs/why-react.html)
Moreover, because everything was a component and worked in the same way, it was easy to figure out what I should do when I wanted to add a new feature to my app. In other words, it was very intuitive.
Events flow up, data flow down
At first, I didn’t know what ‘one-way reactive data flow’ meant. It felt like a paradox. How could it be reactive if it’s one-way? But as I tried to change my “currentVideo” state if the user clicks on a video, I came to realize that this was actually true.
Because the handler function — in this case, the handleClick function in the App component — flows down with the data, it can get called when the user clicks the “media-body” div in the VideoListEntry component. This sets the “currentVideo” state to the new video and this data is once again passed down, hence the phrase ‘one-way reactive data flow’.