# 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 ```