How to use React with Rails - Talk at LRUG June 2017

A Talk by Hrishi Mittal on a few different ways of using React with Ruby on Rails. More details at - https://learnetto.com/lrug

Transcript

1. How to use React with Rails Hrishi Mittal Founder and Teacher at Learnetto @hrishio hrishi@learnetto.com Slides at learnetto.com/lrug
2. What I will cover in this talk 1. What is React? 2. Why use React? 3. How to use React with Rails
3. 1. What is React?
4. React is an open-source JavaScript library for building User Interfaces Released by Facebook in 2013 https://facebook.github.io/react/
5. Key concept behind React Replace frontend view templates with simple reusable components written in Javascript
6. v = f ( d )
8. Let’s look at some React code!
9. JSX State Props
10. 2. Why use React? 1. Better, maintainable code 2. Declarative 3. Fast 4. Cross-platform
11. Better, maintainable code Avoid spaghetti code with well-structured logical UI components
12. Declarative Tell the computer what to do instead of how to do it (like SQL)
13. Fast Virtual DOM diffs allow React to make minimum expensive changes to the actual DOM
14. Cross-platform Learn once, write anywhere
15. React is to the modern frontend, as Rails is to the backend Simplicity + power + community momentum =
16. Why learn React?
17. 3. How to use React with Rails
18. a. react-rails gem
19. Why react-rails gem? Works with Rails 3.2+ Can use with Rails asset pipeline OR With Webpack (via Webpacker gem)
20. How to use it Installation creates components directory: app/assets/javascripts/components Create your React component files with a .jsx extension
21. Example
22. Other features Server-side rendering ES6 and Coffeescript support Choosing react builds for your environment Command line component generators
23. When to use it Rails < 5.1 Good for quickly trying out React with Rails Don’t want to use Webpack
24. b. react_on_rails gem https://github.com/shakacode/react_on_rails Learnetto.com
25. Why react_on_rails gem? Works with Rails 4.2+ (old versions support 3.2+) Native Javascript tooling by default Webpack, yarn, ES6 Doesn’t rely completely on the Rails asset pipeline No jQuery dependence
26. Installation creates separate /client directory in app root directory How to use it
27. Example
28. Other features Server-side rendering In-built Support for React Router and Redux Hot Module Replacement CSS Modules
29. Rails < 5.1 Want to use yarn and Webpack Want in-built support for React Router or Redux When to use it
30. c. Using React with Rails 5.1+ Native support for yarn Native support for Webpack via webpacker gem
31. How to use it Installation creates javascript packs directory: app/javascript/packs Create your React component files with a .jsx extension
32. Example
33. Huge leap for JS in Rails
34. Most advantages of using other gems are gone! yarn Webpack Hot reloading CSS Modules
35. Rails 5.1 + Highly recommended for Rails devs trying React for the first time When to use it
36. Fatal move for Rails? “Disrupt yourself, or be disrupted” 5.1 could be the gateway drug to Node
37. d. Using React with a Rails API
38. Rails API Standalone Rails API on the backend OR Standard Rails app with some API endpoints with JSON output
39. Frontend React app Use Create React App (for easy start with zero setup) OR Plain React app
40. Depends on your team Makes sense for medium-large companies with dedicated teams for backend and frontend
41. Run React without dependence on Ruby or Rails
42. API for mobile clients
43. Use Cross Origin Resource Sharing (CORS) OR proxy requests through a server like nginx. Running two apps is more work
44. If you have/want dedicated teams for frontend and backend If you have tested React and are sure you want to use it If you don’t mind overhead of running two apps When to use it
45. What we covered in this talk 1. What is React? 2. Why use React? 3. How to use React with Rails
46. Thanks! Hrishi Mittal Founder and Teacher at Learnetto @hrishio hrishi@learnetto.com Slides + Free React on Rails course at learnetto.com/lrug