---
# System prepended metadata

title: Curso de ReactJS - Aula 1 (Introdução)

---

# Curso de ReactJS - Aula 1 (Introdução)

### O que é o React?

R: O React é uma ferramenta para desenvolvimento de Interfaces tecnológicas, como por exemplo: 

* Web (Sites)
* Mobile
* Smart TVs
* Realidade Virtual (VR)

Além disso, o React é uma biblioteca **Single Page Application**.

Qual a diferença entre aplicações React e aplicações convencionais?

R. Nas aplicações convencionais, parte da codificação Backend era responsável pela parte visual (Frontend), como o CSS, por exemplo.

Em aplicações React, a parte do Backend e Frontend são bem definidas e separadas, tendo o React como interface e interação com o usuário final e o resto, a cargo do Backend.

Fora essa diferença, o React funciona de forma mais inteligente, pois as aplicações convencionais recarregavam o HTML do zero, toda vez que a página era carregada.

E o React mantém as informações fixas da aplicação e carrega somente os dados que fazem parte da nova página acessada, sem a necessidade de reconstruir os recursos da página sempre.

Pesquisar sobre: Create React app

Assuntos abordados no curso:

* Componentização
* Hooks
* Typescript
* Tipagem e conexão com os elementos de React

---

# Curso de ReactJS - Aula 2 (Preparando o Ambiente)

### O que é o package.json?

R: Esse arquivo possui a estruturação da aplicação, como a sua versão, licença (indicando se ela é de código aberto ou não) e principalmente, as bibliotecas.

**Código para gerar o package.json:** 

```cmd
yarn init -y
```

As bibliotecas são as dependencias de terceiros que são usadas dentro da aplicação.

Uma dessas bibliotecas é o React, para adicionar ela a aplicação, basta executar o comando abaixo no terminal:

**Código para instalar a biblioteca React:** 

```cmd
yarn add react
```

Após instalar, o React vai gerar dois arquivos, o **yarn.lock** e o **node_modules**

**OBS:** O node_modules possui o código das dependencias que foram adicionadas a aplicação, logo, toda biblioteca que for adicionada e tiver outras dependencias, apareceram dentro deste arquivo.

**React-dom:** É uma biblioteca que adiciona a estrutura dos elementos HTML ao projeto, para que o React interaja melhor com eles.

Além desses recursos, precisamos de duas pastas para a aplicação, que são **public** e **src**

**Public:** Pasta que possui todos os arquivos que se comunicaram com o meio externo ao projeto, alguns exemplos são:

* index.html
* icones (favicon)
* robot.txt (arquivo que possui a descrição de quais páginas devem ser indexadas ou não pelo o Google)

---

# Curso de ReactJS - Aula 3 (Configurando o Babel)

**Para que serve o Babel?**

R: O Babel serve para interpretar a codificação em JS e tornar ela compreensivel aos navegadores.

**Como instalar o Babel na aplicação**

No terminal, executar os sguintes comandos:

```cmd
yarn add @babel/core @babel/cli @babel/preset-env -D
```

Essas três dependencias servem para os seguintes fins:

**babel/core:** Possui a maioria das funcionalidades do babel e seus recursos
**babel/cli:** Permite a execução das funções do babel por meio de comandos no terminal
**babel/preset:** Parte do babel dedicada para identificar em qual ambiente a codificação será acessada

Com isso, necessitando de mais ou menos recursos para essa compatibilidade.

**Comando para gerar codificação identificavel para os navegadores**

```cmd
yarn babel src/index.js --out-file dist/bundle.js 
```

O arquivo bundle.js gerado possui a versão para os navegadores e a validação das informações do objeto

Como o react trabalha com o HTML dentro do JavaScript é necessário instalar os **presets do React**. Como no comando abaixo:

```cmd
yarn add @babel/preset-react -D 
```
