Aprenda o básico sobre reagir em 10 minutos

elemento com um ID que serve como um contêiner para um aplicativo React. Quando o React renderiza seus componentes, ele procura esse ID para renderizar. A página está vazia antes desta renderização.

O Vanilla JS, por outro lado, define a interface do usuário inicial diretamente no HTML.

Ademais, o vanilla JS cuida da funcionalidade, enquanto o HTML cuida da exibição do conteúdo (marcação).

Nos primeiros dias da Web, a separação de funcionalidade e marcação parecia lógica, pois os aplicativos eram mais simples. No entanto, à medida que a complexidade aumentava, aumentavam as dores de cabeça de manter grandes partes do código JS.

O código JS que atualiza um pedaço de HTML pode se espalhar por vários arquivos, e os desenvolvedores podem ter dificuldade em acompanhar a origem do código. Eles precisam manter as coisas em mente de todas as interações entre o código que reside em arquivos diferentes.

React classifica o código em componentes, onde cada componente mantém todo o código necessário para exibir e atualizar a interface do usuário.

A atualização da interface do usuário requer atualização do DOM ou modelo de objeto de documento (consulte Manipulação DOM usando JavaScript) É aqui que o React realmente brilha.

Se você deseja acessar o DOM no vanilla JS, é necessário primeiro encontrá-lo antes que ele possa ser usado. O React armazena os dados em variáveis ​​JS regulares e mantém seus próprios virtual DOM.

Se você deseja atualizar o DOM no JS vanilla, você deve localizar o nó apropriado e anexar ou remover manualmente os elementos. O React atualiza automaticamente a interface do usuário com base no estado do aplicativo, que discutiremos em mais detalhes na próxima seção.

Portanto, a principal razão pela qual queremos usar o React over vanilla JS pode ser resumida em uma palavra: simplicidade.

Com o vanilla JS, é fácil se perder em um labirinto de pesquisas e atualizações do DOM. A reação obriga a decompor seu aplicativo em componentes que produzem código mais sustentável.

Assim, para aplicativos complexos, você definitivamente desejará aprender o React.

Conceitos básicos de reação

Já discutimos como o React usa componentes para decompor UIs e JSX complexos para renderizar esses componentes.

Nesta seção, falaremos sobre alguns conceitos mais fundamentais do React.

Estado

Como mencionado anteriormente, o React atualiza a interface do usuário com base no estado do aplicativo. Esse estado é realmente armazenado como uma propriedade de um componente da classe React:

class Counter extends React.Component {  state = {    value: 0  };}

Suponha que tenhamos um contador e 2 botões que aumentam ou diminuem. O valor do contador é renderizado na página por meio do JSX.

O valor do contador de exibição é baseado no estado e alteramos o estado clicando em um dos botões. O Vanilla JS trata um clique no botão como um evento e o React também. Quando esse evento ocorre, chamaremos funções que aumentam ou diminuem o contador com base no botão clicado. Essas funções possuem o código que altera o estado do componente.

Aqui está um exemplo desse contador:

class Counter extends React.Component {  state = {    value: 0  };handleIncrement= () => {  this.setState(state => {     value: state.value + 1   });};handleDecrement= () => {  this.setState(state => {     value: state.value - 1   });};render() {    return (      
        
{this.state.value}
        Decrement        Increment      
    );}};

Atualizamos o estado chamando setState em cada uma das funções que manipulam um clique no botão. O contador exibido na página será atualizado em tempo real. Assim, o React recebe esse nome porque reage para indicar mudanças.

Em resumo, o React monitora automaticamente todos os estados dos componentes em busca de alterações e atualiza o DOM adequadamente.

Adereços

Podemos usar adereços (abreviação de “properties”) para permitir que os componentes conversem entre si.

Suponha que o contador no exemplo anterior represente a quantidade de um produto que um cliente deseja comprar. A loja deseja colocar um limite de 2 produtos comprados por cliente. Na finalização da compra, queremos exibir uma mensagem apropriada se o cliente tentar comprar mais de 2.

Veja como podemos fazer isso com adereços:

const Display = (props) => {   let message;   if(props.number>2){	message = ‘You’re limited to purchasing 2 max!’;   }else{	message = ‘All’s good.’;   }   return(	
message
   );};class Timer extends React.Component {   state = {	quantity: 0   }   //...code for handling button clicking, updating state, etc.    render(){        return(                    //...code for other components       );    }};

Criamos um componente funcional chamado Display e passar adereços como um parâmetro. Quando renderizamos esse componente, passamos para ele número como um atributo definido para a quantidade do produto que um cliente deseja comprar. Isso é semelhante à configuração de um atributo de uma tag HTML. Chamamos esse valor com props.number dentro Display para determinar qual mensagem retornar.

Ciclo de vida do componente

À medida que o React atualiza o DOM com base nos estados do componente, existem métodos especiais chamados métodos de ciclo de vida para fornecer oportunidades para executar ações em pontos específicos no ciclo de vida de um componente.

Eles permitem capturar componentes em um determinado momento para chamar as funções apropriadas. Esses momentos podem ocorrer antes da renderização dos componentes, da atualização, etc. Você pode explorar um métodos de ciclo de vida do componente.

Para ver os métodos do ciclo de vida em ação, confira este Pomodoro Clock Eu fiz.

O cronômetro do relógio é inicialmente definido para a duração da sessão. Quando o cronômetro da sessão é reduzido a zero, ele precisa mudar para a duração da pausa e começar a contagem regressiva a partir daí.

Como o timer é um componente, usei o método do ciclo de vida componentDidUpdate dentro do meu componente de classe principal para lidar com quaisquer alterações com handleChange():

componentDidUpdate() {    this.handleChange();}

Você pode pensar nos métodos do ciclo de vida como adicionar ouvintes de eventos no vanilla JS a um componente React.

O que você pode criar com o React?

Então agora você tem um entendimento básico do React, o que você pode construir com ele?

Já mencionamos no início deste post que o Facebook desenvolveu o React em 2011; portanto, naturalmente, a plataforma do Facebook é baseada no React. Outros aplicativos famosos que usam total ou parcialmente o React incluem Instagram, Netflix e Whatsapp.

Mas, como iniciantes do React, não queremos criar imediatamente o próximo Facebook, então aqui está uma lista de 10 idéias do projeto inicial do React para você codificar.

Se você quiser aprender mais sobre desenvolvimento web e conferir alguns exemplos de projetos React, para iniciantes, visite meu blog em 1000 Mile World.

Obrigado pela leitura e feliz codificação!