LETS REACT ?

LETS REACT ?

1. CREATE REACT APP

   • Creat React é um site que te auxilia na hora da criação do seu projeto.Ele ja adiciona tudo que você precisa para inciar seu App react, com pacotes padrões inciais.Tipo um CLI . Segue o site : https://create-react-app.dev/docs/getting-started/

2. JSX

   • É a extensão dos arquivos(caso Typscript, fica em TSX). Que significa JavaScript XLM, que te permite escrever HTML com JS e depois tudo é convertido na triéde padrão

3. COMPONENTES

   • CLASS COMPONENTS
     • Uma das formas de declarar seus compontes. Porem é um metodo "antigo" que ja não tem tantas atualizações como seu amigo. Veja forma de como declarar uma Class Component
   • FUNCTIONAL COMPONENTS
     • O Irmão favorito. A forma mais utilizada e até sucessor do Class Component. Tambem funciona pra declarar seus componente, porem a Function Component como é chamada, é mais atual e como informado pelos Desenvolvedores do Reacr , essa é utilizada com mais recorencia e a que recebera mais autlizações, diferente da Class componente. Veja ao lado como declarar uma Function Component

4. PROPS VS STATE

   • PROPS X STATE, parecidos mas com toques/funções diferentes. Props são passadas para o componente(tipo parametros de uma função), ja o State é gerenciado dentro de um componente( parecido com variaveis declaradas em funções )

5. CONDITIONAL RENDERING

6. COMPONENT LIFE CYCLE

7. LIST AND KEYS

8. COMPOSITION VS INHERITANCE

