React (Netshoes)

179 visualizações

Publicada em

Talk sobre React para a Netshoes

Publicada em: Tecnologia
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
179
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
0
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

React (Netshoes)

  1. 1. qual a unidade de uma interface?
  2. 2. HTML JS CSS
  3. 3. HTML JS CSS HTML HTML HTML HTML CSS
  4. 4. HTML JS CSS
  5. 5. componentes HTML JS CSS
  6. 6. componentes let cards = [{...}, {...}, {...}] <Cards cards={cards} />
  7. 7. <Cards> import React from 'react' import Card from './Card' let Cards = (props) => <div className="cards"> {props.cards.map((card) => <Card card={card} />)} </div> export default Cards
  8. 8. <Card> import React from 'react' let Card = (props) => <div className="cards__card"> <h1>{props.title}</h1> <span>{props.description}</span> </div> export default Card
  9. 9. index.js import ReactDOM from 'ReactDOM'; import Cards from './Cards'; import data from './data.json'; let App = (props) => <Cards cards={props.cards} /> ReactDOM.render( <App cards={data.cards} />, document.getElementById(‘app') )
  10. 10. componentes HTML JS CSS
  11. 11. componentes HTMLJSCSSComponente
  12. 12. Componente
  13. 13. Componente
  14. 14. cards cardcardcard
  15. 15. <Counter> <button onClick={this.handleClick.bind(this)}>Increase</button>
  16. 16. <Counter> class Counter extends React.Component { constructor(props) { super(props) this.state = { click: 0 } } handleClick() { this.setState({clicks: this.state.clicks + 1}) } render() { return ( <span>{this.state.clicks}</span> <button onClick={this.handleClick.bind(this)}>Increase</button> ) } }
  17. 17. setState
  18. 18. setState
  19. 19. setState
  20. 20. e daí?
  21. 21. demos

×