Blog fellyph cintra - react js

Pensando em React

Dominar a arte da componentização é a chave para dominar o React. Este guia prático irá guiá-lo passo a passo desde a criação de mocks até a construção de componentes reutilizáveis e escaláveis.

Comece com um mock simples:

Imagine a seguinte tela: uma coleção de portfólios, cada um com foto, descrição, URL, empresa, design e tecnologias. Todos os dados estão em um JSON.

Passo 1 – Iniciando como um mock

Imagine que você tem a seguinte tela:

como podemos montar esse component com react
como podemos montar esse component com react

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:

[{"nome": "job 1", "url": "http://fellyph.com.br/", "empresa": "Empresa 1", "designer": "Artista 1", "tecnologias": ["HTML", "CSS", "JS"]},
{"nome": "job 2", "url": "http://fellyph.com.br/", "empresa": "Empresa 2", "designer": "Artista 2", "tecnologias": ["HTML", "CSS", "JS"]},
{"nome": "job 3", "url": "http://fellyph.com.br/", "empresa": "Empresa 3", "designer": "Artista 3", "tecnologias": ["HTML", "CSS", "JS"]},
{"nome": "job 4", "url": "http://fellyph.com.br/", "empresa": "Empresa 4", "designer": "Artista 4", "tecnologias": ["HTML", "CSS", "JS"]},
{"nome": "job 5", "url": "http://fellyph.com.br/", "empresa": "Empresa 5", "designer": "Artista 5", "tecnologias": ["HTML", "CSS", "JS"]},
{"nome": "job 6", "url": "http://fellyph.com.br/", "empresa": "Empresa 6", "designer": "Artista 6", "tecnologias": ["HTML", "CSS", "JS"]}]
Code language: JSON / JSON with Comments (json)

E o nosso componente básico é o seguinte:

como podemos montar esse component com react
como podemos montar esse component com react

Seguindo essa estrutura inicialmente o nosso componente com a 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 framework.

Vamos começar pelo item mais básico o PortfolioItem, primeiramente considerando o mock que construímos o seguinte HTML:

<article class="job">
  <h4 class="title">Blog elo7</h4>
  <ul class="fetures">
    <li><a href="#" target="_blank" alt="site">linkdosite.com.br</a></li>
    <li>Empresa: Elo7</li>
    <li>Tecnologias: HTML5, CSS3, WordPress</li>
  </ul>
</article>Code language: HTML, XML (xml)

Agora vamos passar o nosso HTML para o um componente:

class PortfolioItem extends React.Component {
  render() {
    return (
      <article className="job">
        <h4 className="title">Blog elo7</h4>
        <ul className="fetures">
          <li><a href="#" target="_blank" alt="site">linkdosite.com.br</a></li>
          <li>Empresa: Elo7</li>
          <li>Tecnologias: HTML5, CSS3, WordPress</li>
        </ul>
      </article>
    )
  }
}Code language: JavaScript (javascript)

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á:

class PortfolioItem extends React.Component {
  render() {
    return (
      <article class="job">
        <h4 class="title">{this.props.nome}}</h4>
        <ul class="fetures">
          <li><a href="#" target="_blank" alt="site">{this.props.site}</a></li>
          <li>Empresa: {this.props.empresa}</li>
          <li>Tecnologias: {this.props.tecnologias}</li>
        </ul>
      </article>
    )
  }
}Code language: JavaScript (javascript)

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:

<PortfolioItem nome={job.nome} site={job.site} empresa={job.empresa} tecnologias={job.tecnologias} />Code language: HTML, XML (xml)

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:

class PortfolioItem extends React.Component {
  render() {
    return (
      <article class="job">
        <h4 class="title">{this.props.nome}}</h4>
        <ul class="fetures">
          <li><a href="#" target="_blank" alt="site">{this.props.site}</a></li>
          <li>Empresa: {this.props.empresa}</li>
          <li>Tecnologias: {this.props.tecnologias}</li>
        </ul>
      </article>
    )
  }
}

class PortfolioList extends React.Component {
  render() {
    const jobsList = [],
          data = [
          {"nome": "job 1", "site": "http://fellyph.com.br/", "empresa": "Empresa 1", "tecnologias": ["HTML", "CSS", "JS"]},
          {"nome": "job 2", "site": "http://fellyph.com.br/", "empresa": "Empresa 2", "tecnologias": ["HTML", "CSS", "JS"]},
          {"nome": "job 3", "site": "http://fellyph.com.br/", "empresa": "Empresa 3", "tecnologias": ["HTML", "CSS", "JS"]},
          {"nome": "job 4", "site": "http://fellyph.com.br/", "empresa": "Empresa 4", "tecnologias": ["HTML", "CSS", "JS"]}];

    data.forEach( function(job) {
      jobsList.push(<PortfolioItem nome={job.nome} site={job.site} empresa={job.empresa} tecnologias={job.tecnologias} />);
    });

    return (
      <div className="jobs">
        {jobsList}
      </div>
    );
  }
}

ReactDOM.render(
  <PortfolioList />, document.getElementById('portfolio')
);
Code language: JavaScript (javascript)

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 render passando o PortfolioList como o elemento que iremos adicionar o componente.

O nosso HTML fica da seguinte forma:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Pensando em React</title>
  </head>
  <body>
    <h3>Portfolio</h3>
    <div id="portfolio"></div>
    <script src="https://fb.me/react-15.1.0.js"></script>
    <script src="https://fb.me/react-dom-15.1.0.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    <script type="text/babel" src="src/js/components.js"></script>
  </body>
</html>
Code language: HTML, XML (xml)

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

class PortfolioList extends React.Component {
  _getJobs () {
    const var jobsList = [
      {"nome": "job 1", "site": "http://fellyph.com.br/", "empresa": "Empresa 1", "tecnologias": ["HTML", "CSS", "JS"]},
      {"nome": "job 2", "site": "http://fellyph.com.br/", "empresa": "Empresa 2", "tecnologias": ["HTML", "CSS", "JS"]},
      {"nome": "job 3", "site": "http://fellyph.com.br/", "empresa": "Empresa 3", "tecnologias": ["HTML", "CSS", "JS"]},
      {"nome": "job 4", "site": "http://fellyph.com.br/", "empresa": "Empresa 4", "tecnologias": ["HTML", "CSS", "JS"]}
    ];

    return jobsList.map((job) => {
      return (<PortfolioItem nome={job.nome} site={job.site} empresa={job.empresa} tecnologias={job.tecnologias} />);
    })
  }

  render() {
    const jobs = this._getJobs();
    return (
      <h3>Portfolio</h3>
      <div className="jobs">
        {jobs}
      </div>
    )
  }
}Code language: JavaScript (javascript)

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

Conteúdo relacionado


Publicado

em

, ,

por

Comentários

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *