Working with React.js

Hilarious , look at the sign in the background

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.

In the end, these components were all i needed for my simple app.

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’.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.