JulianePires / plano-aula-react-reprograma

Criação de um plano de aula de React como atividade da turma educadevas da Reprograma

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Planejamento de Aula - Introdução ao React {Reprograma}

Índice

Definição

Esse curso tem como objetivo conhecer um pouco dessa ferramenta poderosa que é o React. Durante nosso tempo de aprendizado, você terá contato com a biblioteca e aprender conceitos básicos como funcionamento, manipulação da DOM, gerenciamento de estados, componentização e muitos outros conceitos voltados para a construção de interfaces do usuário.

O que é React?

React é uma biblioteca (um conjunto de ferramentas) desenvolvida pelo Facebook e o grupo de desenvolvedores globais (é uma ferramenta open source).

Tem como base códigos em JSX que são compilados através de um transpilador (uma espécie de tradutor) chamado Babel e um bundler (junta toda a lógica e código jsx em um só) chamado Webpack.

Durante as aulas também iremos conhecer Hooks. Um conjunto de ferramentas que permitem utilizar a manipulação de eventos, estados e funções nos componentes.

Não podemos deixar de fora também o tão famigerado SPA. Veremos do que se trata essa estratégia de carregamento utilizada nos mais diversos sites e plataformas.

Pré-requisitos

Para o desenvolvimento das atividades e aplicação de conceitos durante o curso, teremos alguns pré-requisitos:

Equipamentos

Um computador com acesso à internet

Instalações

Precisamos instalar primeiramente:

Precisaremos de um gerenciador de pacotes, caso opte pelo npm, ele já vem incluso com a instalação do nodejs. Caso você opte pelo yarn, basta acessar:

Desafio

Você foi convocoda para embarcar numa jornada de criação, onde irá desenvolver uma plataforma de mentoria para conectar mulheres maravilhanes dispostas a transmitir conhecimento a outras mulheres incríveis sedentas por conhecimento.

Criaremos essa rede para nos conectar e colocarmos em prática o que aprendemos durante nossa viagem.

Estou te disponibilizando o layout e uma api para que você reproduza, no capricho, a nossa plataformosa, belê?

Você terá que entregar, ao final do curso, um projeto bem lindo no seu github (e quem sabe publicar #spoiler) pra tu já adicionar ao teu portfólindo.

Layout

Aqui está o link para o layout do nosso projetinho:

Atividades

Semana 1

Vamos dar uma olhada no nosso projetinho e dar aquele create-react-app maroto (te explico já!)
Estruturamos nossas pastinhas pra que fique bem chique o projeto da boneca

Bônus - configurar headers html, favicon e criar um contador

Semana 2

Iremos separar nosso projeto em componentes e criar os universais (botões, inputs e etc)
Criaremos nossas rotas do projeto com react router e suas respectivas telinhas (só o basiquinho)

Bônus - criar esqueleto das páginas (tags) e implementar navegação (useNavigation)

Semana 3

Instalaremos o styled components e criaremos um estilo global
Bora botar o CSS em jogo e trazer vida pra essas páginas
Tudo lindo/maravilhoso e navegante

Bônus - adicionar animações, tratamento de erro e validação do formulário

Semana 4

O bicho vai pegar! Vamos criar nossos contextos para gerenciar o estado da nossa aplicação
Criaremos nosso próprio hook (uhuuu!) para tratar os dados do formulário

Bônus - configurar um tema adicional (à sua escolha) e adicionar testes de estilo (link abaixo)

Semana 5

Pra finalmente fecharmos a avenida e desfilarmos nosso bloco, vamos integrar nossa api e compartilharmos nossos dados entre os projetos pra ficar tudo compartilhado e completinho
Criaremos testes para nossa aplicação pra deixar ela cheinha de suporte <3

Bônus - publicar projetinho (explicarei isso!!) e criar apresentação do projeto 

About

Criação de um plano de aula de React como atividade da turma educadevas da Reprograma