React.js Real Quick

Gave as a lightning talk (with way too much content) at Austin on Rails in Feb of 2015
References:
http://ricostacruz.com/cheatsheets/react.html
https://github.com/ryanflorence/react-training/tree/gh-pages/lessons
http://facebook.github.io/react/docs/tutorial.html
http://aeflash.com/2015-02/react-tips-and-best-practices.html
https://facebook.github.io/react/docs/why-react.html
https://www.quora.com/Pete-Hunt/Posts/React-Convincing-the-Boss

Transcript

1. React.js Real Quick (Pun Intended)
2. Tim Tyrrell • WellMatch working on Healthcare Price Transparency software • King of “Piddly Throw Away ‘Intro’ Presentations” • Likes shiny javascript objects • Really good at slide colors and fonts
3. “Extol and not troll” - Curtis Ekstrom
4. What is React.js?
5. “A JavaScript library for creating user interfaces”
6. “Building large applications with data that changes over time" Designed for… SLIDE Does anyone have anything like that or expect to work on it in the future?
7. Why React? • Simple • Declarative - (Simple) Simply express how your app should look at any given point in time, and React will automatically manage all UI updates when your underlying data changes. - (Declarative) In the right ways, at the right parts of the code. Declarative “sweet spot”
8. Ok, But Why *Now*? • To be clear, Facebook has been using it in production since 2011 • It solves some really hard problems in uncomplicated ways better than other current popular frameworks
9. Show the damn code, jerkface
10. - What is a component:? The only thing in React.js (no directives, no controllers, no views, etc) You make components and use javascript. Encapsulates a part of a page, making code reuse, testing, and separation of concerns easy - Javascript is ES6, so it is a more terse. - Html looking stuff is JSX - React.render - > Gets it on the page
11. JSX gets transformed into this. Don’t use it, but be aware that you can.
12. JSX • Recommended because it is “a concise and familiar syntax for defining tree structures with attributes” • <div className=‘cheddar’>Potato</div> - Great because you don’t need separate templates based on different customers - It is just JavaScript. You are not string appending, you are using code, mixins, Extracting methods, etc. - Self-contained - Conceptually easy yo understand. When is “rendered”, is on the page
14. Props (How Data Gets In) • <App someText=“words for you” /> • example: console.log(this.props.someText) • Properties are passed in just like HTML attributes A way that data can flow into an component, other than a lifecycle event making an ajax call or something and getting data
15. PropTypes • propTypes:{resultCount: React.PropTypes.number} • “Warning: Invalid prop `resultCount` of type `string` supplied to `exports`, expected `number`.” - To specify which ‘types’ a component expects for each of its props and which props are required - So if someone is going to re-use your component, you basically are telling them the contract
16. State (How you (re)render) • getInitialState() { return { posts: [] } } • this.setState({posts: [id: 1, title: “Stuff”]}) • this.state.posts - getInitialState = lifecycle event - Whenever you change state, your component will re-render. Your component won't actually re-render everything to the DOM, but it will re-render to a virtual DOM. It then compares this new virtual DOM to the previous one. The resulting diff is the smallest set of operations to apply to the real DOM. Also, very fast.
17. Refs • <input ref=“assignedName” type=“text”/> • this.refs.assignedName.getDOMNode().value • this.refs.assignedName.getDOMNode().focus() Refs are like element IDs but scoped to that component
18. Lifecycle Events • Mounting: componentDidMount(){} • Updating: componentDidUpdate(){} • Unmounting: componentWillUnmount(){} - componentWillMount: ajax call to set state - componentDidMount: something that manipulates the DOM - componentWillUnmount: clear some listeners
19. Actions • doSomething() { console.log(“CLICKED!) } • <div onClick={this.doSomething}>Huh?</div> These are just function in your application
20. Mixins • mixins: [SharedStuff] • SharedStuff = { componentWillMount(){ .. }}
21. - Higher level container competent, the one attached to the page - lifecycle events happen, getInitialState, componentDidMount - render happens - action attached to the textbox - ref - Also another component, the TypeAheadList
22. Putting it together - Higher level component managing the this child component - no templates - no controllers - no views - no models - no collections - Library designed to work effectively and in a lightweight manner with legacy code and libraries
23. Wait, there is more
24. react-router You like react and you want to do more than slap it on a part of a page. You want to make a SPA or a part with a chunk of functionality
25. Server-Side Rendering Client-side code: Server-side code: React will return an HTML string. You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes. If you call React.render() on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience. It is a Magic fucking handoff! When people talk about isomorphic JS, this is it. Not reusing like a validation library, we are using the entire damn component, html, logic, whatever
26. renderToStaticMarkup BLOG DONE
27. Hotloading • Developer <3 <3 • Not a Live Reload. • “Beast mode” Live Reload. Maintains state! • Combine with React Native for instantaneous iOS “compiling” and debugging
28. setInterval(function() { Array.prototype.slice.call(document .querySelectorAll('[data- reactid]')).forEach(function(element) { element.style.background = 'rgba(255,0,0,0.1)'; }) }, 500)
30. https://news.ycombinator.com/item?id=7721898
33. Why? • Because it has a simple (and tiny) and helpful mental model • Because the API is easy to understand and you won’t have to make a massive intellectual investment learning it • Because you can render on the server-side and get SEO and fast page loading • Because it has righteous performance • Because it doesn’t have overbearing conventions force your into corners • Because if you want to build complicated applications there is an industry proven pattern to achieve this goal • Because it can be sparingly used or just replace the “view layer” for existing backbone.js applications (for example) • Because it is just javascript and you won’t be forced to use a framework or libraries janky proprietary objects or jQuery clones (it is just javascript)
34. “React challenges a lot of conventional wisdom, and at first glance some of the ideas may seem crazy.” Backbone didn’t seem like enough (although it still has wonderful use cases), some other frameworks went to far, or at least too far in what a majority of people (in my bubble) believe to be in the wrong direction. React takes you back a bit, it is declarative, but in the right ways. It is simple, yet massively powerful. You are not constrained by harmful conventions, but free to create awesome user interfaces.
35. Reference • http://ricostacruz.com/cheatsheets/react.html • https://github.com/ryanflorence/react-training/tree/gh-pages/ lessons • http://facebook.github.io/react/docs/tutorial.html • http://aeflash.com/2015-02/react-tips-and-best-practices.html • https://facebook.github.io/react/docs/why-react.html • https://www.quora.com/Pete-Hunt/Posts/React-Convincing- the-Boss