## 1 Primeiro Projeto
Jonathan Fernando Costa Galo - 24 - INFO C

[toc]

## React
É uma biblioteca JavaScript para construir interfaces de usuário.
.......................
O React é usado para criar aplicativos de página única.
.......................
A reação nos permite criar componentes de Interface do Usuário
reutilizáveis
.......................
exemplo:
import React from 'react';
import ReactDOM from 'react-dom';
class Test extends React.Component {
render() {
return <h1>Hello World!</h1>;
}
}
ReactDOM.render(<Test />, document.getElementById('root'));
.......................
Customizando Componentes:
sobrescrever os estilos com outra folha de estilo, importando mais ao
final do seu arquivo style.scss.
<Button
classes={{
root: classes.root, // class name, e.g. `classes-nesting-root-x`
label: classes.label, // class name, e.g. `classes-nesting-label-x`
}}
>
classes nesting
</Button>
.......................
Neste exemplo, o componente de ordem superior withStyles() está injetando
a propriedade classes que é usada pelo componente Button.
const StyledButton = withStyles({
root: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
borderRadius: 3,
border: 0,
color: 'white',
height: 48,
padding: '0 30px',
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
},
label: {
textTransform: 'capitalize',
},
})(Button);

### Primeiros passos

(1) Localizar a pasta
(2) Open folder
(3) Criar/Entrar na pasta
(4) Abrir o terminal
(5) Instalar = npm i -g npx
(6) npm create-react-(nome que quiser)
(7) Fazer o open folder na nova pasta crtiada

### Rodar o projeto
(1) npm start
(2) Abre um servidor
(2.1) Para mudar a porta: package.json - | "start" : "set PORT=8080 && react-script start"

### Pastas
(1) node_modules (informações dos pacotes)
(2) public (as pastas publicas do site)
(3) src (codigos, fontes que gerenciam a aplicação)
(4) Aagar: Arquivos de teste. Setup e report.
*index.js:* Arquivo inicial, esta localizado com o nome de root. Esta vinculado ao html da pasta public. Nessa div amarzena todo o site.
Baseado em COMPONENTES: Componente inicial App (aquirvo/pasta App.js)
*index.html:* Tudo acontesse na div chamada root, porque é lá que é configurado o react.
*Componente-App.js:*
* Função em javascript que retorna html(html.jsx).
* Todo componente precisa retornar uma tag principal.
* Não é chmado de class e sim className.
* Style precisa ser chamado em formato jason.
* No jsx é preciso fechar as tags.
* Na hora de importar: *EXEMPLO* Import './App.css';
* Para fazer o uso de uma imagem: (1) Importa o arquivo *SRC dentro do arquivo do reactjs*. Criar uma pasta assents; (2) Copiar o endereço da imagem, em um recurso externo; (3) Salvar a imagem, colocar dentro de assents ou como recurso publico (pode ser acessado). Obs: quando coloca o caracter / ele vai buscar lá nos recursos externos.

## 2 Componentes


Componente principal: App.js
1. Deixar o projeto rodando
2. Componete é uma função que retornava um bloco de html(jsx), tambem da uma ideia de estado, é um momento atual das informaçoes que meu componete pode amazernar, ele pode guardar informaçioes dentro dele, que podem ser alteras(chamadas de estados)*VARIAVEIS DE ESTADO*. Sempre que alterar o valor de uma variavel de estado nosso componete(função)vai ser chamada novamente.
3. *EXEMPLO variavel de estado:* 
4. *Relacionamento de componentes*
4.1 Abrir uma nova pasta (counter.js) 4.2 Import na pasta *App.js*
4.3 Usar como tag + abri atributo + {nome}



5. *Componente filho conversar com componente pai*
5.1 Criar mais uma função (reset)
5.2 O filho vai chamar a função reset



## 3 Roteamento

### Organização
1. Não fixa, pode orgaizar as pastas de forma diferentes
2. *src* - assents(audio, video, imagem ), componentes, pages (home(index.js), contact(index.js))
3. *public* - assents (audio, video, imagem, fonts )

INDEX.JS > SRC/pages/home


INDEX.JS


INDEX.JS > SRC/pages/contact


### Ir de uma pagina para outra

* Configurar a navegação do projeto*

1. npm i react-router-dom
2. npm start
3. importar a pagina
4. importar alguns componetntes


5. chamar a função
5.1 para chamar a segunda rota:

6. quando não achar mostrar a imagem
6.1 criar dentro de pages uma pagina chamada notFound < index.js
6.2 baixar imagem e colocar em *assents* < imagens
6.3 importar a imagem no index.js


6.4 voltar no index.js(principal) e importar


7. Por link

8. OU SEJA: no index.js monta a estrutura de navegação
 )

9. Como deixar a configuração mais limpa
9.1 criar dentro de src: routes.js
9.2 colocar todo o codigo que acabou pesando

9.3 dentro de index.js(principal)

## 4 Estilização

*Pode usar css e styled juntos*

### CSS
1. src/assents < imagens(em public tambem)
2. contact < index.js (import index.css)
3. criar uma pasta em contact (index.css)
4. imagem de fundo (css)

4.1 se não aceitar a imagem dessa forma '../', pode jogar a imagem na pasta public e referenciar elas usando a barra '/'
5. seletor houver para trocar o funsor

6. responsividade (css)

7. Tomar cuidado quando o mesmo nome de classe
7.1 colocar um perfixo(sigla para diiferenciar)

### Styled

*Mais vantagens*
1. Derrubar o projeto/ instalar npm i styled-components
2. criar um arquivo (styled.js)
2.1 importar (styled-components)
3. Criar uma variavel (representa uma tag já formatada)
4. exportar de forma nomeavel (pode criar quantas quiser)


4.1 exportar um componente (*EX:*representado pela variavel 'titulo', o componente representa um h1 que já vem formatado)


5. &(e comercial)
6. Responsivo (não precisa do nome da variavel )