Marcin Grzywaczewski, co-author of successful "Rails meets React.js" and "React.js by Example" books describes React in a friendly way to all Rails developers who'd like to learn React, but can't find generic tutorials friendly enough. In this presentation you'll learn React.js basics by comparing it to a typical Rails views stack - and recognize the problem React.js solves for you. There are also 'mental transition' stages of thinking about frontend explained.

1. React.js for Rails
Developers
Marcin Grzywaczewski
Arkency

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

3. 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?)

4. Rails View Layer Tools
• Templates
• Views (ERB, Haml)
• View partials & helpers
• jQuery
• Turbolinks

5. Transitioning into dynamic
UI - stages
• No JavaScript
• jQuery explosion
• Page/Widget Objects
• Single Page Application

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

7. Question time

8. Hello, React.js!
• A library made by Facebook
• Only for user interface (V in MVC)
• Easy to learn
• Not only in the browser!
• Composability

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

10. Explaining React.js

11. Rails Views vs. React.js
• Templates
• Views (ERB, Haml)
• View partials
• jQuery
• Turbolinks
• ReactDOM.render
• JSX
• Components
• nothing
• setState

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

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

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

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

25. 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/)

26. Question time

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

28. http://bit.ly/buy-rails-meets-reactjs
http://bit.ly/buy-reactjs-by-example

29. 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/

30. Hey, ask us anything!
• Twitter: @Killavus @voter101 @andrzejkrzywda
@pankowecki
• Arkency Twitter: @arkency
• React Kung Fu Twitter: @reactkungfu
• Or mail: dev@arkency.com

31. Thank you!