O autor do artigo, cuja tradução estamos publicando, acredita que, infelizmente, a maioria dos guias do React existentes não presta a devida atenção às valiosas técnicas de desenvolvimento prático. Esses guias nem sempre dão à pessoa envolvida um entendimento sobre qual é a “abordagem correta” para trabalhar com o React.
Este tutorial, destinado a começar desenvolvedores com conhecimento de HTML, JavaScript e CSS, abordará os conceitos básicos do React e os erros mais comuns que um programador usando esta biblioteca pode encontrar.
Por que os desenvolvedores da Web escolhem React?
Antes de começarmos a trabalhar, digamos algumas palavras sobre por que o React pode ser considerado a melhor alternativa entre as ferramentas para o desenvolvimento de interfaces da web. Existem muitas estruturas de interface do usuário. Por que escolher reagir? Para responder a essa pergunta, vamos comparar as duas ferramentas de desenvolvimento de interface mais populares - React e Angular. Deve-se observar que a estrutura do Vue.js., que está ganhando popularidade, pode ser incluída nessa comparação, mas nos restringiremos a React e Angular.
Abordagem declarativa da descrição de interfaces
O desenvolvimento do React consiste em descrever o que precisa ser exibido na página (e não em compilar instruções para o navegador sobre como fazer isso). Isso, entre outras coisas, significa uma redução significativa na quantidade de código padrão.
A Angular, por outro lado, possui ferramentas de linha de comando que geram código de componente padrão. Isso parece um pouco diferente do que você pode esperar das ferramentas modernas de desenvolvimento de interface? De fato, estamos falando sobre o fato de haver tanto código de modelo no Angular que, para gerá-lo, até mesmo uma ferramenta especial foi criada.
No React, começando a se desenvolver, eles apenas começam a escrever o código. Não há código de componente padrão que precise ser gerado de alguma forma. Obviamente, é necessária alguma preparação antes do desenvolvimento, mas quando se trata de componentes, eles podem ser descritos como funções puras.
▍ Sintaxe clara
O código angular usa diretivas como
ng-model ,
ngIf e
ngFor . Esse código parece bastante complicado. React, por outro lado, usa a sintaxe JSX, que é percebida como HTML comum, ou seja, para iniciar o desenvolvimento do React, você não precisa aprender coisas fundamentalmente novas. Aqui está o que parece:
const Greetings = ({ firstName }) => ( <div>Hi, {firstName}</div> );
Curve Curva de aprendizado correta
A curva de aprendizado é um fator importante a ser considerado ao escolher uma estrutura de interface do usuário. Nesse sentido, deve-se notar que há menos abstrações no React do que no Angular. Se você conhece JavaScript, provavelmente pode aprender a escrever aplicativos React literalmente em um dia. Obviamente, para aprender como fazer isso da maneira certa, levará algum tempo, mas você poderá trabalhar muito, muito rapidamente.
Se você analisar o Angular, verifica-se que, se você decidir dominar essa estrutura, precisará aprender uma nova linguagem (o Angular usa o TypeScript), além de aprender a usar as ferramentas de linha de comando Angular e se acostumar a trabalhar com diretivas.
▍ Recursos do mecanismo de ligação de dados
Angular possui um sistema de ligação de dados bidirecional. Isso, por exemplo, é expresso no fato de que alterações na forma de um elemento levam à atualização automática do estado do aplicativo. Isso complica a depuração e é uma grande desvantagem dessa estrutura. Com essa abordagem, se algo der errado, o programador não pode saber exatamente o que exatamente causou o aplicativo mudar de estado.
O React, por outro lado, usa ligação de dados unidirecional. Esta é uma grande vantagem dessa biblioteca, pois está expressa no fato de que o programador sempre sabe exatamente o que levou à mudança no estado do aplicativo. Essa abordagem para ligação de dados simplifica bastante a depuração de aplicativos.
Abordagem funcional do desenvolvimento
Acredito que um dos pontos fortes do React é o fato de que essa biblioteca não força o desenvolvedor a usar classes. No Angular, todos os componentes devem ser implementados como classes. Isso leva à complexidade excessiva do código, sem dar vantagens.
No React, todos os componentes da interface do usuário podem ser expressos como conjuntos de funções puras. O uso de funções puras para formar uma interface do usuário pode ser comparado a uma lufada de ar limpo.
Agora que examinamos os motivos da popularidade do React, que, possivelmente, o levará a essa biblioteca específica ao escolher ferramentas para o desenvolvimento de interfaces de usuário, vamos continuar praticando.
Reagir a prática de desenvolvimento de aplicativos
▍Node.js
O Node.js é uma plataforma de servidor que suporta a execução de código JavaScript, cujos recursos são úteis para o desenvolvimento do React. Se você ainda não instalou esta plataforma, agora é a hora de
corrigi-la .
▍Preparação do projeto
Aqui, usaremos o pacote
create-react-app do Facebook para criar o núcleo do aplicativo React. Essa é provavelmente a abordagem mais popular para configurar um ambiente de trabalho, que permite iniciar o desenvolvimento. Graças ao
create-react-app programador coloca à sua disposição muitas ferramentas necessárias, o que elimina a necessidade de selecioná-las.
Para instalar o
create-react-app , use este comando:
npm i -g create-react-app
Em seguida, para criar o modelo do aplicativo, execute o seguinte comando:
create-react-app react-intro
Esta preparação preliminar está concluída. Para iniciar o aplicativo, execute os seguintes comandos:
cd react-intro npm start
Aqui vamos para a pasta do projeto e lançamos o servidor de desenvolvimento, que permite abrir um novo aplicativo React acessando o navegador em
http: // localhost: 3000 / .
▍ Estrutura do projeto
Vamos descobrir como o aplicativo React funciona. Para fazer isso, abra o projeto que você acabou de criar usando seu IDE (eu recomendo o
Visual Studio Code ).
Arquivo Index.html
Na pasta do projeto, abra o arquivo localizado em
public/index.html . Aqui está o que você verá fazendo isso.
Arquivo Index.htmlAqui estamos particularmente interessados na linha
<div id="root"> . É aqui que nosso aplicativo React estará localizado. Todo esse elemento será substituído pelo código do aplicativo e tudo o mais permanecerá inalterado.
Arquivo Index.js
Agora abra o
src/index.js . Esse arquivo é o que implementa o aplicativo React. E, a propósito, o código fonte do aplicativo será colocado no diretório
src .
Arquivo Index.jsAqui está a linha de código responsável pela saída do que chamamos de "aplicativo React" para a página:
ReactDOM.render(<App />, document.getElementById('root'));
Essa linha informa ao React que precisamos pegar o componente
App (falaremos sobre isso muito em breve) e colocá-lo na
root div , definida no arquivo
index.html que acabamos de examinar.
Agora vamos lidar com a construção
<App /> . É muito semelhante ao código HTML, mas é uma amostra do código JSX, que é uma sintaxe especial do JavaScript usada pelo React. Observe que essa construção começa com uma letra maiúscula
A , que é exatamente
<App /> , e não
<app /> . Isso ocorre devido à convenção de nomenclatura da entidade usada no React. Essa abordagem permite ao sistema distinguir entre tags HTML regulares e componentes React. Se os nomes dos componentes não estiverem em maiúsculas, o React não poderá exibi-los na página.
Se você planeja usar JSX em um determinado arquivo
.js , é necessário importar o React usando o seguinte comando:
import React from 'react';
Arquivo App.js
Agora estamos prontos para dar uma olhada no código do nosso primeiro componente. Para fazer isso, abra o
src/App.jsArquivo App.jsPara criar um componente React, você deve primeiro criar uma classe que seja descendente de
React.Component . É exatamente isso que a
class App extends Component linha
class App extends Component resolve. Todos os componentes do React devem conter uma implementação do método de
render , na qual, como você pode imaginar pelo nome, o componente é renderizado e uma descrição de sua representação visual é gerada. Este método deve retornar a marcação HTML para saída na página.
Observe que o atributo
className é o equivalente ao atributo de
class em HTML. É usado para atribuir classes CSS a elementos para estilizá-las. A
class palavra-chave JavaScript é reservada e não pode ser usada como um nome de atributo.
Vamos repetir o que acabamos de descobrir sobre os componentes:
- Seus nomes começam com uma letra maiúscula (
A no App ). - Eles estendem a classe
React.Component . - Eles devem implementar um método de
render que retorna a marcação.
Agora vamos falar sobre o que evitar ao desenvolver aplicativos React.
No. Recomendação nº 1: não é necessário usar classes de componentes em qualquer lugar
Os componentes do React podem ser criados usando duas abordagens. O primeiro é usar classes de componentes (Componente de Classe), o segundo é usar componentes funcionais (Componente Funcional). Como você deve ter notado, o exemplo acima usa classes. Infelizmente, a maioria dos tutoriais para iniciantes do React sugere usá-los.
O que há de errado em descrever componentes usando o mecanismo de classe? O fato é que esses componentes são difíceis de testar e tendem a crescer excessivamente. Esses componentes estão sujeitos ao problema de separação de responsabilidades de baixa qualidade, misturando lógica e apresentação visual (e isso complica a depuração e o teste de aplicativos). Em geral, o uso de classes de componentes leva ao fato de que o programador, figurativamente falando, "se atira no pé". Portanto, especialmente quando se trata de programadores iniciantes, eu recomendaria que eles não usassem classes de componentes.
Então, descobrimos que usar classes para descrever componentes não é uma boa ideia. Que alternativas temos? A resposta a esta pergunta são componentes funcionais. Se o componente criado usando a classe não tiver nada além do método de
render , ele será um excelente candidato para processá-lo em um componente funcional. Armado com essa idéia, vamos pensar em como melhorar o componente
App criado pela ferramenta
create-react-app :
function App() { return ( <div className="App"> ... </div> ); } export default App;
Viu o que fizemos aqui? Nomeadamente, removemos a classe e substituímos o método
render por uma construção da
function App() {...} formulário
function App() {...} . Se usarmos a sintaxe da função de seta ES6 aqui, nosso código ficará ainda melhor:
const App = () => ( <div className="App"> ... </div> ); export default App;
Transformamos a classe em uma função que retorna a marcação que precisa ser exibida na página.
Considere isso. Uma função que retorna a marcação não possui código padrão. Isso é marcação quase pura. Isso não é perfeito?
O código dos componentes funcionais é muito mais fácil de ler, trabalhando com eles, você precisa se distrair muito com os designs padrão.
Deve-se notar aqui que, embora tenhamos acabado de dizer que os componentes funcionais são preferíveis às classes de componentes, neste artigo usaremos principalmente classes, uma vez que o código das classes de componentes se mostra mais compreensível para iniciantes, depende de menos abstrações, com É mais fácil demonstrar os principais conceitos do React. Mas quando você estiver suficientemente familiarizado com o desenvolvimento de aplicativos React, é altamente recomendável levar em consideração, ao desenvolver projetos reais, o que foi dito acima. Para entender melhor os componentes funcionais - dê uma olhada
neste material .
▍ Familiaridade com propriedades
Propriedades (adereços) é um dos conceitos centrais do React. O que são "propriedades"? Para entender isso, lembre-se dos parâmetros que são passados para as funções. Em essência, propriedades são os parâmetros que são passados para os componentes. Considere o seguinte código:
const Greetings = (props) => <div>Hey you! {props.firstName} {props.lastName}!</div>; const App = () => ( <div> <Greetings firstName="John" lastName="Smith" /> </div> );
Aqui, criamos o componente
Greetings e o usamos para cumprimentar um homem chamado
John Smith do componente
App . Todo esse código resultará na seguinte marcação HTML:
<div> <div>Hey you! John Smith!</div> </div>
Chaves entre expressões em
{props.name} são usadas para destacar o código JavaScript. O componente
Greetings é passado, na forma de parâmetros, as propriedades
firstName e
lastName . Trabalhamos com eles, nos referindo às propriedades do objeto
props .
Observe que um único objeto de
lastName é
props , não dois valores que representam as propriedades
firstName e
lastName .
O código pode ser simplificado aproveitando a capacidade do ES6 de reestruturar objetos:
const Greetings = ({ firstName, lastName }) => <div>Hey you! {firstName} {lastName}!</div>;
Como você pode ver, aqui a construção
(props) foi substituída por
({ firstName, lastName }) . Com essa substituição, informamos ao sistema que estamos interessados apenas em duas propriedades do objeto
props . E isso, por sua vez, permite acessar diretamente os valores de
firstName e
lastName sem especificar explicitamente propriedades de objetos como
props.firstName .
E se, para resolver o mesmo problema, em vez de componentes funcionais, usarmos componentes baseados em classe? Nesse caso, o código do componente
Greetings ficaria assim:
class Greetings extends React.Component { render() { return ( <div>Hey you! {this.props.firstName} {this.props.lastName}!</div> ); } }
Não sei quais sensações esse código causa, mas parece-me sobrecarregado com mecanismos auxiliares. Aqui, em particular, para acessar propriedades, você deve usar construções no formato
this.props .
Principle princípio de responsabilidade exclusiva
O Princípio de Responsabilidade Única (SRP) é um dos princípios de programação mais importantes a serem seguidos. Ele nos diz que o módulo deve resolver apenas um problema e deve fazê-lo de maneira com qualidade. Se você desenvolver um projeto sem seguir somente esse princípio, o código para esse projeto poderá se transformar em um design de pesadelo que não pode ser suportado.
Como o princípio da responsabilidade exclusiva pode ser violado? Na maioria das vezes, isso acontece quando mecanismos não relacionados entre si são colocados nos mesmos arquivos. Neste material, frequentemente nos referiremos a esse princípio.
Iniciantes geralmente colocam muitos componentes em um arquivo. Por exemplo, temos o código para os componentes
Greetings e
App no mesmo arquivo. Na prática, isso não deve ser feito, pois isso viola o SRP.
Mesmo componentes muito pequenos (como o nosso componente
Greetings ) precisam ser colocados em arquivos separados.
Coloque o código do componente
Greetings em um arquivo separado:
import React from "react"; const Greetings = ({ firstName, lastName }) => ( <div> Hey you! {firstName} {lastName}! </div> ); export default Greetings;
Em seguida, use este componente no componente
App :
import Greetings from "./Greetings"; const App = () => ( ... );
Observe que o nome do arquivo deve corresponder ao nome do componente. Ou seja, o código do componente
App deve ser colocado no arquivo
App.js , o código do componente
Greetings no arquivo
Greetings e assim por diante.
▍ Familiaridade com o estado do aplicativo
Estado é outro conceito central no React. É aqui que os dados do aplicativo são armazenados - ou seja, o que pode mudar. Precisa salvar algo digitado no campo de formulário? Use state. Precisa salvar pontos marcados por um jogador em um jogo de navegador? Para fazer isso, você deve usar o estado do aplicativo.
Vamos criar um formulário simples com o qual o usuário possa inserir seu nome. Observe que aqui eu uso intencionalmente uma classe para descrever o componente, pois isso facilita a demonstração do conceito em questão. Você pode ler sobre como converter um componente criado usando uma classe em um componente funcional
aqui .
import React from "react"; class SimpleForm extends React.Component { render() { return ( <div> <input type="text" name="firstName" /> <Greetings firstName="John" /> </div> ); } } const App = () => ( <div> <SimpleForm /> </div> );
O usuário pode inserir algo no campo do formulário, e isso é bom. No entanto, se você ler atentamente esse código, poderá perceber que
John é sempre usado como o nome de usuário na saída da página de boas-vindas. E se nem todos os nossos usuários forem chamados assim? Nesse caso, colocamo-nos em uma posição não muito confortável.
Como usar o valor digitado no campo? O React não depende diretamente dos elementos DOM. Manipuladores de eventos e estado do aplicativo nos ajudarão a resolver esse problema.
class SimpleForm extends React.Component { state = { firstName: "", }; onFirstNameChange = event => this.setState({ firstName: event.target.value }); render() { return ( <div> <input type="text" name="firstName" onChange={this.onFirstNameChange} /> <Greetings firstName={this.state.firstName} /> </div> ); } }
Você pode imaginar um estado como um objeto JavaScript simples, que, na forma de uma propriedade, é armazenado na classe do componente
SimpleForm . Neste objeto, adicionamos a propriedade
firstName .
Aqui, equipamos o campo
firstName com um manipulador de eventos. Inicia toda vez que um usuário insere pelo menos um caractere em um campo. Na classe, a propriedade
onChange é responsável pelo processamento do
onFirstNameChange onChange , no qual o seguinte comando é executado:
this.setState(...)
É aqui que o estado do componente é atualizado. O status do componente não é atualizado diretamente. Isso é feito apenas usando o método
setState . Para escrever um novo valor na propriedade
firstName , simplesmente passamos para esse método um objeto contendo o que precisa ser gravado no estado:
{ firstName: event.target.value }
Nesse caso,
event.target.value é o que o usuário digitou no campo do formulário, ou seja, seu nome.
Observe que não declaramos
onFirstNameChange como um método. É muito importante que essas coisas sejam declaradas na forma de propriedades de classe que contêm funções de seta, e não na forma de métodos. Se você declarar uma função semelhante como método,
this será vinculado ao elemento do formulário que chama esse método, e não à classe, como seria de esperar. Esta pequena coisa é muitas vezes confusa para iniciantes. Esse é um dos motivos para recomendar o uso de componentes funcionais em vez de classes de componentes.
▍Verifique os dados inseridos no formulário
Implementamos um sistema simples para verificar os dados inseridos no formulário usando expressões regulares. Vamos decidir que um nome deve consistir em pelo menos três caracteres e pode conter apenas letras.
Adicione o manipulador de eventos
onBlur ao componente, que é chamado quando o usuário sai do campo de entrada. Adicione outra propriedade ao estado do aplicativo -
firstNameError . Se ocorreu um erro ao digitar o nome, exibiremos uma mensagem sobre isso no campo.
Vamos analisar esse código.
class SimpleForm extends React.Component { state = { firstName: "", firstNameError: "", }; validateName = name => { const regex = /[A-Za-z]{3,}/; return !regex.test(name) ? "The name must contain at least three letters. Numbers and special characters are not allowed." : ""; }; onFirstNameBlur = () => { const { firstName } = this.state; const firstNameError = this.validateName( firstName ); return this.setState({ firstNameError }); }; onFirstNameChange = event => this.setState({ firstName: event.target.value }); render() { const { firstNameError, firstName } = this.state; return ( <div> <div> <label> First name: <input type="text" name="firstName" onChange={this.onFirstNameChange} onBlur={this.onFirstNameBlur} /> {firstNameError && <div>{firstNameError}</div>} </label> </div> <Greetings firstName={firstName} /> </div> ); } }
Status do aplicativo
Desenvolvendo um sistema de verificação de entrada, nós, para iniciantes, adicionamos uma nova propriedade ao estado:
firstNameError :
state = { ... firstNameError: "", };
Função de validação de dados
A validação de dados é realizada na função de seta
validateName . Valida o nome digitado com uma expressão regular:
validateName = name => { const regex = /[A-Za-z]{3,}/; return !regex.test(name) ? "The name must contain at least three letters..." : ""; }
Se a verificação falhar, retornamos uma mensagem de erro da função. Se o nome passou no teste, retornamos uma string vazia que indica que nenhum erro foi encontrado durante a verificação do nome. Aqui, por uma questão de brevidade, usamos o operador ternário JavaScript.
Manipulador de eventos OnBlur
onBlur olhada no
onBlur eventos
onBlur , chamado quando o usuário sai do campo de entrada:
onFirstNameBlur = () => { const { firstName } = this.state; const firstNameError = this.validateName( firstName ); return this.setState({ firstNameError }); };
Aqui, extraímos a propriedade
firstName do estado, aproveitando a capacidade do ES6 de destruir objetos. A primeira linha deste código é equivalente a isso:
const firstName = this.state.firstName;
Em seguida, chamamos a função de verificação de dados descrita acima, passando-a
firstName e
firstNameError propriedade de estado
firstNameError que essa função retorna. Se a verificação falhar, uma mensagem de erro será enviada para esta propriedade. Se for bem-sucedido, uma linha vazia será gravada lá.
Método de renderização
Considere o método
render() do componente:
render() { const { firstNameError, firstName} = this.state; ... }
.
<input ... onBlur={this.onFirstNameBlur} />
onFirstNameBlur onBlur .
{firstNameError && <div>{firstNameError}</div>}
JavaScript.
div , , ,
firstNameError true .
▍
, , , . , :
render() { const { firstNameError, firstName } = this.state; return ( <div style={{ margin: 50, padding: 10, width: 300, border: "1px solid black", backgroundColor: "black", color: "white" }} > <div style={{marginBottom: 10}}> <label> First name: <input style={{backgroundColor: '#EFEFFF', marginLeft: 10}} type="text" name="firstName" onChange={this.onFirstNameChange} onBlur={this.onFirstNameBlur} /> {firstNameError && <div style={{color: 'red', margin: 5}}>{firstNameError}</div>} </label> </div> <Greetings firstName={firstName} /> </div> ); }
React
style .
, , , , , . , .
▍ №2:
, , React-. , , —
render , , . ? , . , , .
? , .
style , . . ,
style.js :
// style.js: const style = { form: { margin: 50, padding: 10, width: 300, border: "1px solid black", backgroundColor: "black", color: "white" }, inputGroup: { marginBottom: 10 }, input: { backgroundColor: "#EFEFFF", marginLeft: 10 }, error: { color: "red", margin: 5 } }; export default style;
, ,
SimpleComponent :
import style from './style'; class SimpleForm extends React.Component { ... render() { const { firstNameError, firstName } = this.state; return ( <div style={style.form}> <div style={style.inputGroup}> <label> First name: <input style={style.input} type="text" name="firstName" onChange={this.onFirstNameChange} onBlur={this.onFirstNameBlur} /> {firstNameError && ( <div style={style.error}>{firstNameError}</div> )} </label> </div> <Greetings firstName={firstName} /> </div> ); } } export default SimpleForm;
, . .
▍
, :
class SimpleForm extends React.Component { state = { ... lastName: "", lastNameError: "" }; validateName = ...; onFirstNameBlur = ...; onFirstNameChange = ...; onLastNameBlur = () => { const { lastName } = this.state; const lastNameError = this.validateName(lastName); return this.setState({ lastNameError }); }; onLastNameChange = event => this.setState({ lastName: event.target.value }); render() { const { firstNameError, firstName, lastName, lastNameError } = this.state; return ( <div style={style.form}> <div style={style.inputGroup}> <label> First name: <input style={style.input} type="text" name="firstName" onChange={this.onFirstNameChange} onBlur={this.onFirstNameBlur} /> {firstNameError && <div style={style.error}>{firstNameError}</div>} </label> </div> <div style={style.inputGroup}> <label> Last name: <input style={style.input} type="text" name="lastName" onChange={this.onLastNameChange} onBlur={this.onLastNameBlur} /> {lastNameError && <div style={style.error}>{lastNameError}</div>} </label> </div> <Greetings firstName={firstName} lastName={lastName} /> </div> ); } } export default SimpleForm;
— ,
firstName .
«»? — , .
▍ №3:
, , , , , . , ,
render . .
, , , .
TextField , .
import React from 'react' import style from "./style"; const TextField = ({name, onChange, onBlur, error, label}) => ( <div style={style.inputGroup}> <label> {label} <input style={style.input} type="text" name={name} onChange={onChange} onBlur={onBlur} /> {error && <div style={style.error}>{error}</div>} </label> </div> ); export default TextField;
, ,
render . , , .
SimpleForm :
... import TextField from './TextField'; class SimpleForm extends React.Component { ... render() { const { firstNameError, firstName, lastName, lastNameError } = this.state; return ( <div style={style.form}> <TextField name="firstName" label="First name:" onChange={this.onFirstNameChange} onBlur={this.onFirstNameBlur} error={firstNameError} /> <TextField name="lastName" label="Last name:" onChange={this.onLastNameChange} onBlur={this.onLastNameBlur} error={lastNameError} /> <Greetings firstName={firstName} lastName={lastName} /> </div> ); } }
, . ,
TextField .
FirstNameField :
import React from 'react'; import TextField from './TextField'; const FirstNameField = ({...rest}) => ( <TextField name="firstName" label="First name:" {...rest} /> ); export default FirstNameField;
, .
({...rest}) ( rest, ). , , ,
rest . , ,
TextField , « », spread (,
{...rest} , ).
rest , ,
TextField .
, : ,
FirstNameField TextField .
LastNameField :
:
... import FirstNameField from './FirstNameField'; import LastNameField from './LastNameField'; class SimpleForm extends React.Component { ... render() { const { firstNameError, firstName, lastName, lastNameError } = this.state; return ( <div style={style.form}> <FirstNameField onChange={this.onFirstNameChange} onBlur={this.onFirstNameBlur} error={firstNameError} /> <LastNameField onChange={this.onLastNameChange} onBlur={this.onLastNameBlur} error={lastNameError} /> <Greetings firstName={firstName} lastName={lastName} /> </div> ); } }
.
▍
, , , :
- , , , .
- . , , , , 1000 ( ).
- , . , , .
- , , , . . , , . , , , .
- , , , , .
this , .
Sumário
, React- . , , , , . , , , React, , , , UI-.
→ , ,
Caros leitores! , , React-, .
