Talk sobre React para a Netshoes

2. qual a unidade de
uma interface?

6. HTML
JS
CSS

7. HTML
JS
CSS
HTML
HTML
HTML
HTML
CSS

8. HTML JS
CSS

9. componentes
HTML JS
CSS

10. componentes
let cards = [{...}, {...}, {...}]
<Cards cards={cards} />

11. <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

12. <Card>
import React from 'react'
let Card = (props) =>
<div className="cards__card">
<h1>{props.title}</h1>
<span>{props.description}</span>
</div>
export default Card

13. 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')
)

14. componentes
HTML JS
CSS

15. componentes
HTMLJSCSSComponente

16. Componente

17. Componente

18. cards
cardcardcard

19. <Counter>
<button onClick={this.handleClick.bind(this)}>Increase</button>

20. <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>
)
}
}

22. setState

23. setState

24. setState

25. e daí?

26. demos