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:
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:
1 2 3 4 5 6 | [{"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"]}] |
E o nosso componente básico é o seguinte:
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:
1 2 3 4 5 6 7 8 | <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> |
Agora vamos passar o nosso HTML para o um componente:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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> ) } } |
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á:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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> ) } } |
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:
1 | <PortfolioItem nome={job.nome} site={job.site} empresa={job.empresa} tecnologias={job.tecnologias} /> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | 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') ); |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!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> |
Podemos organizar melhor o nosso componente PortfolioList, podemos adicionar funções para organizar o seu comportamento, como no código abaixo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | 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> ) } } |
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
