React sem frescuras!

Apresentação do framework desenvolvido pelo facebook de maneira, simples e objetiva, levantando assuntos como: Como começar, React em produção e JSX

Transcript

1. React
2. Twitter: @_viniciuspalma_ Github: viniciuspalma Facebook: viniciuswpalma
3. WE'RE HIRING
4. React é o “V” de um MVC.
5. Virtual DOM.
6. var HelloMessage = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } }); React.render(<HelloMessage name="John" />, mountNode);
7. var HelloMessage = React.createClass({ displayName: "HelloMessage", render: function() { return React.createElement("div", null, "Hello ", this.props.name); } }); React.render(React.createElement(HelloMessage, {name: "John"}), mountNode);
8. HelloMessage = React.createClass render: -> return `<div>Hello {this.props.name}</div>` React.render `<HelloMessage name="John" />`, mountNode
9. Estrutura de um componente
10. Propriedades React.render(<HelloMessage name="John" />, mountNode); <div>Hello {this.props.name}</div>; Acesso no componente através do atributo “this.props” Exemplo.:
11. Estados getInitialState: function() { return { name: this.props.name } } <div>Hello {this.states.name}</div>; Acesso no componente através do atributo “this.states” Exemplo.:
12. var HelloMessage = React.createClass({ //... clickHandler: function() { var presenterName = “Vinicius Palma”; this.setState({ name: presenterName }); }, render: function() { return <div onClick={this.clickHandler}>Hello {this.states.name} </div>; } });