Criando Componentes com ReactJS

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

Transcript

1. Criando Componentes com ReactJS
   

   View Slide

2. Roger Albino
   Full-stack Developer at Kazap
   @rogerAlbi rogeralbinoi roger.albino.1
   

   View Slide

3. ES6, ES7, ES8
   

   View Slide

4. Já sei!
   Mais um framework js!
   

   View Slide

5. Já sei!
   Mais um framework js!
   

   View Slide

6. É tipo Vue, Angular, Ember?
   

   View Slide

7. Não, não, não e não!
   

   View Slide

8. Não, não, não e não!
   

   View Slide

9. Framework vs Library
   

   View Slide

10. Framework vs Library
    APP
    APP
    Framework
    Library
    Library
    Library
    Library
    

    View Slide

11. ReactJS
    A JavaScript library for building user interfaces
    

    View Slide

12. View Slide

13. View Slide

14. MVC
    

    View Slide

15. View
    MVC
    

    View Slide

16. DOM Lento
    

    View Slide

17. DOM Lento
    

    View Slide

18. Virtual DOM
    DOM Lento
    

    View Slide

19. Learn once, write anywhere.
    

    View Slide

20. Web + server side rendering
    

    View Slide

21. Native Apps (Android, iOS)
    

    View Slide

22. View Slide

23. < JSX />
    

    View Slide

24. import { Component } from 'react';
    class HelloMessage extends Component {
    render() {
    return (
    
    Hello { this.props.name }
    
    );
    }
    }
    export default HelloMessage;
    

    View Slide

25. E se eu não quiser usar JSX?
    

    View Slide

26. import React, {Component} from 'react';
    class HelloMessage extends Component {
    render() {
    return React.createElement(
    'div',
    null,
    'Hello ',
    this.props.name
    );
    }
    }
    

    View Slide

27. Html no Javascript?
    const HelloWorld = ({title}) => {title}
    

    View Slide

28. const Input = () => (
    
    );
    

    View Slide

29. View Slide

30. View Slide

31. Html no Javascript?
    const Input = () => (
    
    );
    XML
    

    View Slide

32. XML no Javascript
    const Input = () => (
    
    );
    

    View Slide

33. const Input = () => (
    
    );
    const Input = () => (
    
    );
    class é uma palavra reservada
    

    View Slide

34. const Input = () => (
    
    );
    const Input = () => (
    
    );
    É obrigatório o fechamento das tags
    

    View Slide

35. CSS no Javascript?
    const Wrapper = styled.header`
    color: #212121;
    background: #f9f9f9;
    `
    const Header = ({ title }) => (
    {title}
    )
    

    View Slide

36. View Slide

37. View Slide

38. Componentes
    

    View Slide

39. View Slide

40. View Slide

41. View Slide

42. View Slide

43. Componentes no React
    

    View Slide

44. Funções
    import React, { Component } from 'react'
    const Hello = () => (
    Hello React!
    )
    export default Hello
    

    View Slide

45. Classes
    import React, { Component } from 'react'
    class Hello extends Component {
    render() {
    return (
    Hello React!
    )
    }
    }
    export default Hello
    

    View Slide

46. ReactDOM
    ReactDOM.render(
    ,
    document.getElementById('root')
    );
    

    View Slide

47. Props e State
    

    View Slide

48. Props
    
    

    View Slide

49. Props
    
    

    View Slide

50. Props
    const Input = props => (
    
    )
    
    

    View Slide

51. 
    class UserTitle extends Component {
    render() {
    return (
    {this.props.name}
    )
    }
    }
    Props
    

    View Slide

52. Props
    
    class UserTitle extends Component {
    static defaultProps = {
    name: 'Ninguém'
    }
    static propTypes = {
    name: PropTypes.string
    }
    render() {
    return (
    {this.props.name}
    )
    }
    }
    

    View Slide

53. Props
    
    class UserTitle extends Component {
    static defaultProps = {
    name: 'Ninguém'
    }
    static propTypes = {
    name: PropTypes.string
    }
    render() {
    return (
    {this.props.name}
    )
    }
    }
    

    View Slide

54. State
    class UserTitle extends Component {
    state = {
    hiddenTitle: true
    }
    toggleTitle = () => {
    this.setState((state) => ({
    hiddenTitle: !state.hiddenTitle
    }))
    }
    render() {
    return (
    
    { !hiddenTitle && ({this.props.name})}
    type="button"
    onClick={this.toggleTitle}>
    Hidden Text
    
    
    )
    }
    }
    

    View Slide

55. State
    class UserTitle extends Component {
    state = {
    hiddenTitle: true
    }
    toggleTitle = () => {
    this.setState((state) => ({
    hiddenTitle: !state.hiddenTitle
    }))
    }
    render() {
    return (
    
    { !hiddenTitle && ({this.props.name})}
    type="button"
    onClick={this.toggleTitle}>
    Hidden Text
    
    
    )
    }
    }
    

    View Slide

56. Loops
    Map, filter, reduce…
    

    View Slide

57. let users = [
    { firstName: 'Marcio', lastName: 'da Silva' },
    { firstName: ‘Olívia', lastName: 'da Silva' },
    { firstName: 'Ana', lastName: 'Almeida' }
    ]
    const listUser = () => (
    
    {users.map(({firstName, lastName}) => (
    
    Name: {firstName} {lastName}
    
    ))}
    
    )
    

    View Slide

58. let users = [
    { firstName: 'Marcio', lastName: 'da Silva' },
    { firstName: ‘Olívia', lastName: 'da Silva' },
    { firstName: 'Ana', lastName: 'Almeida' }
    ]
    const listUser = () => (
    
    {users.filter(({ lastName }) => lastName === 'da Silva')
    .map(({ firstName, lastName }) => (
    
    Name: {firstName} {lastName}
    
    ))}
    
    )
    

    View Slide

59. View Slide

60. View Slide

61. Configurações
    

    View Slide

62. create-react-app
    

    View Slide

63. npm install -g create-react-app
    // ou
    yarn global add create-react-app
    

    View Slide

64. create-react-app my-app
    cd my-app/
    npm start
    

    View Slide

65. View Slide

66. View Slide

67. View Slide

68. View Slide

69. View Slide

70. Links úteis
    • https://reactjs.org/
    
    • https://medium.com/reactbrasil
    
    • http://reactconfbr.com.br/
    

    View Slide

71. Dúvidas?
    

    View Slide

72. Dúvidas?
    

    View Slide

73. Obrigado.
    @rogerAlbi rogeralbinoi roger.albino.1
    

    View Slide