React

npx create-react-app my-app --template typescript

yarn add eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-config-prettier eslint-plugin-prettier prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser -D

"eslint.validate": [
    "javascript",
    "javascriptreact",
    { "language": "typescript", "autoFix": true},
    { "language": "typescriptreact", "autoFix": true}
],

yarn add eslint-import-resolver-typescript -D Referências

yarn add react-redux redux

yarn add -D @types/react-redux

https://www.youtube.com/watch?v=OXxul6AvXNs&t=11s

Ponto-01

import ReactDOM from 'react-dom' import React from 'react'

const tag = Olá React !!! const el = document.getElementById('root'); ReactDOM.render(

{tag}

, el);

Ponto-02

import ReactDOM from 'react-dom' import React from 'react' import './index.css'

const tag = Olá React !!! const el = document.getElementById('root'); ReactDOM.render(

{tag}

, el);

Ponto-03

export default function Primeiro() { return 'Primeiro Componente' }

como default, a function nem precisa ter nome, pode ser anonima ()

Ponto-04

import React from 'react';

export default function Primeiro() { return

Primeiro Componente

; }

em versões atuais, o import não é necessário

Ponto-05

Pode utilizar extensão js, no entanto, utilizar jsx ajuda o auto preenchimento

Ponto-06

export default function ComParametro(props) { console.log(props); return (

{props.titulo}

{props.subtitulo}

); };

Ponto-07

passar números com {}

Ponto-08

export default function ComParametro(props) { console.log(props); props.nota = 10; return (

{props.titulo}

{props.aluno}

{props.nota}

); };

Propriedades são readonly, não podem ser mudadas

Ponto-09

Em jsx não pode existe mais de um componente, logo, no mínimo deve ser envolvido com um DIV

Assim como pode utilizar um Fragmento <> </>

import React from 'react';

export default function Fragmento(props) { return ( <>

Fragmento

cuidado com esse erro

</> ) }

Neste formato não pode-se atribuir propriedade <valor="kkkk">

import React from 'react';

export default function Fragmento(props) { return ( <React.Fragment>

Fragmento

cuidado com esse erro

<React.Fragment/> ) }

Utilizando neste formato, pode-se utilizar propriedades <React.Fragment valor="kkkkk">

Ponto-10

export default _ => { return (

Fundamentos React Arrow

) }

Função Arrow que descarta o parametro

Ponto-11

export default _ =>

Fundamentos React Arrow

Forma mais reduzida

Ponto-12

import React from 'react'; import './Card.css';

export default props => { return (

Conteúdo

{props.titulo}

); };

Utilização de class, deve ser className

Ponto-13

Pode-se baixar fontes e disponibilizar colocando via link no index.html

Ponto-14

export default props => { return (

{props.titulo}

{props.children}

); };

Fundamentos React Arrow

;

Ponto-15

export default props => { return (

) }

Uma das forma de passar um parâmetro do pai para o filho

Outra forma, é repassar todo props por spread

export default props => { return (

) }

Ponto-16

<Familia sobrenome="Motton">
    <FamiliaMembro nome="Eduardo" />
    {/*
    <FamiliaMembro nome="Célia" />
    <FamiliaMembro nome="Bheatriz" />
    <FamiliaMembro nome="Henrique" />
    */}
</Familia>

Forma de comentar um código React (Atalho meu: Ctrl + ";")

Ponto-17

export default props => { return (

{React.cloneElement(props.children)}

) }

Pode utilizar como a seguir, é apenas um exemplo

import React, {cloneElement} from 'react'

/*eslint-disable */ export default props => { return (

{cloneElement(props.children)}

) }

Ponto-18

export default props => { return (

{cloneElement(props.children, {...props})}

) }

Forma de passar as props para o filho unitário

Ponto-19

export default props => { return (

{React.Children.map(props.children, child => { return cloneElement(child, props); })}

) }

Iterando sobre o array de children e passando as props do pai para cada um

Outro formato utilizando direto o array

export default props => { return (

{props.children.map(child => { return cloneElement(child, props); })}

) }

Dá um problema devido a falta de um atributo "key", que pode ser passado assim :

export default props => { return (

{props.children.map((child,i) => { return cloneElement(child, {...props, key: i}); })}

) }

Ponto-20

export default props => { const li1 =

{alunos[0].id} - {alunos[0].nome} - {alunos[0].nota}

return (

{li1}

) }

Demonstração de uma montagem manual

Ponto-22

export default props => { const li1 =

{alunos[0].id} - {alunos[0].nome} - {alunos[0].nota}

const lis = alunos.map((aluno, i) => { return

{aluno.id} - {aluno.nome} - {aluno.nota}

}) return (

{lis}

) }

Forma através de um map criado um array de "

CONCEITOS de HOOKS

useState -> estado no componente.

useEffect -> efeito colateral, dispara de acordo com as dependências.

useRef -> objeto imutável, por referência, atributo current, a modificação do mesmo não reflete em disparar nova renderização. Pode ser utilizado com atributo ref no componente HTML, onde a variável do useRef apontará diretamente para o componente HTML, podem por exemplo setar focus.

useMemo -> Retorna um valor memoizada

useCallback -> Retorna uma função memoizada; gera uma espécie de cache do componente

Exemplo de Context API

import './App.css' import React, { useState } from 'react' import { BrowserRouter as Router } from 'react-router-dom'

import Menu from '../components/layout/Menu' import Content from '../components/layout/Content'

import DataContext, { data } from '../data/DataContext'

const App = props => { const [state, setState] = useState(data)

return (

        <DataContext.Provider value={data}>
            <div className="App">
                <Router>
                    <Menu />
                    <Content />
                </Router>
            </div>
        </DataContext.Provider>

)

}

export default App

import React, { useContext } from 'react' import PageTitle from '../../components/layout/PageTitle' import SectionTitle from '../../components/layout/SectionTitle'

import DataContext from '../../data/DataContext'

const TesteContext = (props) => {

const context = useContext(DataContext);

return (
    <div className="UseContext">
        <PageTitle
            title="Hook UseContext - Teste Context"
            subtitle="Aceita um objeto de contexto e retorna o valor atual do contexto!"
        />

        <SectionTitle title="Execício #01" />
        <div className="center">
            <span className="text">{context.text}</span>
            <span className="text">{context.number}</span>
        </div>
    </div>
)

}

export default TesteContext