React.js for Rails Developers

React.js for Rails Developers

Marcin Grzywaczewski Arkency

Problems

• You need to add dynamic elements to your Rails application.

• You want to create Rails application in a single page app fashion.

• You need to make an user experience as similar as possible to their previous experience with desktop apps.

Technical Problems

• To do it, you need some kind of JavaScript flavor

• Many Rails developers don’t like JavaScript

• Writing a good, maintainable client-side code is hard (is it?)

Rails View Layer Tools

• Templates

• Views (ERB, Haml)

• View partials & helpers

• jQuery

• Turbolinks

Transitioning into dynamic UI - stages

• No JavaScript

• jQuery explosion

• Page/Widget Objects

• Single Page Application

Page/Widget objects

• You create an abstraction over a logical piece of your user interface

• You can unit test it, since it is a structured part of the code

Question time

Hello, React.js!

• A library made by Facebook

• Only for user interface (V in MVC)

• Easy to learn

• Not only in the browser!

• Composability

Composability

• React.js operates on the concept of components

• You create components by composing smaller components

• Ease of testing, ease of development

• Components are Page/Widget objects

Explaining React.js

Rails Views vs. React.js

• Templates

• Views (ERB, Haml)

• View partials

• jQuery

• Turbolinks

• ReactDOM.render

• JSX

• Components

• nothing

• setState

ReactDOM.render• To render a React component, you use the

following call: ReactDOM.render(what, where)

• what - a React component

• where - a real DOM node

• Equivalent of yield in Rails templates.

JSX

• React.js ships with a syntactic sugar to define how the component looks like

• It is very similar to HTML and it allows JavaScript injection (think ERB)

• For developers and designers convenience

React Components• Defines a page/widget. Similar to Rails partial +

helpers attached

• Must have a render() method which renders the JSX tree based on state and properties

• Properties - equivalent to locals in Rails partials

• State - a special piece of data which forces re-render if changed

setState• There can be a special piece of data called state in

every React component

• Calling setState updates the component - the render() method is called with new state again

• Under the hood, React creates a minimal set of changes needed to be done

• It is what makes React components dynamic!

• It's similar to Turbolinks

Integration with Rails

• react-rails (https://github.com/reactjs/react-rails)

• Browserify & Rails (http://blog.arkency.com/2015/04/bring-commonjs-to-your-asset-pipeline/)

• custom integration with e.g. Webpack (what is Webpack?: http://reactkungfu.com/2015/07/the-hitchhikers-guide-to-modern-javascript-tooling/)

Question time

Bonus• We have two books about React.js and six

books in total:

• React.js by Example - how to create cool widgets you love and use using React.js

• Rails meets React.js - learning all needed concepts of React.js with CoffeeScript and Rails.

Use JETBRAINS_REACT_WEBINAR to get 35% discount for all our books! Coupon valid to 1st of April.

http://bit.ly/buy-rails-meets-reactjs

http://bit.ly/buy-reactjs-by-example

Materials:• Scaffold to React.js with full commit history:

https://github.com/arkency/scaffold-to-react/commits/newest-20160324

• React.js Koans - a set of exercises for beginners: https://github.com/arkency/reactjs_koans (over 2500 stars on GitHub!)

• React Kung Fu blog: http://reactkungfu.com

• Showcase of examples you can find in React.js by Example: https://reactkungfu.com/showcases/

Hey, ask us anything!

• Twitter: @Killavus @voter101 @andrzejkrzywda @pankowecki

• Arkency Twitter: @arkency

• React Kung Fu Twitter: @reactkungfu

• Or mail: [email protected]

Thank you!