9. BASIC HOOKS

   • useSTATE
     • O useState serve para gerenciar o estado(state) de um componente, por isso é interessante sempre deixar bem organizado. E seu retorno é uma matriz com dois elementos: o valor do estado atual e a função pra atualizar o estado
       • • *Porem com auxilio de pacotes facilita e tras mais versatilidade do useState. Tais eles como o Atom e o Recoil
   • useEFFECT
     • o useEffect muito usado ou sempre usado em aplicações, sua função é de executar 'efeitos colaterais'(conforme diz a documentação), que por exemplo, são de buscar informações em APIs, mudar alguma coisa no DOM e por ai vai
       • • *Esse http esta vindo de um componente axios com a URLBASE
   • Praticamente como sua tradução literal, ele é um gancho, nos ajudam a organizar a lógica que será usada em um componente( Por boa pratica, e pra organizar é interresante ter um Arquivo/pasta pra organizar os Hooks da sua aplicação
     • • Cada use é um hook diferente

10. AVANÇADOS *

    • HOOKS
      • HOOKS COMUNS
        • useCALLBACK
          • Ele trabalha com o principio de MEMORIZATION, e como seu nome diz, entrega um CALLBACK memorizado baseado em um array de argumentos. Com isso o React só vai recalcular o callback quando algum argumento for alterado. Isso é extremamente util pra diversar formas pra assim evitar renderizações desnecessárias
            • MEMORIZATION.Uma função memoizada “guarda” os resultados correspondentes para um conjunto de entradas específicas. As próximas chamadas com as entradas guardadas retornaram o resultado guardado ou invés de recalculá-los.
        • useREF
          • É o hook que vai te ajudar a trabalhar com a nova API de contexto. UseContext funciona como um consumir, ele assina as alterações do contexto e apenas tem acesso a leitura. Todo o componente que chama useContext será renderizado quando alguma informação do contexto for atualizada.
        • useMEMO
          • useREDUCER !!!!!
            • useCONTEXT
              • É o hook que vai te ajudar a trabalhar com a nova API de contexto. UseContext funciona como um consumir, ele assina as alterações do contexto e apenas tem acesso a leitura. Todo o componente que chama useContext será renderizado quando alguma informação do contexto for atualizada.
            • ENTRE OUTRAS
            • useReducer geralmente é preferível useState quando você tem lógica de estado complexa que envolve vários subvalores ou quando o próximo estado depende do anterior. O useReducer também permite otimizar o desempenho de componentes que acionam atualizações profundas.
          • Ele recebe uma função create e um array de argumentos que serão usados para comparação. A função que useMemo recebe será executada junto com a renderização, o ideal é que você não faça nada que não faria junto com a renderização.OBS: o ideal é que seus componentes funcionem sem useMemo — depois adicione-o para otimizar o desempenho.
    • CONTEXT
      • Context é uma maneira de passar os dados pela "arvore" de componentes sem ter que ficar passando PROPS manualmente em todo lugar, facilitando bastante o trabalho do DEV
    • REFS
      • Refs fornecem uma maneira de acessar nós DOM ou elementos React criados no método render ( Na maioria das vezes o DOM em si ). Porem tem que tomar cuidado com a utilização de REFS pois pode se complicar ao decorrer de um projeto e tambem pelo fato de ela estar Refs fornecem uma maneira de acessar nós DOM ou elementos React criados no método de renderização
    • RENDER PROPS
      • Como ja falamos aqui sobre o PROPS é o mesmo esquema. O termo “render prop” refere-se a uma técnica para compartilhar código entre componentes React usando uma prop cujo valor é uma função.
    • HIGH ORDER COMPONENTS
      • Um componente de ordem superior (HOC) é uma técnica avançada no React para reutilizar a lógica do componente. HOCs não fazem parte da API React, por si só. Eles são um padrão que emerge da natureza composicional do React. Concretamente, um componente de ordem superior é uma função que recebe um componente e retorna um novo componente.
    • PORTALS
      • Os portais nada mais são que uma nova maneira de renderizar um componente React em um nó da DOM que está fora da hierarquia do componente pai.
    • ERROR BOUNDARIES
      • Os error Boundaries são componentes do React que capturam erros de JavaScript em qualquer lugar em sua árvore de componentes filho, registram esses erros e exibem uma interface do usuário de fallback em vez da árvore de componentes que falhou. Os error Boundaries capturam erros durante a renderização, em métodos de ciclo de vida e em construtores de toda a árvore abaixo deles.
    • FIBER ARCHITECTURE
      • Já ouviu o termo trocar a roda com o carro em movimento ? É isso que o React fez implementando a fiiber Architecture, tambem conhecida como React Fibe. Que simplesmente a galera do Facebook reescreveu completamente os componentes internos do React desde o início, mantendo a API pública essencialmente inalterada
    • ECOSYSTEMA
      • ROUTERS
        • REACT ROUTER
          • A biblioteca mais famosa do REACT, que se trata de implementar e fazer o roteamento em sua aplicação
        • REACH ROUTER
          • Um jeito de fazer seu roteamento pequeno e simples, que ocupasse pouco espaço , ams claro suportando padrões e coisas simples. Maaaaaaaas o mesmo ja foi embora, agora o metodo se fundiu e agora é o mesmo React Router
      • SSR
        • Renderização do lado do servidor
          • NEXT JS !!!
            • Conteudo macado como interessante
            • o Nextjs busca reunir diversas funcionalidades como renderização hibrida e estática de conteúdo, suporte a TypeScript, pre-fetching, sistema de rotas, pacotes de funcionalidades e diversos plugins e exemplos para acelerar seu desenvolvimento fornecendo uma estrutura completa para você iniciar seu projeto.
          • GATSBY
            • Gatsby é uma framework escrita em JavaScript e React, cuja proposta é ajudar desenvolvedores a construir aplicações e websites de forma facilitada. O foco do Gatsby é proporcionar um desenvolvimento rápido, efetivo e performático, acima de tudo.
      • SSG
        • GERADOR DE SITES ESTATICOS
      • REACT-QUERY
        • API CALLS
          • USE-HTTP
            • Um React hook para fazer solicitações http isomórficas.
          • APOLLO
            • Apollo é uma plataforma para construir um gráfico unificado, uma camada de comunicação que ajuda você a gerenciar o fluxo de dados entre seus clientes de aplicativos (como aplicativos da Web e nativos) e seus serviços de back-end.
          • RELAY MORDERN
            • Relay é um cliente JavaScript usado no navegador para buscar dados do GraphQL. É uma estrutura JavaScript desenvolvida pelo Facebook para gerenciar e buscar dados em aplicativos React. Ele é construído com escalabilidade em mente para alimentar aplicativos complexos como o Facebook. O objetivo final do GraphQL e do Relay é fornecer interações instantâneas de resposta da interface do usuário.
            • (GRAPHQL)
          • AXIOS
            • Uma das formas mais conhecidas, o jeito mais comum do front se comunicar com o servidos, bem semelhante a API FETCH que tambem é bastante utilizada. Axios é uma API HTTP cliente baseada na interface XMLHttpRequest fornecida pelos navegadores.
          • UNFETCH ??
            • Unfetch é o polyfill de busca mínimo de 500b .
          • SUPERAGENT
            • REST API
            • Pequena biblioteca de solicitação HTTP progressiva do lado do cliente e módulo Node.js com a mesma API, compatível com muitos recursos de cliente HTTP de alto nível
        • O Podereso gerenciador de estado assíncrono, utilitarios de esdo vindo do servidor e busca de dados para TS/JS, React e por ai vai
      • FORMS
        • REACT HOOK FORM
          • React Hook Form é uma biblioteca que auxilia na criação e validação dos formulários, além de reduzir a quantidade de código desenvolvido, fazendo com que a captura de ações do formulário também seja mais objetiva. Outra facilidade que ele traz é na melhora significativa de desempenho, já que a ação de renderização também pode ser controlada. Dessa forma, apenas as alterações de entradas são rerrenderizadas, não o formulário inteiro.
        • FORMIK
          • O Formik vem com soluções testadas em batalha para validação de entrada, formatação, mascaramento, matrizes e tratamento de erros. Isso significa que você gasta menos tempo escrevendo código de formulário e mais tempo construindo sua próxima grande novidade.
        • FINAL FORM
          • Gerenciamento de estado de formulário baseado em assinatura de alto desempenho para React.
      • TESTING
        • JEST
          • Tão bom que ja vem junto como padrão kkkk. Jest é um framework de teste unitário de código aberto em JavaScript criado pelo Facebook a partir do framework Jasmine. Jest é uma das ferramentas de teste unitário mais difundidas dentro da comunidade de JavaScript.
            • • TEST, SCREEN, EXPECT um dos principais, quando o assunto é test no React (
        • REACT TESTING LIBRARY
          • Ele fornece funções utilitárias leves em cima de react-dom e react-dom/test-utils, de uma forma que encoraja melhores práticas de teste. Seu principal princípio orientador é: quanto mais seus testes se assemelham à maneira como seu software é usado, mais confiança eles podem lhe dar.E alias , ele e o JEST andam de mãos dadas, component de um ta dentro do outro e vice e versa
        • CYPRESS
          • Robusto e poderoso, tem muita coisa interessante, porém é meio complicado com os detalhes. Ele tem uma infraestrutura de testes com métricas e análises que é opcional e paga, mas o framework em si é grátis. Possui uma opção de codegen que grava os movimentos e interações que você está fazendo, transcrevendo-os para código.
      • STATE MANAGEMENT
        • CONTEXT / STATE
          • REDUX
            • MOBX
              • MobX é uma ferramenta de gerenciamento de estado de código aberto. MobX, uma biblioteca de gerenciamento de estado simples, escalável e independente, segue a implementação de programação reativa funcional (FRP) e evita estados inconsistentes, garantindo que todas as derivações sejam executadas automaticamente.
            • Redux é um contêiner de estado previsível para aplicativos JavaScript. Ele ajuda você a escrever aplicativos que se comportam de forma consistente, executados em diferentes ambientes (cliente, servidor e nativo) e são fáceis de testar.
      • STYLIZAÇÃO
        • CHAKRA UI
        • MATERIAL UI
          • Material UI é um dos melhores, pois possuem conteudos reaproveitados, entre outros. Mas todos esses são para ajudar você aos seus estilos ( Pros chegados, quase um bootstrap kkkk )
        • ANT DESIGN
        • STYLED COMPONENTS
          • EMOTICON
      • MOBILE
        • REACT NATIVE

Imágenes y archivos del mapa