Apresentação no evento #Javou10 da JavaCE onde falei um pouco sobre minha trajetória no mundo frontend e sobre as experiências e aprendizados no mundo React.

1. Experiências e Aprendizados no
Mundo React
Wellington Costa Pereira

2. Quem sou eu?

3. ● + 4 anos de experiência com
desenvolvimento de software
● Concluindo especialização em
Engenharia de Software com Ênfase
em Padrões de Software na UECE
● Toco guitarra e jogo CS:GO nas
horas vagas :p
GitHub:
https://github.com/WellingtonCosta

5. ExtJS

6. ExtJS
● Vários componentes prontos
● Customização trabalhosa
● Dependente do Sencha Cmd
● Fat bundle

7. AngularJS

8. AngularJS
● Two-way data binding
● Angular Material Design
● Fácil componentização

9. React

10. O JSF que deu certo! hahaha
Rafael Ponte gonna cry?

11. Component-based

12. View Layer

13. Props / State

14. export default class MyButton extends React.Component {
render() {
const { text, onClick } = this.props;
return (
<div>
<button type=”button” onclick={onClick}> {text} </button>
</div>
);
}
}

15. export default class MyPanel extends React.Component {
render() {
return (
<div>
<MyButton text=”Click me!” />
</div>
);
}
}

16. export default class MyUserPanel extends React.Component {
state = { userFound: false };
fetchUser = () => {
axios.get(“http://api.github.com/users/WellingtonCosta”)
.then((response) => this.setState({ userFound: response.data ? true : false }))
.catch((error) => this.setState({ userFound: false }))
}
render() {
const { userFound } = this.state;
return (
<div>
<h1>The user <b>WellingtonCosta</b> is { userFound ? ‘found’ : ‘not found’ }</h1>
<MyButton text=”Find” onClick={this.fetchUser} />
</div>
);
}
}

17. Virtual DOM

19. JSX

20. <MyButton color="blue" shadowSize={2}>
Click Me
</MyButton>

21. Compilado para

22. React.createElement(
MyButton,
{ color: "blue", shadowSize: 2 },
"Click Me"
);

23. Outro Exemplo

24. const Customers = ({ customers }) => (
<div className="customers-grid">
<Toolbar />
<Grid rows={
customers.map(customer => (
<div className="customers-grid__row">
<div className="customers-grid__row-name">{customer.name}</div>
<div className="customers-grid__row-email">{customer.email}</div>
</div>
)
}
/>
</div>
);

25. Refatorando...

26. const CustomerRow = ({ customer: { name, email } }) => (
<div className="customers-grid__row">
<div className="customers-grid__row-name">{name}</div>
<div className="customers-grid__row-email">{email}</div>
</div>
);
const Customers = ({ customers }) => {
const list = customers.map(customer => (<CustomerRow customer={customer} />);
return (
<div className="customers-grid">
<Toolbar />
<Grid rows={list} />
</div>
);
};

27. Finalizando...

28. Thank you all!