Skip to content

2. Conceitos do React

Jump to bottom
Adriana Lima edited this page Oct 17, 2020 · 5 revisions

Index

Vamos abrir agora o arquivo index.js, mas não faremos nenhuma outra modificação nele. Apenas para observar qual sua função.

Esse arquivo 'index.js' é responsável por renderizar nossa aplicação, através do ReactDOM. Esta é uma função nativa do React que renderiza o código na DOM que é exibida no nosso navegador. Obsevando as primeiras linhas no index.js, podemos ver a importação do React, e do ReactDOM. No index.js podemos também importa nossos estilos globais, que farão mudanças de estilo em toda a aplicação.

import React from 'react';
import ReactDOM from 'react-dom';
import './styles/global.css';

import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Depois da importação do React, ReactDOM e estilos globais, temos a importação do Componente App. Mas o que são componentes?

Components

Imagine que as aplicações em React são construídas em blocos, ou módulos. Assim, podemos criar cada elemento que compõe a aplicação em uma pasta e arquivo separado só pra ele, e depois juntar tudo em um arquivo só.

O arquivo 'App.js' que é um component que engloba todos os outros components, Assim o 'index' vai renderizar apenas 1 component, o App que consequentemente possui todos os outros componentes dentro dele. Imagine como se fossem umas tags em html, onde temos o body que engloba todas as outras tags.

<body>
  <section>
    <h1> Algum título </h1>
    <div> Algum conteúdo </div>
  </section>
</body>

O component App funciona como nosso body, e as outras partes também são componentes que ficam dentro dele. Veja o exemplo abaixo, onde temos 2 componentes dentro do componente App, um é o formulário onde a pessoa vai escrever a tarefa, e o outro é onde a lista de tarefas será exibida:

<App>
   <Formulario />
   <Lista />
</App>

App

Vamos abrir nosso arquivo 'App.js', para criar nosso componente App.

Conceitualmente, componentes são como funções JavaScript. Eles aceitam entradas, aqueles parâmetros mas que no React chamamos des “props”. E retornam elementos que descrevem o que deve aparecer na tela.

Apesar da função, existe também uma outra forma de criar um component no React, que é através de uma classe, chamado de 'React Class Component', e é como faremos nessa aplicação.

Vamos começar importando o React, porque toda página precisa ter a importação do React. E depois criaremos o component App no formato de class, onde dentro dela vamos renderizar alguma coisa.

import React from 'react';

export default class App extends Component {
  render() {
    return
  }
}

Array de Tarefas

Certo, agora precisamos pensar quais as funcionalidades que nossa aplicação precisa ter, para começarmos a codar. Por ser um app que lista tarefas, imaginamos que no fim, basicamente teremos um array que conterá cada tarefa, e de alguma forma conseguiremos renderizar e manipular isso em tela.

Ou seja, precisaremos ter algo assim, da qual cada nova tarefa submetida será incluída nesse array:

var Lista = [Estudar React, Fazer post no Linkedin, Limpar caixa de Email, ... ].

A questão é que no React, não temos como declararmos variáveis para conter dados que podem ser alterados. Essas alterações dinâmicas de informações seguem um conceito diferente, chamado 'Estado' (state).

Conceito de Estado Do React

O Estado é basicamente é um dado que varia com o tempo, por algum motivo. Ou seja, na nossa aplicação, nossa lista de tarefas (que é um array) será armazenado em um estado pois sempre sofrerá mudanças, quando for incluído ou excluído um item novo nele.

E toda vez que essa mudança ocorrer, o component precisa ser renderizado novamente para poder exibir essa mudança para o usuário. Mas isso pode soar muito parecido com o que acontece no java script puro, então, porque usar o React?

A resposta está no fato de que, nesse conceito de estado, o React só renderiza novamente aquilo que foi modificado. Ou seja, ele compara os novos elementos com os anteriores e somente aplica as modificações necessárias, poupando que a tela renderize toda a aplicação.

Nessa aplicação simples, pode ser que não faça muita diferença, mas em aplicações grandes, renderizar só o necessário na tela aumenta muito a performance da aplicação.

Uma ilustração para entender o estado

Vamos imaginar um copo com um pouco de água. Se eu quiser acrescentar mais água, eu não preciso esvaziar o copo primeiro para depois encher com uma quantidade de água maior que anterior.

Da mesma forma no React. O copo é o estado, e a água é a informação dentro dele. Em determinada interação, ela não precisa mudar completamente, apenas aquilo que for necessário.

Criando o Estado para a Lista de Tarefas

Para criar esse array que conterá todas as tarefas, que será sempre atualizado e que para isso precisa estar dentro de um estado, vamos incluí-lo num método chamado constructor. Ele recebe um objeto que contém as tarefas e inicia como um array vazio, pois ainda não temos nenhuma tarefa incluída.

export default class App extends Component {

    constructor(props) {
        super(props);
        this.state = {
            todos : [],
        }
    }

    render() {

        return ()
    }
}

📕 Licença

Todos os arquivos incluídos aqui, incluindo este README, estão sob Licença MIT
Criado com ❤ por Adriana Lima

Clone this wiki locally