No primeiro dia do minicurso, apresentei alguns conceitos primordiais no ReactJS, também dei a explicação de diversos conceitos de uma forma bastante detalhada para que os alunos conseguissem um entendimento melhor não só da prática, mas também da teoria e tudo que acontece por "de trás" dos panos no React, as abordagens desse primeiro dia foram as seguintes:
- Oque é o Node.js e React JS?
- Gerenciador de pacotes (NPM e Yarn)
- Criação de um projeto React com node
- Estrutura de um projeto com o React
- Oque é o JSX?
- Componentização e props
- Hooks do React
- Renderização condicional
Além de todos esses conceitos explicados, ainda fomos pra prática e mostrei tudo detalhadamente dando exemplos comuns que podem ocorrer na rotina normal de um desenvolvedor Front-end.
No segundo dia do minicurso, apresentei o restante dos conceitos primordiais no ReactJS, também dei a explicação desses conceitos de uma forma bastante detalhada para que os alunos conseguissem um entendimento melhor não só da prática, mas também da teoria e tudo que acontece por "de trás" dos panos no React, as abordagens desse segundo dia foram as seguintes:
- Consumo de módulos externos
- Consumo de API com Axios
- Rotas com React Router DOM
- Projeto para fixação e portfólio
Além de todos esses conceitos explicados, ainda fomos para a prática e criamos um projeto do zero ao deploy abordando todos os conceitos que foram explicados durante o minicurso e que também servirá de portfólio para os alunos.
Tecnologias | Projeto | Deploy do Projeto | Como executar
Esse projeto foi desenvolvido com as seguintes tecnologias:
Esse projeto foi desenvolvido para repassar conhecimentos aos alunos durante o minicurso que fui ministrante (Introdução e Conceitos Primordiais com ReactJS), o projeto consiste em uma aplicação simples consumindo a Rick and Morty API que é uma apli pública e pondo em prática todos os conceitos que foram dados durante o minicurso (useState, useEffect, uso de bibliotecas externas, Axios, renderização condicional, rotas com React Router DOM, componentização e etc).
Você pode ver o funcionamento através desse link.
- Clone o repositório
- Instale o NPM
- Instale as dependências com
npm installno terminal - Inicie o projeto com
npm starte após isso abra olocalhost:3000no seu navegador - Fique a vontade para explorar e testar as funcionalidades do projeto