Reaction: Mixing ReactJs into my Flow

This is the first of what will be a weekly update on what I think about ReactJs and how I am using it. I am a Rails developer and I hope to offer insight along the way. I’m not sure exactly what I am trying to strike with this format early on, so just bear with me and please provide feedback!

I started paying attention to ReactJs when the team announced React Native. I’d known about React for a while but the thought of writing performant JavaScript that would run across multiple platforms got me excited to find out more. Since diving in, I gotten to know why people are so excited about it. Unlike other “hot” JavaScript packages that I had tried, the learning curve with React was very reasonable and the code could healthily be mixed into a lot of my existing code bases. I have not tried everything by any means but React has been by far the best new JS framework or library.

As I mentioned, mixing React into my existing projects has been a breath of fresh air. The simple event triggering in React means that I can conceptually replace a lot of my existing Jquery code with ease. I am also quite satisfied with the React-Rails gem, which lets me “write once” in a very simple manner, as long as you buy into the idea of writing React components for the views.

Right now I am using React for the upcoming version of Texts.com. We recently decided to rewrite our Rails app and I was very excited to go full-React from day one on the new app. I really enjoy writing the top-level React component into the Haml I use and if anything goes wrong I can easily trace up or down the stack to find the issues, on account of the very well thought out one way data flow concepts in React.

Here is what the main book list view on Texts.com looks like:


The Haml:

%section.books

- if @books

= react_component('BookList', books: @books)

And then in the JSX:

BookList = React.createClass({

render: function(){

var books = [];

this.props.books.forEach(function(book){

books.push(<Book book={book} />)

})

return(

<div>

{books}

</div>

)

}

})

It’s conceptually easy to follow the ideas through the app and I am having a great time.

I am also using React in my side project Threddit. So far only in the image uploader, but I plan to replace a lot of the current JavaScript soon. The ability to sprinkle React in where you want it and only where you want it without any archetectural debt has been great.

I hope this has been helpful. Please let me know on Twitter at @bhalp1 if you have any feedback or advice to offer or are seeking out feedback or advice.

Share this post: