React

React

import React from 'react';

React.render(<p>Hello</p>, document.body);

@ream88

@7sheepnet 1

1 https://twitter.com/sangramvajre/status/582740689001172992

React

#1Re-rendering

Data changing over time is theroot of all evil.

Re-renderingEvery place data is displayed is guaranteed to be up-to-date.

Re-renderingNo magical data binding.

Re-renderingNo model dirty checking.

Re-renderingNo more explicit DOM operations- everything is declarative.

Re-renderingBuilt in - Virtual DOM!

#2Components

Frameworks

— Controllers

— Directives

— Templates

— Global Event Listeners

— Models

— View Models

React

— Controllers

— Directives

— Templates

— Global Event Listeners

— Models

— View Models

?— Seperation of concerns

— MVC

Everything is a component

Components

— composable

— resuable

— maintainable

— testable

#3Single source of truth

Data flow

— no framework: any component can communicate with any other component

— Backbone: pubsub

— Angular & Ember: two-way binding

— React: one-way data flow

class CartItem extends React.Component { render() { return ( <div> <Button text="Remove" /> </div> ) }}

class Button extends ReactComponent { render() { return ( <button>{this.props.text}</button> ) }}

Props

— passed from parents to their childs

— immutable

class Button extends React.Component { render() { this.props.text = 'bar' // not working

return ( <button>{this.props.text}</button> ) }}

State

— internal only

— mutable

— can be passed as props

class CartItem extends React.Component { render() { this.setState({ text: 'Remove this item' })

return ( <div> <Button text={this.state.text} /> </div> ) }}

Events

— flow up from components

class CartItem extends React.Component { removeItem() { /* ... */ },

render() { return ( <div> <Button text="Remove" onClick={this.removeItem} /> </div> ) }}

class Button extends React.Component { render() { return ( <button onClick={this.props.onClick}>{this.props.text}</button> ) }}

Read more— @reactjs

— https://egghead.io

— https://facebook.github.io/react/index.html

— http://www.slideshare.net/AndrewHull/react-js-and-why-its-awesome

— http://www.slideshare.net/KamleshKumarSingh/react-mit

Thx!