React para Iniciantes

Criaremos nossa primeira aplicação React onde já teremos algo rodando em nosso navegador imediatamente. O nosso Hello World em React.

Aqui exploramos como funciona a estrutura de uma aplicação React, sua estrutura de pastas e os arquivos mais importantes para que a aplicação se inicie no navegador.

Exploramos como criar classes CSS e aplicamos seletores CSS em componentes já existentes.

Criaremos o primeiro componente de nosso app Kanban Board e veremos como renderiza-lo na tela.

Veremos como criar CSS para componentes customizados e como utilizar o CSS de forma modular.

Explorando o conceito de Props em React, criaremos o componente TaskList para listar nossas tarefas.

Utilizando a biblioteca prop-types, adicionaremos validações as nossas Props do componente TaskList, deixando nossa aplicação mais sólida e tolerante a falhas.

Utilizando o hook useState, exploramos como o gerenciamento de estado em aplicações React funciona, já aplicando o novo conceito ao gerenciamento de tarefas no Kanban Board.

Utilizando o controle de estados que vimos na aula anterior, aqui iremos adicionar novas tarefas ao nosso Kanban Board, explorando formas de combinar o uso de State e Props em nossos componentes.

Aplicando métodos mais avançados, utilizaremos eventos disparados pelo usuário para liberar a edição de tarefas existentes, atualizando o estado da aplicação com o useState hook.

Combinando os conhecimentos de array em javascript, utilizaremos a função filter para distribuir as tarefas nas listas do Kanban Board de acordo com seu estado Pendente, Fazendo ou Completa.

Combinando o conhecimento adquiridos nas aulas anteriores, veremos como mover tarefas de uma lista para outra em tempo real, veremos como utilizar a tag HTML select em React e como atualizar o estado sempre que o usuário selecionar uma nova opção.

Como último passo, iremos deletar tarefas indesejadas da lista baseado no estado da tarefa durante o disparo de eventos específicos como onKeyPress.

Renderizamos partes específicas do componente baseado em seu estado e damos toques finais em nossa aplicação com um pouco de CSS e o uso de imagens SVG.

Aprendemos como conectar nosso projeto no Codesandbox a nosso repositório no Github e faremos um commit para atualizar a descrição de nosso projeto.