Rails meets React.js is out: What you can find inside?

Dealing with frontends can be a tedious task for Rails developers. In Arkency, we blogged the about frontend development a lot, searching for the best solutions and practices. React.js is one of the most successful findings for us. It brought solid solution to a problem of building modern, dynamic interfaces to web applications we were working on. React.js is one of jewels in our toolbox now.

There is a common practice in our company to propagate knowledge within and outside of the team with blogposts and books. After a few months of work, we’re happy to present you a book with our knowledge about React.js.

We had a great fun writing it. We filled it with our best practices, theory behind React and tons of examples. You can buy it right now - with all future updates for free.

Interested? Let me tell you more about what you can find inside.

Slow start

Let’s start our journey with smallest, meaningful thing we can do with React.

Every technology comes with a set of terms and conventions you need to understand to write a code using it. React.js is a technology with a well-defined scope and a single responsibility - thus there are fewer things to grasp than, for example, Rails or Angular.js which have a lot of terminology behind.

First chapter is all about slowly introducing building blocks of React.js. We start with a minimal example and extend it through the chapter, step by step. With each step there is an explanation what we actually do and how is is done in React.

At the end of this chapter you should have a knowledge sufficient to build a simple component with event handlers.

Hands-on example

From our own experience React is most commonly used to enhance user interaction with non trivial forms. That’s why our first bigger example is going to be about submitting data. Our goal is to code a form for creating new meetup. It will have to interact with various user actions and grow to accumulate more features.

After grasping basic concepts of React, there is a bigger hands-on example constructed in the same manner - in a step by step manner. You are about to build a big, dynamic form with frontend validations. You can see a real world example of the React dynamic UI - and polish your skills obtained in previous chapters.

Code included

You get a code repository with all examples from the book, absolutely for free. We tried to split our work into commits which shows our workflow with React. You can also read a book and make steps from it by yourself. The code is in Coffeescript and Rails.

Best practices

Passing state is still subject of our interest since we are unsatisfied with solutions we’ve tried. You can also find a more proper way to pass state - classical approaches can be hard to operate with when user interface becomes huge.

We are working with React.js for a more than a year. With this year we managed to solve common problems you may have when working with React by yourself. With this book you can learn patterns for passing state, integrating with external libraries and structuring your components - with pros and cons and meaningful tips from experienced developers.

Theory of React

The art of programming in React is creating components from smaller ones to achieve your user interface goals. You may find it easier to think about it as a partial in your typical Rails ERB view.

React.js comes with a solid declarative approach to workflow. There is an interesting theory worth to know when you want to master your skills as a front-end developer. In Rails meets React.js there are chapters about each building block described in a more ‘theoretical’ way. You can learn about philosophy behind React.js and use it for your own good.

Testing

Inside React.addons.TestUtils we have special module called Simulate. We can simulate all kind of events that can originate from the browser.

Testability is very important for us in Arkency. Testing is a part of our culture and a technology without a way to proper testing has a little value for us.

Fortunately React components are easily testable. In our book common testing approaches are shown - through mutating state, using simulated events and through references.

Bonus content

React.js is a technology which does have really smooth learning curve. You can easily transform your simpler views to React components even without knowing what’s going on inside the components. I want to show you an example.

Apart from the ‘main’ content of a book, there are a lot materials we wanted to share with you. We included around 50 pages of content from our blogs and dropped chapter of the book (transforming a Rails view into a React component) as bonus chapters. It is a great source of inspiration if you want to improve your front-end skills further.

Upgrade tips

Recently React.js got an update which is a step forward towards making your components less “magic”. There are some breaking changes, especially if you are not using JSX. Fortunately, upgrade process is rather straightforward.

If you had an occasion to work with React before, there is a chapter about upgrading old React code to be ready for a 0.13 version of this library. This version introduced major changes, both in code and terminology, decoupling some concepts even more.

Rails meets React.js in numbers

For now there are 10 chapters - 146 pages of the main content. There is also 46 pages of bonus content we’ve prepared. It is a first release of our book - if you buy it now you get all further updates for free. Roadmap for v2 version is already prepared.

Interested?

Our book is already available for purchase. You can buy it from our DPD for a great price of $49 - with a repository access and bonus materials included.

As one of authors (we wrote this book with Robert Pankowecki) I hope you will have as much fun of reading this book as I had writing it. React.js brings joy to a complicated task of building frontend UIs. I hope this book will help you to be a great frontend developer. Which is a role which more and more often demanded from our clients nowadays.