# SESSION SIX: CHECKIN | LINGUAGEM DE PROGRAMAÇÃO
Autor: Erik Alexandre da Silva
Turma: INFOB
Número: 10

## SUBCOMPONENTES E ESTILIZAÇÃO

Para criarmos nosso próprio componente, devemos acessar a pasta ***src > new file > NomeDoArquivo.js***

Após isso, devemos **exportá-lo**:

//EXEMPLO

import React from 'react';

export default function Arquivo () {

return (
    <div>
        <h1>Div do exemplo</h1>
    </div>
)

}

Quando desejarmos **importá-lo**, devemos ir até App.JS / Index.JS e:

// EXEMPLO

import React from 'react';

import Arquivo from './LocalDoArquivo'

function App () {

    return
    (
        <Arquivo />
    );
}

Para **a criação de arquivos do tipo CSS**, devemos realizar o mesmo procedimento que os anteriores **src > new file > NomeDoArquivo.CSS**, isto é, realizando também importações e exportações

## GITHUB e VERCEL

Quando criamos um site, ele já inicia o repositório local automaticamente, todavia para criarmos um repositório online, devemos:
> **Abrir nosso perfil no Github > Clicar no botão "+" > Atribuir um nome a ele > Definí-lo como público ou privado > Create Repository.**

O GitHub gera um link automaticamente, este que devemos colocar dentro de nosso VScode.
> **Ctrl + Shift + P > git: Add Remote... > Add remote from Github > Cole o Link > Informe o Nome > Chame o arquivo que será vinculado > Commit > Atribua uma mensagem > Git: push to... > Indique o repositório remoto.**

A Vercel é uma ferramenta de upload de sites na web que vincula e baixa seus projetos do Github automaticamente, isto é, se estiver vinculado nele.

> **Overview > Import Projects > Import GIT Repository> Cole o link do Git > Selecione o Projeto > Continue.**

## ROTEAMENTO (REACT-ROUTER-DOM)

O react-router-dom faz vinculo entre páginas e mostra claramente uma das propostas do React, isto é, o "carregamento" mais rápido que o HTML.

para que isso seja possível, devemos inicialmente importar os seus componentes

//EXEMPLO

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter, Switch, Route, Link} from 'react-router-dom';

A construção do código fica do seguinte modo:

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter, Switch, Route, Link} from 'react-router-dom';

import './index.css';

import Home from  './pages/Home'

import Page1 from './pages/Page1'

import Page2 from './pages/Page2'

import NotFound from './pages/NotFound'

ReactDOM.Render (

    <React.ScritMode>

    <BrowserRouter> //Define a rota que o browser deve seguir
    
        <Switch>    //Permite escolhermos uma página
        
          <Route path="/" component={Home}/>//Determina que quando não há rotas, a página Home deve ser exibida
          
          <Route path="/pagina1" component={Page1}/> //Define a rota da página 1
          
          <Route path="/pagina2" component={Page2}/> //Define a rota da página 2
          
          <Route path="*" component={NotFound}/>     //Quando o browser não encontrar nenhuma das páginas
        </Switch>
    </BrowserRouter>

    </React.ScritMode>,
    
document.getElementById('root');

)

Por fim, o componente Link é utilizado para nos transferir de uma página a outra

//EXEMPLO

    <Link to="/Pagina1">
        Ir a página 1
    </Link>