React on Rails

React is a new framework javascript, developed by Facebook. And the description on site is ""Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project"".
I'll talk about how implement this framework, on your workflow with RoR using a gem called react-rails.
The talk will contain this informations, States and Props, Virtual DOM and JSX about the framework. Using JSX, organization components, Pre-render, React unobtrusive and helpers about the gem.

Transcript

1. #rubyconf2015 React on Rails
2. #rubyconf2015 Vinicius Palma Github: viniciuspalma Twitter: @_viniciuspalma_
3. Codeminer42 Github: Codeminer42 www.codeminer42.com #rubyconf2015
4. #rubyconf2015 React
5. #rubyconf2015 React
6. #rubyconf2015 A declarative, efficient, and flexible JavaScript library for building user interfaces. React
7. #rubyconf2015 JUST THE UI React
8. #rubyconf2015 VIRTUAL DOM React
9. #rubyconf2015 DATA FLOW React
10. #rubyconf2015 A Simple Component React
11. #rubyconf2015 React - simple component var HelloMessage = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } }); React.render(<HelloMessage name="John" />, mountNode);
12. #rubyconf2015 A Stateful Component React
13. #rubyconf2015 React - stateful component var Timer = React.createClass({ getInitialState: function() { return {secondsElapsed: 0}; }, tick: function() { this.setState({secondsElapsed: this.state.secondsElapsed + 1}); }, componentDidMount: function() { this.interval = setInterval(this.tick, 1000); }, componentWillUnmount: function() { clearInterval(this.interval); }, render: function() { return ( <div>Seconds Elapsed: {this.state.secondsElapsed}</div> ); } }); React.render(<Timer />, mountNode);
14. Rails #rubyconf2015
15. Rails #rubyconf2015
16. #rubyconf2015 Rails is a web-application framework that includes everything needed to create database-backed web applications according to the Model-View-Controller (MVC) pattern. Rails
17. #rubyconf2015
18. #rubyconf2015
19. react-rails #rubyconf2015 https://rubygems.org/gems/react-rails
20. react-rails #rubyconf2015
21. #rubyconf2015 Ruby gem for automatically transforming JSX and using React in Rails. react-rails
22. react-rails #rubyconf2015 rails g react:install
23. react-rails #rubyconf2015 rails g react:install //= require react //= require react_ujs //= require components
24. react-rails #rubyconf2015 Asset Pipeline .js.jsx
25. react-rails #rubyconf2015 Asset Pipeline .js.jsx.coffee
26. react-rails #rubyconf2015 HelloMessage = React.createClass render: -> `<div>Hello {this.props.name}</div>`
27. react-rails #rubyconf2015 Don’t forget import your components
28. react-rails #rubyconf2015 BabelTransformer http://babeljs.io/
29. react-rails #rubyconf2015 Rendering and mounting react_component(component_class_name, props={}, html_options={})
30. react-rails #rubyconf2015 Rendering and mounting <%= react_component('HelloMessage', name: 'John') %>
31. react-rails #rubyconf2015 Rendering and mounting <%= react_component('HelloMessage', name: 'John') %> <div data-react-class="HelloMessage" data-react-props="{&quot;name&quot;:&quot;John&quot;}"></div>
32. react-rails #rubyconf2015 Rendering and mounting react_ujs
33. react-rails #rubyconf2015 Server rendering <%= react_component('HelloMessage', {name: 'John'}, {prerender: true}) %> <div data-react-class="HelloMessage" data-react-props=“{&quot;name&quot;:&quot;John&quot;}”> <h1>Hello, John!</h1> </div>
34. react-rails - Rendering and mounting #rubyconf2015 *
35. #rubyconf2015 File with components and dependencies Default: components.js react-rails - Rendering and mounting Accessible in the global scope window.Component = Component Be careful, document jQuery and some other libs won't work in this environment :( *
36. react-rails #rubyconf2015 rails generate react:component Post title:string body:string published:bool published_by:instanceOf{Person}
37. react-rails #rubyconf2015 rails generate react:component Post title:string body:string published:bool published_by:instanceOf{Person}
38. react-rails #rubyconf2015 rails generate react:component Post title:string body:string published:bool published_by:instanceOf{Person}
39. react-rails #rubyconf2015 rails generate react:component Post title:string body:string published:bool published_by:instanceOf{Person}
40. react-rails #rubyconf2015 rails generate react:component Post title:string body:string published:bool published_by:instanceOf{Person}
41. react-rails #rubyconf2015 rails generate react:component Post title:string body:string published:bool published_by:instanceOf{Person}
42. react-rails #rubyconf2015 var Post = React.createClass({ propTypes: { title: React.PropTypes.string, body: React.PropTypes.string, published: React.PropTypes.bool, publishedBy: React.PropTypes.instanceOf(Person) }, render: function() { return ( <div> <div>Title: {this.props.title}</div> <div>Body: {this.props.body}</div> <div>Published: {this.props.published}</div> <div>Published By: {this.props.publishedBy}</div> </div> ); } });