Pensando em React

Um dos pontos importantes na hora de aprender React é trabalhar no modo que ele espera a “componentização” do conteúdo, esse processo inicia a partir da construção dos mocks.

Passo 1 – Iniciando como um mock

Imagine que você tem a seguinte tela:

mock-portfolio

Como criaríamos componentes com esse mock?

No caso acima temos uma coleção de portfólio, um componente job, com: foto, descrição, url, empresa, Design, e tecnologias. Vamos considerar que toda esta coleção está em um JSON:

E o nosso componente básico é o seguinte:

componente-mock

Seguindo essa estrutura inicialmente nosso componentes com suas hierarquias serão os seguintes:

  • PortifolioList
    • PortifolioItem

Por que falamos em hierarquias? No caso podemos ter componentes que carregam outros componentes, mas isso não impede de outros elementos carregarem o mesmo componente.

Passo 2 – Construindo uma versão estática com React

No post anterior, trabalhamos com “React.createClass” nesse tutorial vamos utilizar um cara chamado “React.Component” ele trabalha de uma forma diferente com ele criamos um classe que estendem de React.Component lembrando que para trabalhar com classes precisamos do babel para rodar o nosso ECMAScript 2015 e o React. Vamos começar pelo item mais básico o PortfolioItem, primeiramente considerando o mock que construímos o seguinte HTML:

Agora vamos passar o nosso HTML para o um componente:

Apenas adicionei o PortfolioItem com HTML estático só para mostrar como funciona o React.Component, notem que trocamos a propriedade class por className isso é necessário para não termos conflitos com a palavra reservada class, mas as informações estão estáticas precisamos carregar as informações dinamicamente, a cada chamada do componente ele precisa ter uma informação diferente, então vamos lá:

No código acima utilizamos o “{}” para especificar que é uma variável dinâmica this.props. acessa os parâmetros que foram passado para o componente, nesse caso chamamos o componente da seguinte forma:

Assim o atributo nome passado no componente acessamos dentro do componente {this.props.nome}, nosso exemplo completo com PortfolioItem e PortfolioList fica da seguinte forma:

No código acima adicionei o JSON como uma constante do nosso componente o ideal que essas dados venha de alguma API. Na sequência leio o JSON e crio um array com componentes PortfolioItem e no render eu apenas passo o array que montamos {jobsList}. Por fim chamamos o ReactDOM.render passando o PortfolioList como o elemento que iremos adicionar o componente.

O nosso HTML fica da seguinte forma:

Podemos organizar melhor o nosso componente PortfolioList, podemos adicionar funções para organizar o seu comportamento, como no código abaixo:

Na atualização do componente adicionamos uma função “_getJobs” responsável para carregar os trabalhos, separamos a lógica de ler os dados da lógica de renderizar os dados. Também usei alguns recursos novos do ECMAScript2015.

Podemos evoluir esse post, mas pretendo ir evoluindo estes exemplos em outros posts, por isso adicionei um repositório no git: https://github.com/fellyph/react-tutorial

Uma resposta para “Pensando em React”

Deixe uma resposta