# Resumo playlist reactjs

**NOME** KEVIN RIBEIRO DE ANDRADE
**NUMERO** 27
**TURMA** INFOA

## TEXT RESUMO
criando projeto de react- baixar o visual code, instalar o nodejs, instalar o npx no seu terminal, escolher uma pasta onde ficara seus projetos. instalar as seguintes extensões: vscode styled-components e prettie.

comandos: npm create-react-app(cria seu projeto em react)
npm start- mostra como está o resultado do projeto no navegador padrão.

vc fará um open folder na pasta que vscode abriu.

todo html fica apenas em uma index.html dentro da pasta public. a linguagem usada no react é js e jsx(jsx é como um html só que mais rigoroso).

nos codigos html vc tem que colocar clasName ao invés de class.
pra usar o style nas divs tem que colocar como se fosse json. todas as tags tem que ser fechadas.
a gente não o link pra buscar arquivos, transformamos os codigos em funções e exportamos e importamos.
pra colocar uma variavel do jsx dentro de uma tag é necessario que a coloque como chave.

o component pode guardar informações dentro dele, os components tem estado e os components podem mudar de estado. elas muudam de estado quando vc altera o codigo delas

é interessante colocar a pasta assets e pages na pasta public(vc pode criar uma dentro do source e uma dentro da public). dentro da src tbm deve ser criada uma pasta chamada components.

pra usar rotas no seu site para navegar entre uma pagina ou outra é necessario dar npm i react-router-dom no seu terminal. depois vc importa: import { BrowserRouter, Switch, Route } from 'react-router-dom';
então vc usa as tags: ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<Switch>
<Route path="/" exact={true} component={Home}/>
<Route path="/contatos" component={Contato}/>
</Switch>
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);

isso de home e contatos variam de acordo com o seu site.

para usar o link das rotas: import { Link } from "react-router-dom";
codigo: <Link style={{color: "black"}}
to = "/"> volte para a pagina inicial.</Link>

na pasta public é onde fica tudo que será acesivel pra o site, e na SRC o cdg fonte.

há duas dormas de usar css pra estilizar o site, importando o arquvo css ou instalando e usando styled-components.
no import da imagem no bacjkgriund-image pode dar problema caso esteja com a imagem na pasta SRC.
não se pode colocar o msm nome de classe de css no react pq se não as duas vão interferir uma na outra.

no styled components vc coloca o css dentro de uma variavel, e exporta ela assim ela será como uma tag que terá varias estilizações e ele pode ser reutilizavel.

RENDERIZAÇAO

estatica- o componeete não irá exibir nada além doq esta lá.
renderização por variavel = chama uma variavwel dentro de uma função.
renderização por componente - importa o componente e o exib dentro de outro.
renderização condicional - renderiza através de valores bool e operadores logicos.
renderização por repetição = usar array para exibuição.

VARIAVEL DE ESTADO

muda o seu valor constantemente, para exibir datas é necessario uma conversão para string.

props

props são uma forma de comunicação entre componentes, eles são colocados como parametro na função.

o mapeamento no react é frito por referÊncia.

eventos

são funções que são executadas ao atingirem x condições.

paramrtro entre paginas

Você pode criar uma variavel que controlará a navegação do seu site, usando useHistory(). vc pode coloacar essa variavel dentro de um button, vc pode enviar informções junto com essse button e recebelo através de um props em um outro componenete.
também é possivel fazer isso via TAG link.

props em styled components

Dentro das crases da variavel sstyled vc usará o props em algum lugar lá dentro e assim poderá adicionar no seu componente.

## JSX

import { useState } from "react";
import { Link } from "react-router-dom";
import Contato from "../contact";


function Home() {

    let mCon = false;

    if (mCon === true)
     return <Contato />

     let tet = ["oiio", "hdsijhakl", "hahfdklahf", "kahsjdklsahjjkld"];
     
     const [br, setBr] = useState(1)

    return (
        <div>
            <h1>bolololo</h1>
            <Link to = "/contacts">vajaskdjakl</Link>

            {tet.map(item => <div> {item} </div>)}

            <div>{br}</div>
        </div>
    )
}

export default Hom

import { Link } from "react-router-dom";



function Notfound () {
    return (

        <div>
            <div>
                <h1>Qual foi amigão? tá tentando entrar onde fdp?kkkkkkk </h1>
            </div>
            <div>
                <img style={{height: "100vh", width: "100%"}} 
                src= "/assets/images/Ending-Aho-Girl.png" />
            </div>
            <Link style={{color: "black"}}
            to = "/"> volte para a pagina inicial.</Link>
        </div>
    
    )
}

export default Notfound;


import { useState } from 'react';
import './App.css';


import  Count from './Counter';
import Contato from './pages/contact';

function App() {
  const [counter, setcounter] = useState(0);

  const incrementar = ( ) => setcounter(counter + 1);
  const reset = () => setcounter(0);

 

  return (


    <div className="App">
      <Count value={counter}
      onreset = {reset}/>
     <button onClick={incrementar}> oiiiiiii</button>
    </div>
  )
}

export default App;
import "./index.css";



function Contato () {
    return (
        <div className="b">
            <button> Entre em contato conosco, fdp </button>
            <h2>asjsfdjhalfhaslkjh</h2>
        </div>
    )
}

export default Contato;

function Count (props) {
    const reset = props.onreset;

    return (
        <div style={{cursor: "pointer"}}
             onClick={reset} >       
        {props.value} 
      </div>
    )
}

export default  Count;