# REACT JS

#### Video 1
A primeira coisa a se fazer é instalar o pacote do npx. Para fazer isso, abrimos o terminal do Visual Studio e digitamos
`'npm i npx'`
O npx serve para nos auxiliar e facilitar na instalação de alguns pacotes do ReactJs.
Agora vamos criar nosso primeiro projeto em JS.
`'npx create-react-app {nome do projeto}'`
O comando vai instalar o template do projeto em React. Após isso abrimos a pasta recem criada pelo npx.

TOUR PELO TEMPLATE

Dentro da Pasta recem criada, nos damos de cara com algumas pastas. A primeira se chama _node_modules_ e é onde fica todos modulos que serão ultilizados em nossos projetos;
A segunda é a pasta _public_ e é onde ficará tudo que o usúario vai ter contato em nosso site. O nome da pasta é bem auto explicativo, é onde ficarão todos os arquivos públicos de nosso site;
A terceira e não menos importante se chama _src_ que é destinada a todos os arquivos restritos de nosso site. Aqui você vai deixar seus códigos, logos, scripts, etc.

Para iniciar o projeto, digitamos no terminal o comando 'npm start', repare como é semelhante ao live server que usamos no HTML 5. Por padrão o código é hospedado na porta 3000. Da para alterar a porta entrando no arquivo _packed.jason_ e na váriavel 'start' setar o comando `'set PORT 8080 &&'`;

No arquivo _Index.js_ podemos perceber que ele inicia o react em um container. Em toda nossa pasta de trabalho, só existe um arquivo HTML, que é a nossa pagína. Todo nosso site será feito em um arquivo HTML.

O react é baseado em componentes e um componente é uma função, ou seja, uma funnção no JavaScript que retorna um HTML, JSX para ser mais específico.
- Todo componente retorna uma tag mãe e essa tag comporta todo conteúdo da função;
- O atributo de formatação não é _class_ como no html comum,mas sim _className_;
- Na tag _style_, diferente do HTML, ao invés de passarmos um atributo comum como blue, em um background, passamos um objeto _jason_ que fica em { } chaves '`(style={textTransform="uppercase"})`'. OBS: Os css's não são separados por - ifém, apenas pela sua segunda palavra em letra Maiúscula;
- Para importar o css para nosso arquivo JSX, ultilizamos o import. 'import './App.css'';
- Só podemos importar arquivos de dentro da pasta _src_;

Conclusão
Desde quando misturamos JS com HTML?
O que eu fiz da minha vida?

#### Video 2