class: center, middle # React - a short primer Mike Estes @mikejestes CTO @PriceWaiter --- # DHTML webpage.html ```html
Email:
Submit
``` --- # Separation * Semantic Markup = Content * JS = Interaction * CSS = Presentation --- # jQuery index.html ```html
One
Two
``` tabs.css ```css .tab-container li { display: none; } .tab-container li.active { display: inline-block; } ``` tabs.js ```javascript $('.tab-container li').on('click', function(e) { $('.tab-container li').removeClass('active'); $(e).addClass('active'); }); ``` --- class: center, middle # Enter Frameworks ![Frameworks](/presentations/images/frameworks.jpg) --- # React Factsheet - There is XML - Declarative - Virtual DOM - Components contain markup, state, interaction (possibly style) - Top-down data flow - Ecmascript 2015 (ES6) syntax (especially classes) - Built by Facebook - Core package just for markup rendering - ReactDOM - React Native - ReactDOMServer --- # Basic React Component alert.jsx ```javascript import React from 'react'; class Alert extends React.Component { render() { const { icon, title } = this.props; return (
{title}
); } } Alert.propTypes = { icon: React.PropTypes.string, title: React.PropTypes.string, }; export default Alert; ``` --- # Wait that's XML, not Javascript -- Compiled Javascript ```javascript class Alert extends React.Component { render() { const { icon, title } = this.props; return React.createElement( "div", { className: "alert" }, React.createElement("i", { className: `fa fa-${ icon }` }), title ); } } ``` --- # Keeping State ```javascript class Toggle extends React.Component { constructor() { this.state = { open: false }; } toggle() { this.setState({ open: !this.state.open }); } render() { let content = ''; if (this.state.open) { content =
; } return (
Toggle
{content}
); } } ``` --- # Composing with Containers ```javascript import Alert from './alert.jsx'; import Layout from '../containers/layout.jsx'; class Page extends React.Component { handleForm() { // magic here } render() { return (
); } } ``` --- # Looping ```javascript class TodoList extends React.Component { render() { return (
{this.props.items.map(item => (
{item.text}
))}
); } } ``` --- # JSX annoyances ```javascript class Alert extends React.Component { render() { return ( {/* must return 1 element */}
{/* class is reserved word */}
{/* style must be JS object */}
hi
{/* all html tags must be closed */}
{/* comment syntax is weird */}
A small note here
); } } ``` --- # What I like about React * Declarative => predictable * Small, reusable components * Hot new JS syntax + editor linting * Great ecosystem * Hot Module Reloading - Time Travel --- # React Ecosystem ### Code Quality - [eslint](http://eslint.org/) - [propTypes](https://facebook.github.io/react/docs/typechecking-with-proptypes.html) - [flowtype](https://flowtype.org/) ### Data Management - [redux](https://github.com/reactjs/redux) for atomic state changes - [relay](https://facebook.github.io/relay/) Facebook bridge to GraphQL backends ### Getting Started - [react-native](https://facebook.github.io/react-native/) - [create-react-app](https://github.com/facebookincubator/create-react-app) --- # Links Inspired by [talk by Tessa Thorton](http://2015.cascadiajs.com/speakers/tessa-thorton) at CascadiaJS 2015