Artigo original: A quick guide to help you understand and create ReactJS apps
Escrito por: Aditya Sridhar
Este artigo está dividido em duas partes
- A primeira parte demonstra como criar uma aplicação simples em React usando o comando 'create-react-app' da interface de linha de comando e explica a estrutura do projeto.
- A segunda parte explica um código existente que publiquei no Github. Este código demonstra o uso de componentes, a comunicação entre componentes, como realizar chamadas de HTTP e usar o React Bootstrap (bootstrap escrito para React).
Parte 1
Instale o NodeJS, se ainda não o tiver
O NodeJS é necessário, pois as bibliotecas requeridas para o React são baixadas usando o gerenciador de pacotes node (npm). Consulte este site para instalar o NodeJS.
Instale o pacote create-react-app do Node
O pacote create-react-app do Node ajuda a configurar um projeto de React. Instale o pacote globalmente usando o seguinte comando:
npm install -g create-react-app
Crie o projeto
O projeto pode ser criado usando o create-react-app. Use o comando abaixo para criar o projeto:
npx create-react-app first-react-app
first-react-app é o nome da aplicação. O comando acima cria uma pasta chamada first-react-app, que é a pasta do projeto. Para testar se tudo foi configurado corretamente, entre na pasta do projeto e inicie a aplicação com o seguinte comando:
cd first-react-app
npm start
Vá ao seu navegador e acesse o URL localhost:3000.
Você deverá ver que a aplicação em execução. Ela deve ter a aparência semelhante a esta no seu navegador:
Estrutura básica de pastas explicada
Quando você criou o projeto, deve ter notado que ele criou vários arquivos. Aqui listarei alguns dos arquivos e pastas importantes que você deve conhecer:
- package.json: este arquivo contém a lista de dependências do node necessárias.
- public/index.html: quando a aplicação é iniciada, esta é a primeira página que é carregada. Será o único arquivo html em todo a aplicação, já que o React é geralmente escrito usando JSX, sobre o qual falarei mais adiante. Além disso, este arquivo tem uma linha de código. Essa linha é muito significativa, pois todos os componentes da aplicação são carregados nesta
div. - src/index.js: este é o arquivo do JavaScript correspondente ao index.html. Ele contém a seguinte linha de código, que é muito significativa. ReactDOM.render(, document.getElementById('root'));
- A linha de código acima está informando que o componente App (tratarei do componente App em instantes) deve ser carregado em um elemento do html com o id root. Esse elemento nada mais é do que o elemento div presente no index.html.
- src/index.css: o arquivo CSS correspondente ao index.js.
- src/App.js : este é o arquivo do componente App. O componente App é o componente principal no React, que atua como um contêiner para todos os outros componentes.
- src/App.css : este é o arquivo do CSS correspondente ao Componente App.
- build: esta é a pasta onde os arquivos compilados são armazenados. Aplicações do React podem ser desenvolvidas usando tanto JSX quanto JavaScript normal em si, mas usar JSX definitivamente facilita as coisas para o desenvolvedor. 😀 No entanto, os navegadores não entendem JSX. Por isso, o JSX precisa ser convertido em JavaScript antes de ser implantado. Esses arquivos convertidos são armazenados na pasta build após serem agrupação e minificados. Para ver a pasta build, execute o seguinte comando
npm run build
Criando componentes
Um componente em React realiza uma funcionalidade específica. Uma aplicação nada mais é do que uma coleção de componentes. Cada componente pode ter vários componentes filhos e os componentes podem se comunicar entre si.
Vamos criar um componente do React agora.
Dentro da pasta src, crie um arquivo chamado FirstComponent.js e copie o seguinte código para FirstComponent.js.
import React, {Component} from 'react';
export default class FirstComponent extends Component {
constructor(props) {
super(props)
}
render() {
const element = (<div>Texto do elemento</div>)
return (<div className="comptext">
<h3>Primeiro componente</h3>
{this.props.displaytext}
{element}
</div>)
}
}
- O nome do componente é FirstComponent, que é denotado pelo nome do arquivo assim como pela declaração
export default class FirstComponent extends Component - O atributo props no construtor conterá todos os parâmetros que são passados como entrada para esse componente.
- render(): o valor de retorno dessa função é renderizado (exibido) na tela. Sempre que a função render() é chamada, a tela é rerenderizada. Isso é geralmente feito automaticamente pela aplicação. O código que se parece muito com html nessa função nada mais é do que o JSX.
O JSX parece muito com o HTML, mas possui todo o poder do JavaScript. Aqui, eu explicarei o código em JSX e o que ele está tentando fazer.
render() {
const element = (<div>Texto do elemento</div>)
return (<div className="comptext">
<h3>Primeiro componente</h3>
{this.props.displaytext}
{element}
</div>)
}
A primeira linha const element = (<div>Texto do elemento</div>) cria um elemento div e o atribui a uma constante chamada element. Essa sintaxe peculiar que você vê é apenas JSX.
Dentro da declaração de retorno, você vê a seguinte sintaxe:
<div className="comptext">
<h3>Primeiro componente</h3>
{this.props.displaytext}
{element}
</div>
Aqui, className é usado para apontar para uma classe CSS. <h3>Primeiro componente</h3> é apenas uma sintaxe de HTML normal. {this.props.displaytext} é usado para acessar um atributo chamado displaytext a partir de props (então displaytext é passado como uma entrada sempre que esse componente é chamado). Aqui, displaytext é apenas um nome personalizado que eu dei. {element} é a constante que foi criada, que, por sua vez, contém o elemento div.
Usando o componente
FirstComponent foi criado, mas ainda não está sendo usado em nenhum lugar. Vamos adicionar FirstComponent ao componente App. Aqui está o código modificado para App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import FirstComponent from './FirstComponent'
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Bem-vindo ao React</h1>
</header>
<p className="App-intro">
Para começar, edite <code>src/App.js</code> e salve para recarregar.
</p>
<FirstComponent displaytext="Dados do primeiro componente"/>
</div>
);
}
}
export default App;
FirstComponent precisa ser importado para o componente App primeiro, o que é feito na linha import FirstComponent from ‘./FirstComponent’
Então FirstComponent é adicionado ao componente App usando a linha <FirstComponent displaytext="Dados do primeiro componente"/>
Aqui displaytext é passado como um atributo para FirstComponent.
Agora, você pode executar a aplicação usando o comando npm start
Você deve ver o seguinte resultado no navegador.
Parabéns!
Agora você sabe como criar uma aplicação do React e como criar e usar componentes do React. Você também sabe um pouco sobre JSX. 🙂
A próxima parte explicará um código em React existente do GitHub. O código da parte 2 é diferente do código que escrevemos na parte 1.
Parte 2
Código
O código a seguir está sendo explicado aqui, então clone o repositório em seu computador. O repositório tem instruções sobre como clonar e configurar o código em seu computador.
URL da Aplicação
Para ver a aparência da aplicação final, você pode clicar neste URL. Isso dará uma boa ideia do que a aplicação está tentando fazer.
A aplicação se parecerá com isto em uma tela de celular:
O que a aplicação faz
A aplicação exibe uma lista de clientes. Quando um cliente é selecionado, são exibidos os detalhes do cliente selecionado. Essa é uma aplicação de página única (em inglês, SPA ou single-page application). O React é mais adequado a aplicações de página única. Elas exibem tudo dentro de uma única página.
Estrutura da aplicação explicada
Componente Customers (clientes)
Este componente exibe a lista de clientes. Ele corresponde ao arquivo src/Customers.js. Esse componente tem o seguinte construtor:
constructor(props) {
super(props)
this.state = {
selectedCustomer: 1
}
}
As props já foram explicadas, mas aqui você também vê this.state. Sempre que o estado muda, o componente é renderizado novamente. Aqui, state tem um parâmetro chamado selectedCustomer para manter o controle de qual cliente foi selecionado. Se selectedCustomer muda, então o componente e seus componentes filhos serão renderizados novamente. O construtor é usado apenas para definir props e state. Além disso, as props nunca devem ser editadas dentro de um componente.
A próxima coisa que você nota é o código a seguir:
componentDidMount() {
this.getCustomerData();
}
componentDidMount() é uma função que é chamada assim que o componente é renderizado. Portanto, ela pode ser usada para definir alguns valores iniciais, bem como carregar dados. Aqui, ela está chamando uma função de nome getCustomerData()
O próximo trecho de código que você vê é:
getCustomerData() {
axios.get('assets/samplejson/customerlist.json').then(response => {
this.setState({customerList: response})
})
};
A função getCustomerData() faz uma chamada HTTP para ler o JSON de exemplo contendo a lista de clientes de assets/samplejson/customerlist.json. Ao obter uma resposta com sucesso, o estado do sistema é alterado, atribuindo a response à customerList. Você pode se perguntar por que nunca adicionamos customerList no construtor. A razão é que você pode adicionar parâmetros dinamicamente no state em qualquer ponto do código. O único requisito é que, no construtor, pelo menos um state vazio deve ser definido.
A próxima função é a função render(), que retorna quais elementos devem ser renderizados na tela. Os principais pontos de foco na função render são:
<Button bsStyle="info" onClick={() => this.setState({selectedCustomer: customer.id})}>
Clique para ver detalhes
</Button>
Todo cliente na lista possui um botão chamado Clique para ver detalhes. O trecho de código acima indica que, sempre que o botão for clicado, o state de selectedCustomer será alterado para o id do cliente selecionado. Como o state muda aqui, o componente e seu componente filho serão renderizados novamente.
O outro trecho de código importante é:
<CustomerDetails val={this.state.selectedCustomer}/>
Esse trecho indica que CustomerDetails é um componente filho do componente Customers, além de passar o id selectedCustomer como entrada para o componente CustomerDetails
Componente CustomerDetails
Esse componente exibe os detalhes do cliente selecionado. Alguns trechos de código importantes desse componente serão explicados aqui:
componentDidUpdate(prevProps) {
// obter detalhes do cliente apenas se as props mudarem
// (as props são a entrada)
if (this.props.val !== prevProps.val) {
this.getCustomerDetails(this.props.val)
}
}
A função componentDidUpdate() é chamada sempre que o componente é renderizado novamente. Aqui, estamos chamando a função getCustomerDetails() se a entrada do componente tiver mudado quando o componente for renderizado de novo. A entrada passada para a função getCustomerDetails() é this.props.val. this.props.val, por sua vez, obtém seu valor do componente Customers (selectedCustomer foi passado como entrada para ele). Para saber se a entrada mudou, o trecho de código usado é this.props.val !== prevProps.val
getCustomerDetails(id) {
axios.get('assets/samplejson/customer' + id + '.json').then(response => {
this.setState({customerDetails: response})
})
};
A função getCustomerDetails() faz uma chamada de HTTP para obter o json de exemplo que contém os detalhes do cliente. O parâmetro id é usado para saber quais detalhes do cliente são necessários. O id nada mais é do que this.props.val. Quando a resposta é recebida com sucesso, o state desse componente é alterado atribuindo response a customerDetails.
A função render() para esse componente é bastante direta e simples, então não será coberta aqui.
Referências
create-react-app: consulte este site para aprender tudo que pode ser feito usando create-react-app
ReactJS: consulte o site do React para entender os conceitos do ReactJS. A documentação é muito boa.
React Bootstrap: consulte este site para entender como usar o React Bootstrap
axios: consulte este site para saber mais sobre como usar a biblioteca axios para fazer requisições HTTP
Parabéns novamente!
Agora, você sabe como usar componentes, como comunicar algo de um componente pai para um componente filho e um pouco sobre renderização.
Os conceitos básicos foram abordados neste artigo e espero que ele tenha sido útil para você.
Sobre o autor
O autor é um apaixonado por tecnologia que busca seguir os avanços tecnológicos. Ele também gosta de ajudar os outros com o conhecimento que tem na área.
Sinta-se à vontade para se conectar com ele pelo LinkedIn.
Você também pode segui-lo no Twitter.
Visite o site do autor.
Outros artigos relevantes do autor (em inglês)
A Quick Guide to Help you Understand and Create Angular 6 Apps