React se tornou a base do desenvolvimento web moderno, celebrado por sua eficiência, flexibilidade e ecossistema robusto. Desenvolvido pelo Facebook, o React simplifica o processo de construção de interfaces de usuário interativas, permitindo que os desenvolvedores criem componentes de UI reutilizáveis.

Se você deseja criar aplicativos complexos de página única ou simplesmente aprimorar suas habilidades de desenvolvimento web, dominar o React é um recurso valioso.

Neste guia, orientaremos você através dos conceitos e etapas essenciais para começar a usar o React, incluindo a configuração do seu ambiente de desenvolvimento, a compreensão dos fundamentos do React e a criação do seu primeiro componente.

O que é reagir?

React é uma biblioteca JavaScript usada para construir interfaces de usuário, especialmente para aplicativos de página única onde você precisa de uma experiência de usuário dinâmica e interativa. Basicamente, o React permite que os desenvolvedores construam componentes encapsulados que gerenciam seu próprio estado e os compõem para criar UIs complexas. A natureza declarativa do React facilita o raciocínio sobre seu aplicativo, enquanto sua arquitetura baseada em componentes promove a reutilização e a capacidade de manutenção.

Breve história e evolução do React

React foi lançado pela primeira vez pelo Facebook em 2013 e rapidamente ganhou força devido à sua abordagem inovadora para a construção de UIs. Ao contrário das bibliotecas e estruturas tradicionais que manipulam o DOM diretamente, o React introduziu o conceito de DOM virtual. Essa abstração permite que o React otimize a renderização atualizando apenas as partes da UI que foram alteradas, levando a um desempenho mais eficiente.

Desde seu início, o React evoluiu significativamente, introduzindo recursos como ganchos, API de contexto e renderização simultânea. A biblioteca possui um ecossistema vibrante, com inúmeras ferramentas, bibliotecas e estruturas construídas em torno dela, aprimorando ainda mais suas capacidades.

Principais recursos do React

1. Arquitetura baseada em componentes: A abordagem baseada em componentes do React permite que os desenvolvedores dividam UIs complexas em partes menores e reutilizáveis, cada uma com sua própria lógica e renderização.

2. Virtual DOM: O DOM virtual é uma representação na memória do DOM real. O React usa esse DOM virtual para atualizar a UI de maneira eficiente, comparando-a com o estado anterior e aplicando apenas as alterações necessárias.

3. Sintaxe Declarativa: A sintaxe declarativa do React facilita o design de UIs, descrevendo como a UI deve ser para qualquer estado, em vez de especificar como alterar a UI.

4. Fluxo de dados unidirecional: O React impõe um fluxo de dados unidirecional, o que significa que os dados fluem dos componentes pais para os componentes filhos, tornando mais fácil rastrear e gerenciar mudanças de estado.

Configurando o Ambiente de Desenvolvimento

Antes de mergulhar no React, você deve ter um conhecimento básico de HTML, CSS e JavaScript. A familiaridade com essas tecnologias ajudará você a compreender os conceitos do React de maneira mais eficaz, já que o React se baseia nessas tecnologias fundamentais da web.

Instalando Node.js e npm

O desenvolvimento do React requer Node.js e npm (Node Package Manager), que são usados ​​para gerenciar dependências do projeto e executar ferramentas de desenvolvimento.

Como instalar Node.js e npm:

1. Baixe e instale o Node.js: Vá para o site oficial do Node.js e baixe a versão LTS (Long Term Support) mais recente para o seu sistema operacional. Este pacote de instalação inclui npm.

2. Verificar instalação: Após a instalação, abra um terminal (ou prompt de comando) e execute os seguintes comandos para verificar se o Node.js e o npm estão instalados corretamente:
   

   node -v
   npm -v

Você deverá ver os números de versão do Node.js e do npm, confirmando que a instalação foi bem-sucedida.

Criando um aplicativo React

A maneira mais fácil de começar a usar o React é usar a ferramenta create-react-app, que configura um novo projeto React com uma configuração padrão sensata.

Guia passo a passo para inicializar um novo projeto React:

1. Instale create-react-app globalmente: Abra seu terminal e execute:

   npx create-react-app my-app

Substitua my-app pelo nome do projeto desejado. Este comando cria um novo diretório com o nome fornecido e configura um projeto React dentro dele.

