React

Criando estrutura

npx create-react-app nome_projeto


                    Executando

    cd pasta
    npm start

Limpando código

Na pasta src acesse App.js apague tudo dentro do return da função App()
Não arrume a indentação dos parênteses isso quebra o código.

Arquivos inúteis a aplicativos simples

App.css
App.tet.js
logo.svg
setupTests.js
reportWebVitals.js <--- retirar do arquivo index.js

Trabalhando JSX

Por ser uma extensão do JS o JSX além de poder usar elementos do HTML5 deve comportar o JS, para isso dentro do render() basta apresentar { script }

Compatibilidade de funções

Nem todas as função são conveniente no react por exemplo usar um forEach para criar elementos não serve uma vez que esses elementos ficariam desordenados ao invés disso o método Array devolvendo um elemento ordenado por um .map performa perfeitamente a necessidade.
Exemplo;


                        return(
        <ul>
            {Array.of("item_1","item_2"...).map((item, index) =>
            {
                return(
                    <li key= {index}>
                        <div>
                            {item}
                        <div>
                    </l1>
                );
            }

            )
            }
        </ul>
    );

Desta forma eu tenho uma lista, previamente estruturada, e a partir dessa eu posso ter outras funções.
No exemplo acima um simples retorno de <li>.
Importante se atentar que os itens da lista devem conter uma key como atributo, permitindo ao JSX identificar os marcadores de renderização.

Para tags que se alto completam ex: input, img... basta fazer um alto fechamento:

de:
    <input placeholder="este é um exemplo"> </input>
para:
    <input placeholder="este é um exemplo" />

Estilizando react 😎

A estilização também se da através do arquivo.css
Declare a estilização na pagina do componente através do comando:

import "./arquivo.css"

Ao declarar classes no JSX substitua:
class="nome_class"
por
className="nome_class"
Já que class é uma palavra reservada pelo JS para criação de classes.

Formatando pagina

Dentro de cada componente o JSX retorna uma árvore de renderização.
Assim como não existe árvore com dois troncos não existe renderização de objetos com 2 entradas, é necessário englobar para que devolva um elemento. Esse elemento pode ser enclausurado dentro de um fragment que consiste simplesmente em uma tag vazia.


                <>
    <h1>coisa1</h1>
      <h1>coisa2</h1>
</>

Criando outros componentes

Para criar outros elementos crie uma nova pasta na pasta src a fim de guardar os novos elementos.

Crie um arquivo dentro da pasta, o arquivo pode ter a extensão .js ou .jsx
Sua estrutura básica deve ser;


                    import React , { Component } from "react";

    class nomeClasse extends Component 
    {
        render() 
        {
            return(
                <section>
                conteúdo elemento
                conteúdo elemento
                </section>
                );
        }
    }

    export default nomeClasse;

Referencie o caminho no arquivo principal "app.js".
Importe a classe no inicio do arquivo;
import nomeClasse from "./pasta/arquivo"
E dentro do return() principal referencie a classe com se fosse uma tag;
<nomeClasse/>

Como a intenção do react é reaproveitar componentes é possível renderizar elementos em outros componentes, basta realizar o import e depois referenciar a classe na renderização do elemento.

This.

Props

Os Props são os parâmetros/propriedades que são passados para componentes.
Uma função recebe parâmetros assim como um componente recebe props.
Exemplo;

    class Exemplo extends Component
    {
        render()
        {
            return(
                <p>this.props.text</p>
            )
        }
    }

    class App extends Component
    {
        render()
        {
            return(
                <Exemplo text="texto que sera visto"/>
            )
        }
    }

State

O state é um objeto onde armazenamos os estados que serão usados pelo componente. O state só pode ser utilizado pelo seu componente pois o mesmo é privado.
Criação:

    constuctor(props)
    {
        super(props);

        this.state = {}
    }

Use States

    import { useState } from 'react';

    function Contador() {
        const [cont, setCont] = useState(0);

        function addCont() {
            setCont(cont ++);
        }

    return (
        <div>
        <div>{cont}</div>
        <button onClick={addCont}>adicionar</button>
        </div>
    )
    }

    function Pagina() {return <Contador />}

Comportamentos de evento

Para inserir um evento dentro da tag declare o onChange={this.handleAção}.
O handleAção deve ser declarado como uma função dentro da classe e antes do render() como o exemplo abaixo;

    class Exemplo extends Component
    {
        handleAcao(evento)
        {
            console.log(evento.target.value)
        }

        render()
        {...
    }

bind

No JS nem sempre o this pode ser associado a um objeto pois o mesmo é dinâmico, para isso usamos o associador bind(item associado). Exemplo;

                    class Exemplo{
                        constructor(){
                this.msg = "exemplo"
                        }
                
                        entrega(){
                console.log(this.msg)
                        }
                    }
                    let ex = new Exemplo
                    
                    let evento = ex.entrega ←

Podemos ver marcado com a seta o momento em que o this é reatribuido, para evitar a reatribuição;

let evento = ex.entrega.bind(ex)

Construtores dentro de Component devem conter o super(); para referenciar ao construtor pai já que ela esta sendo extendida de outro componente.