Criando Componentes com ReactJS

Slides do evento Criando Componentes com ReactJS. GDG Mogi Guaçu.

Transcript

1. Criando Componentes com ReactJS
2. Roger Albino Full-stack Developer at Kazap @rogerAlbi rogeralbinoi roger.albino.1
3. ES6, ES7, ES8
4. Já sei! Mais um framework js!
5. Já sei! Mais um framework js!
6. É tipo Vue, Angular, Ember?
7. Não, não, não e não!
8. Não, não, não e não!
9. Framework vs Library
10. Framework vs Library APP APP Framework Library Library Library Library
11. ReactJS A JavaScript library for building user interfaces
14. MVC
15. View MVC
16. DOM Lento
17. DOM Lento
18. Virtual DOM DOM Lento
19. Learn once, write anywhere.
20. Web + server side rendering
21. Native Apps (Android, iOS)
23. < JSX />
24. import { Component } from 'react'; class HelloMessage extends Component { render() { return ( <div> Hello { this.props.name } </div> ); } } export default HelloMessage;
25. E se eu não quiser usar JSX?
26. import React, {Component} from 'react'; class HelloMessage extends Component { render() { return React.createElement( 'div', null, 'Hello ', this.props.name ); } }
27. Html no Javascript? const HelloWorld = ({title}) => <h1>{title}</h1>
28. const Input = () => ( <input class="form-control" type="text"> );
31. Html no Javascript? const Input = () => ( <input class="form-control" type="text"> ); XML
32. XML no Javascript const Input = () => ( <input class="form-control" type="text"> );
33. const Input = () => ( <input className="form-control" type=“text" /> ); const Input = () => ( <input class="form-control" type="text"> ); class é uma palavra reservada
34. const Input = () => ( <input className="form-control" type=“text" /> ); const Input = () => ( <input class="form-control" type="text"> ); É obrigatório o fechamento das tags
35. CSS no Javascript? const Wrapper = styled.header` color: #212121; background: #f9f9f9; ` const Header = ({ title }) => ( <Wrapper>{title}</Wrapper> )
38. Componentes
43. Componentes no React
44. Funções import React, { Component } from 'react' const Hello = () => ( <h1>Hello React!</h1> ) export default Hello
45. Classes import React, { Component } from 'react' class Hello extends Component { render() { return ( <h1>Hello React!</h1> ) } } export default Hello
46. ReactDOM ReactDOM.render( <Hello />, document.getElementById('root') );
47. Props e State
48. Props <input type="text" />
49. Props <input type="text" />
50. Props const Input = props => ( <input type={props.type}> ) <Input type="text" />
51. <UserTitle name="José da Silva" /> class UserTitle extends Component { render() { return ( <h1>{this.props.name}</h1> ) } } Props
52. Props <UserTitle /> class UserTitle extends Component { static defaultProps = { name: 'Ninguém' } static propTypes = { name: PropTypes.string } render() { return ( <h1>{this.props.name}</h1> ) } }
53. Props <UserTitle /> class UserTitle extends Component { static defaultProps = { name: 'Ninguém' } static propTypes = { name: PropTypes.string } render() { return ( <h1>{this.props.name}</h1> ) } }
54. State class UserTitle extends Component { state = { hiddenTitle: true } toggleTitle = () => { this.setState((state) => ({ hiddenTitle: !state.hiddenTitle })) } render() { return ( <div> { !hiddenTitle && (<h1>{this.props.name}</h1>)} <button type="button" onClick={this.toggleTitle}> Hidden Text </button> </div> ) } }
55. State class UserTitle extends Component { state = { hiddenTitle: true } toggleTitle = () => { this.setState((state) => ({ hiddenTitle: !state.hiddenTitle })) } render() { return ( <div> { !hiddenTitle && (<h1>{this.props.name}</h1>)} <button type="button" onClick={this.toggleTitle}> Hidden Text </button> </div> ) } }
56. Loops Map, filter, reduce…
57. let users = [ { firstName: 'Marcio', lastName: 'da Silva' }, { firstName: ‘Olívia', lastName: 'da Silva' }, { firstName: 'Ana', lastName: 'Almeida' } ] const listUser = () => ( <ul> {users.map(({firstName, lastName}) => ( <li> Name: <strong>{firstName} {lastName}</strong> </li> ))} </ul> )
58. let users = [ { firstName: 'Marcio', lastName: 'da Silva' }, { firstName: ‘Olívia', lastName: 'da Silva' }, { firstName: 'Ana', lastName: 'Almeida' } ] const listUser = () => ( <ul> {users.filter(({ lastName }) => lastName === 'da Silva') .map(({ firstName, lastName }) => ( <li> Name: <strong>{firstName} {lastName}</strong> </li> ))} </ul> )
61. Configurações
62. create-react-app
63. npm install -g create-react-app // ou yarn global add create-react-app
64. create-react-app my-app cd my-app/ npm start
70. Links úteis • https://reactjs.org/ • https://medium.com/reactbrasil • http://reactconfbr.com.br/
71. Dúvidas?
72. Dúvidas?
73. Obrigado. @rogerAlbi rogeralbinoi roger.albino.1