Elliot Talks

Apresenta...

Componentes React

Agenda

  • Por que React?

  • O que são componentes

  • Principios de Componentes

  • Style componentes

Por que React?

Escrever UI

Facilitar Manutenção

Reutilizar Codigo

 

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.getElementById('hello-example')
);

Componente

O que é Componente?

Pedaços que se conectam no outro

Como?

Seguindo alguns Principios de Clean Code

KISS
DRY

KISS

Keep It Simple, Stupid​

const KissComponent = (props) => {
    return <div>{props.name}</div>
}


<KissComponente
   name="Elliot"
/>

DRY

Don't Repeat Yourself 

<KissComponente
   name="Elliot"
/>

<KissComponente
   name="Warren"
/>

Como Aproveitar o Melhor dos Componentes?

Principios de Componentes

Apresentação
Logica

Componentes de Apresentação

const ComponetToShow = ({ firstName, lastName }) => {
    return (
        <div
            style={{
                backgroundColor: '#333',
                color: '#fff',
            }}
        >
            <h2>{firstName}</h2>
            <h3>{lastName}</h3>
        </div>
    )
}

export default ComponentToShow;

Componentes de Logica

class ComponentLogic extends React.Component {
 componentDidMount() {
    featch(URL)
        .then(respponse => response.data.json())
        .then(data => {
            const {
                firstName,
                lastName,
            } = data;
            this.setState({
                firstName,
                lastName,
            });
        });
 }

 render() {
    return (
        <ComponetToShow
            firstName={this.state.firstName}
            lastName={this.state.lastName}
        />
    )
   }
}

export default ComponentLogic;

Style

Styled

- Component

- Screen

Styled Component

Styled Screen

Perguntas?

Links

  • https://reactjs.org/
  • https://speakerdeck.com/andrewsmedina/clean-code-principios-e-praticas-para-um-codigo-sustentavel
  • https://medium.com/reactbrasil/boas-pr%C3%A1ticas-na-cria%C3%A7%C3%A3o-e-separa%C3%A7%C3%A3o-de-responsabilidades-em-componentes-react-8a6921b33b5
  • https://medium.com/@joaolucasluc/comunicacao-entre-componentes-react-8574108b5043
  • https://medium.com/reactbrasil/react-estruturando-projetos-e-nomeando-componentes-b62ddad69a11
  • https://medium.freecodecamp.org/introducing-the-single-element-pattern-dfbd2c295c5d

Thanks...

Elliot Talks - React Components

By Enieber Cunha

Elliot Talks - React Components

  • 759