React.js for Rails Developers
Transcript of React.js for Rails Developers
![Page 1: React.js for Rails Developers](https://reader031.fdocuments.us/reader031/viewer/2022030304/587759a21a28ab4e4f8b5059/html5/thumbnails/1.jpg)
React.js for Rails Developers
Marcin Grzywaczewski Arkency
![Page 2: React.js for Rails Developers](https://reader031.fdocuments.us/reader031/viewer/2022030304/587759a21a28ab4e4f8b5059/html5/thumbnails/2.jpg)
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.
![Page 3: React.js for Rails Developers](https://reader031.fdocuments.us/reader031/viewer/2022030304/587759a21a28ab4e4f8b5059/html5/thumbnails/3.jpg)
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?)
![Page 4: React.js for Rails Developers](https://reader031.fdocuments.us/reader031/viewer/2022030304/587759a21a28ab4e4f8b5059/html5/thumbnails/4.jpg)
Rails View Layer Tools
• Templates
• Views (ERB, Haml)
• View partials & helpers
• jQuery
• Turbolinks
![Page 5: React.js for Rails Developers](https://reader031.fdocuments.us/reader031/viewer/2022030304/587759a21a28ab4e4f8b5059/html5/thumbnails/5.jpg)
Transitioning into dynamic UI - stages
• No JavaScript
• jQuery explosion
• Page/Widget Objects
• Single Page Application
![Page 6: React.js for Rails Developers](https://reader031.fdocuments.us/reader031/viewer/2022030304/587759a21a28ab4e4f8b5059/html5/thumbnails/6.jpg)
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
![Page 7: React.js for Rails Developers](https://reader031.fdocuments.us/reader031/viewer/2022030304/587759a21a28ab4e4f8b5059/html5/thumbnails/7.jpg)
Question time
![Page 8: React.js for Rails Developers](https://reader031.fdocuments.us/reader031/viewer/2022030304/587759a21a28ab4e4f8b5059/html5/thumbnails/8.jpg)
Hello, React.js!
• A library made by Facebook
• Only for user interface (V in MVC)
• Easy to learn
• Not only in the browser!
• Composability
![Page 9: React.js for Rails Developers](https://reader031.fdocuments.us/reader031/viewer/2022030304/587759a21a28ab4e4f8b5059/html5/thumbnails/9.jpg)
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
![Page 10: React.js for Rails Developers](https://reader031.fdocuments.us/reader031/viewer/2022030304/587759a21a28ab4e4f8b5059/html5/thumbnails/10.jpg)
Explaining React.js
![Page 11: React.js for Rails Developers](https://reader031.fdocuments.us/reader031/viewer/2022030304/587759a21a28ab4e4f8b5059/html5/thumbnails/11.jpg)
Rails Views vs. React.js
• Templates
• Views (ERB, Haml)
• View partials
• jQuery
• Turbolinks
• ReactDOM.render
• JSX
• Components
• nothing
• setState
![Page 12: React.js for Rails Developers](https://reader031.fdocuments.us/reader031/viewer/2022030304/587759a21a28ab4e4f8b5059/html5/thumbnails/12.jpg)
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.
![Page 13: React.js for Rails Developers](https://reader031.fdocuments.us/reader031/viewer/2022030304/587759a21a28ab4e4f8b5059/html5/thumbnails/13.jpg)
![Page 14: React.js for Rails Developers](https://reader031.fdocuments.us/reader031/viewer/2022030304/587759a21a28ab4e4f8b5059/html5/thumbnails/14.jpg)
![Page 15: React.js for Rails Developers](https://reader031.fdocuments.us/reader031/viewer/2022030304/587759a21a28ab4e4f8b5059/html5/thumbnails/15.jpg)
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
![Page 16: React.js for Rails Developers](https://reader031.fdocuments.us/reader031/viewer/2022030304/587759a21a28ab4e4f8b5059/html5/thumbnails/16.jpg)
![Page 17: React.js for Rails Developers](https://reader031.fdocuments.us/reader031/viewer/2022030304/587759a21a28ab4e4f8b5059/html5/thumbnails/17.jpg)
![Page 18: React.js for Rails Developers](https://reader031.fdocuments.us/reader031/viewer/2022030304/587759a21a28ab4e4f8b5059/html5/thumbnails/18.jpg)
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
![Page 19: React.js for Rails Developers](https://reader031.fdocuments.us/reader031/viewer/2022030304/587759a21a28ab4e4f8b5059/html5/thumbnails/19.jpg)
![Page 20: React.js for Rails Developers](https://reader031.fdocuments.us/reader031/viewer/2022030304/587759a21a28ab4e4f8b5059/html5/thumbnails/20.jpg)
![Page 21: React.js for Rails Developers](https://reader031.fdocuments.us/reader031/viewer/2022030304/587759a21a28ab4e4f8b5059/html5/thumbnails/21.jpg)
![Page 22: React.js for Rails Developers](https://reader031.fdocuments.us/reader031/viewer/2022030304/587759a21a28ab4e4f8b5059/html5/thumbnails/22.jpg)
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
![Page 23: React.js for Rails Developers](https://reader031.fdocuments.us/reader031/viewer/2022030304/587759a21a28ab4e4f8b5059/html5/thumbnails/23.jpg)
![Page 24: React.js for Rails Developers](https://reader031.fdocuments.us/reader031/viewer/2022030304/587759a21a28ab4e4f8b5059/html5/thumbnails/24.jpg)
![Page 25: React.js for Rails Developers](https://reader031.fdocuments.us/reader031/viewer/2022030304/587759a21a28ab4e4f8b5059/html5/thumbnails/25.jpg)
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/)
![Page 26: React.js for Rails Developers](https://reader031.fdocuments.us/reader031/viewer/2022030304/587759a21a28ab4e4f8b5059/html5/thumbnails/26.jpg)
Question time
![Page 27: React.js for Rails Developers](https://reader031.fdocuments.us/reader031/viewer/2022030304/587759a21a28ab4e4f8b5059/html5/thumbnails/27.jpg)
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.
![Page 28: React.js for Rails Developers](https://reader031.fdocuments.us/reader031/viewer/2022030304/587759a21a28ab4e4f8b5059/html5/thumbnails/28.jpg)
http://bit.ly/buy-rails-meets-reactjs
http://bit.ly/buy-reactjs-by-example
![Page 29: React.js for Rails Developers](https://reader031.fdocuments.us/reader031/viewer/2022030304/587759a21a28ab4e4f8b5059/html5/thumbnails/29.jpg)
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/
![Page 30: React.js for Rails Developers](https://reader031.fdocuments.us/reader031/viewer/2022030304/587759a21a28ab4e4f8b5059/html5/thumbnails/30.jpg)
Hey, ask us anything!
• Twitter: @Killavus @voter101 @andrzejkrzywda @pankowecki
• Arkency Twitter: @arkency
• React Kung Fu Twitter: @reactkungfu
• Or mail: [email protected]
![Page 31: React.js for Rails Developers](https://reader031.fdocuments.us/reader031/viewer/2022030304/587759a21a28ab4e4f8b5059/html5/thumbnails/31.jpg)
Thank you!