Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Criando Componentes com ReactJS

Roger Albino
February 24, 2018

Criando Componentes com ReactJS

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

Roger Albino

February 24, 2018
Tweet

More Decks by Roger Albino

Other Decks in Programming

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