Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

React.js for Rails Developers

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to comment

React.js for Rails Developers

  1. 1. React.js for Rails Developers Marcin Grzywaczewski Arkency
  2. 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. 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. 4. Rails View Layer Tools • Templates • Views (ERB, Haml) • View partials & helpers • jQuery • Turbolinks
  5. 5. Transitioning into dynamic UI - stages • No JavaScript • jQuery explosion • Page/Widget Objects • Single Page Application
  6. 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. 7. Question time
  8. 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. 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. 10. Explaining React.js
  11. 11. Rails Views vs. React.js • Templates • Views (ERB, Haml) • View partials • jQuery • Turbolinks • ReactDOM.render • JSX • Components • nothing • setState
  12. 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.
  13. 13. 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
  14. 14. 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
  15. 15. 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
  16. 16. 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/)
  17. 17. Question time
  18. 18. 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.
  19. 19. http://bit.ly/buy-rails-meets-reactjs
 http://bit.ly/buy-reactjs-by-example
  20. 20. 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/
  21. 21. Hey, ask us anything! • Twitter: @Killavus @voter101 @andrzejkrzywda @pankowecki • Arkency Twitter: @arkency • React Kung Fu Twitter: @reactkungfu • Or mail: dev@arkency.com
  22. 22. Thank you!

    Be the first to comment

    Login to see the comments

  • EmmanuelDerozin

    Nov. 22, 2015
  • 4406arthur

    Nov. 29, 2015
  • TonyBrown4

    Mar. 26, 2016
  • OlegSuchkov

    Mar. 26, 2016
  • dennisdashkevich1

    Mar. 27, 2016
  • MinoruMizutani

    Apr. 19, 2016
  • RealSilo

    Sep. 5, 2016
  • Marianwiter

    Jul. 28, 2017

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.

Views

Total views

2,342

On Slideshare

0

From embeds

0

Number of embeds

75

Actions

Downloads

33

Shares

0

Comments

0

Likes

8

×