Skip to content

📘 Guia básico de React

Responsável: Eduarda Domingos Rodrigues - 231026699

React é uma biblioteca para a criação de interfaces de usuário. Atualmente, é uma das principais ferramentas utilizadas no desenvolvimento web moderno.

Oficialmente é mantido pelo Facebook, com manutenção feita por uma equipe de 8 pessoas. É utilizado em grandes projetos como o próprio Facebook, Twitter, WhatsApp e até mesmo na Netflix.

Foi criado por um engenheiro do Facebook e, inicialmente, era usado apenas internamente. Em 2013, o projeto foi anunciado como Open Source.

O React é uma das principais ferramentas de desenvolvimento front-end. Em resumo, o React é extremamente eficiente, pois permite compor interfaces completas a partir de pequenos e isolados pedaços de código.

📦 Setup básico de uma aplicação React

Para iniciar uma aplicação React, é necessário importar duas bibliotecas principais:

  • React DOM: faz a ligação entre o React e os elementos da página, ou seja, o DOM.
  • React: contém as funcionalidades principais, como criação de elementos, manipulação de estados, entre outras.

Essas funcionalidades são o que fazem o React ser tão poderoso e popular no desenvolvimento de interfaces web modernas.

👋 Exemplo básico: Hello World em React

<!DOCTYPE html>
<html>
<head>
  <title>CDFTV – React</title>

  <!-- Importa o React -->
  <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>

  <!-- Importa o ReactDOM, que faz a ligação com o DOM da página -->
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>

  <!-- Importa o Babel, que converte JSX em JavaScript puro no navegador -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>

  <!-- Div onde o conteúdo React será exibido -->
  <div id="app"></div>

  <!-- Script com JSX que será interpretado pelo Babel -->
  <script type="text/babel">
    ReactDOM.render(
      <h1>Hello World!</h1>,
      document.querySelector('#app')
    );
  </script>

</body>
</html> 



````

Após importar as bibliotecas React e ReactDOM, criamos um container com o ID `app`, que será responsável por renderizar nossa aplicação web. É nesse container que exibimos o texto **"Hello World"** usando React.

Nos comentários do código, também é mencionada a importação do **Babel**. Mas afinal, o que é isso?

---

## 🔧 Babel

O **Babel** é um compilador de JavaScript que permite utilizar recursos modernos da linguagem — mesmo que ainda não sejam suportados por todos os navegadores.

> Em resumo: o Babel transforma JavaScript moderno em JavaScript compatível com a maioria dos navegadores. 🙂

---

## ⚡ Virtual DOM

Manipular diretamente o DOM pode ser custoso em termos de performance. Para resolver isso, o React utiliza o **Virtual DOM**, que é uma representação em memória do DOM real.

Quando há uma mudança de estado, o React:

1. Compara o novo Virtual DOM com o anterior;
2. Descobre exatamente o que mudou;
3. Atualiza **apenas os elementos necessários** no DOM real.

Isso garante uma performance muito melhor em aplicações que mudam com frequência.

---

## 📤 Passagem de Informações

Como funciona a criação de elementos no React?

Podemos usar JavaScript puro com `React.createElement`:

```html
<body>
  <div id="app"></div>
  <script type="text/babel">
    ReactDOM.render(
      React.createElement('div', null,
        React.createElement('h1', null, 'Qual seu nome?'),
        React.createElement('form', { method: 'POST' },
          React.createElement('input', { placeholder: 'Digite seu nome' }),
          React.createElement('button', { type: 'submit' }, 'Enviar')
        )
      ),
      document.querySelector('#app')
    );
  </script>
</body>

Mas essa sintaxe não é muito agradável de se trabalhar. Felizmente, o React permite usar JSX para deixar o código mais legível:

``` 


O JSX parece HTML, mas é transformado pelo Babel em `React.createElement()` por baixo dos panos.




## 🧱 Componentização

Assim como no Vue e no Angular, a **componentização** é um dos principais conceitos do React. 

**Componentes são partes independentes e reutilizáveis da interface.**

Um componente pode ser uma função JavaScript simples, desde que:

- Aceite `props` como parâmetro;

- Retorne um **React element** (normalmente em JSX).

**Exemplo:**

function Formulario({ texto }) { return (

{texto}

); }

ReactDOM.render( , document.querySelector('#app') );

```

Esse componente pode ser reutilizado e receber textos diferentes via props.

📘 Componentes de Classe vs Função

Antigamente, só componentes de classe podiam usar estado e ciclo de vida.

Mas desde a versão 16.8, com a introdução dos Hooks, componentes de função também ganharam esses poderes. Hoje em dia, a maioria dos devs prefere usar funções por serem mais simples.

--

📚 Bibliotecas Populares

  • Redux : gerenciamento de estado global.

  • React Router: controle de rotas.

  • React Intl: internacionalização (datas, números, etc).

  • React DevTools: extensão do Chrome para debug visual dos componentes.

🌐 Conclusão

O ecossistema do React é um dos maiores do mundo frontend. Há milhares de bibliotecas, ferramentas e uma comunidade extremamente ativa.

Se você quer criar interfaces modernas, performáticas e escaláveis, o React é uma excelente escolha!