Declarative
Tell the computer what to do instead of how to do it
(like SQL)
Slide 13
Slide 13 text
Fast
Virtual DOM diffs allow React to make minimum expensive
changes to the actual DOM
Slide 14
Slide 14 text
Cross-platform
Learn once, write anywhere
Slide 15
Slide 15 text
React is to the modern frontend,
as Rails is to the backend
Simplicity + power + community momentum =
Slide 16
Slide 16 text
Why learn React?
Slide 17
Slide 17 text
3. How to use
React with Rails
Slide 18
Slide 18 text
a. react-rails gem
Slide 19
Slide 19 text
Why react-rails gem?
Works with Rails 3.2+
Can use with Rails asset pipeline
OR
With Webpack (via Webpacker gem)
Slide 20
Slide 20 text
How to use it
Installation creates components directory:
app/assets/javascripts/components
Create your React component files with a .jsx extension
Slide 21
Slide 21 text
Example
Slide 22
Slide 22 text
Other features
Server-side rendering
ES6 and Coffeescript support
Choosing react builds for your environment
Command line component generators
Slide 23
Slide 23 text
When to use it
Rails < 5.1
Good for quickly trying out React with Rails
Don’t want to use Webpack
Slide 24
Slide 24 text
b. react_on_rails gem
https://github.com/shakacode/react_on_rails
Learnetto.com
Slide 25
Slide 25 text
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
Slide 26
Slide 26 text
Installation creates separate /client directory in app root directory
How to use it
Slide 27
Slide 27 text
Example
Slide 28
Slide 28 text
Other features
Server-side rendering
In-built Support for React Router and Redux
Hot Module Replacement
CSS Modules
Slide 29
Slide 29 text
Rails < 5.1
Want to use yarn and Webpack
Want in-built support for React Router or Redux
When to use it
Slide 30
Slide 30 text
c. Using React with Rails 5.1+
Native support for yarn
Native support for Webpack via webpacker gem
Slide 31
Slide 31 text
How to use it
Installation creates javascript packs directory:
app/javascript/packs
Create your React component files with a .jsx extension
Slide 32
Slide 32 text
Example
Slide 33
Slide 33 text
Huge leap for JS in Rails
Slide 34
Slide 34 text
Most advantages of using other
gems are gone!
yarn
Webpack
Hot reloading
CSS Modules
Slide 35
Slide 35 text
Rails 5.1 +
Highly recommended for Rails devs trying React for the first time
When to use it
Slide 36
Slide 36 text
Fatal move for Rails?
“Disrupt yourself, or be disrupted”
5.1 could be the gateway drug to Node
Slide 37
Slide 37 text
d. Using React with a Rails API
Slide 38
Slide 38 text
Rails API
Standalone Rails API on the backend
OR
Standard Rails app with some API endpoints with JSON output
Slide 39
Slide 39 text
Frontend React app
Use Create React App (for easy start with zero setup)
OR
Plain React app
Slide 40
Slide 40 text
Depends on your team
Makes sense for medium-large companies
with dedicated teams for backend and frontend
Slide 41
Slide 41 text
Run React without dependence on
Ruby or Rails
Slide 42
Slide 42 text
API for mobile clients
Slide 43
Slide 43 text
Use Cross Origin Resource Sharing (CORS)
OR
proxy requests through a server like nginx.
Running two apps is more work
Slide 44
Slide 44 text
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
Slide 45
Slide 45 text
What we covered in this talk
1. What is React?
2. Why use React?
3. How to use React with Rails
Slide 46
Slide 46 text
Thanks!
Hrishi Mittal
Founder and Teacher at Learnetto
@hrishio
[email protected]
Slides + Free React on Rails course at
learnetto.com/lrug