1. Navegue até o diretório do seu projeto:

   cd my-app

1. Iniciar o servidor de desenvolvimento:

   npm start

Este comando executa o servidor de desenvolvimento e abre seu novo aplicativo React em seu navegador padrão. Você deverá ver uma página de boas-vindas padrão do React, indicando que tudo está configurado corretamente.

Compreendendo o básico do React

Componentes são os blocos de construção de um aplicativo React. Eles encapsulam elementos e lógica da UI, facilitando o gerenciamento e a reutilização de código. Os componentes podem ser classificados em dois tipos:

1. Componentes funcionais: são funções JavaScript que retornam elementos React. Eles são frequentemente usados ​​para componentes simples e sem estado.

Exemplo:

   function Welcome(props) {
     return 
Hello, {props.name}
;
   }

1. Componentes de classe: Estas são classes ES6 que estendem React.Component e incluem um método de renderização. Eles são usados ​​para componentes mais complexos com métodos locais de estado e ciclo de vida.

Exemplo:

   class Welcome extends React.Component {
     render() {
       return 
Hello, {this.props.name}
;
     }
   }

JSX (JavaScriptXML)

JSX é uma extensão de sintaxe para JavaScript que permite escrever código semelhante a HTML em JavaScript. Torna mais fácil criar elementos e componentes do React.

Como JSX é transformado em JavaScript:

JSX não é JavaScript válido por si só. Durante o processo de construção, uma ferramenta como o Babel transforma JSX em JavaScript normal. Por exemplo:

JSX:

const element = 
Hello, world!
;

JavaScript transformado:

const element = React.createElement('h1', null, 'Hello, world!');

Adereços (Propriedades)

Props são usados ​​para passar dados de um componente pai para um componente filho. Eles são somente leitura e ajudam a tornar os componentes reutilizáveis.

Exemplo de passagem de acessórios para um componente:

function Greeting(props) {
  return 
Welcome, {props.username}!
;
}

function App() {
  return ;
}

Neste exemplo, o componente Greeting recebe uma propriedade username do componente App e o exibe.

Estado

State permite que os componentes gerenciem seus próprios dados e reajam às interações do usuário. Em componentes funcionais, o gancho useState é usado para gerenciar o estado.

Introdução ao gancho useState:

O gancho useState é uma função que retorna um array com dois elementos: o valor do estado atual e uma função para atualizá-lo.

Exemplo de gerenciamento de estado usando useState:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    

      
You clicked {count} times
       setCount(count   1)}>Click me
    
  );
}

Neste exemplo, o componente Counter mantém um estado de contagem. Clicar no botão atualiza o estado e a IU reflete o novo valor de contagem.

Construindo seu primeiro componente React

Vamos criar um componente funcional simples para exibir uma mensagem de saudação.

Exemplo passo a passo:

1. Criar um novo arquivo: No diretório src do seu projeto, crie um arquivo chamado Greeting.js.

2. Definir o componente:
   

   import React from 'react';

   function Greeting() {
     return 
Hello, React!
;
   }

   export default Greeting;

1. Renderizar o componente: Abra src/App.js e renderize o componente Saudação.

   import React from 'react';
   import Greeting from './Greeting';

   function App() {
     return (
       

         
       
     );
   }

   export default App;

Adicionando estilos básicos

Você pode estilizar seus componentes usando estilos embutidos ou arquivos CSS externos. Veja como adicionar estilos básicos:

1. Estilos embutidos:

   function StyledGreeting() {
     const style = {
       color: 'blue',
       textAlign: 'center'
     };

     return 
Hello, styled React!
;
   }

1. CSS externo: Crie um arquivo CSS (Greeting.css) no diretório src.

   .greeting {
     color: green;
     text-align: center;
   }

Importe o arquivo CSS em Greeting.js e aplique a classe:

   import React from 'react';
   import './Greeting.css';

   function Greeting() {
     return 
Hello, styled React!
;
   }

   export default Greeting;

Conclusão

React é uma biblioteca poderosa que permite aos desenvolvedores construir interfaces de usuário dinâmicas e interativas com eficiência. Neste guia, cobrimos os fundamentos do React, incluindo seus conceitos principais, configuração do ambiente de desenvolvimento, compreensão de componentes, JSX, props e estado, e construção de seu primeiro componente. Também exploramos opções de estilo para aprimorar seus componentes.