Minicurso React JS

Olá pessoas, bem vindo ao Minicurso de ReactJS apresentado na Secomp 2018.

A Secomp é um evento organizado pela UTFPR com o objetivo de agitar a comunidade de desenvolvimento com minicursos e palestras na área de tecnologias e desenvolvimento.

Sou o professor Diogo Cezar, e estarei com vocês nessa jornada para descobrimos juntos um pouco do ReactJS!

Pré-requisitos

ReactJS é um passo a mais no desenvolvimento Front-End. Por isso é essencial que você tenha conhecimentos básicos sobre:

HTML5;
CSS3;
JavaScript ES6;
Git e GitHub;

Mas não se preocupem, vou tirar todas as dúvidas a medida em que elas aparecerem!

Apresentação

Preparei uma apresentação inicial para definição dos conceitos.

Ela está disponível em: http://bit.ly/2LHr0jT

Objetivos

Ao final do minicurso e da atividade prática espera-se que o aluno possa compreender:

Dicas Gerais no Mundo do Desenvolvimento;
O que é ReactJS;
Vantagens e Desvantagens;
Como o ReactJS Funciona;
Componentes, Props, State, Events;
JSX;
Rotas;
create-react-app
SPA;
Noções de Redux e Context (Não será visto na prática);

Prática

Na atividade prática nós iremos trabalhar de uma forma incremental.

Para essa atividade vamos criar um simples aplicativo de Lista de Tarefas (é o clássico).

Para minizar os trabalho, vamos utilizar um framework CSS, neste caso o Materilize.css

Um exemplo "pronto" de todos os passos pode ser encontrado na pasta todo-final.

Passo 1

Conhecer e revisar os conhecimentos básicos que estão no exemplo da pasta todo-pure

Entender a estrutura de arquivos;
Entender a separação dos arquivos por componentes;
Analisar as estruturas dos arquivos HTML;

Passo 2

Identificar quais seriam os possíveis componentes desse sistema puro.

Quais dos elementos poderiam se transformar em componentes?

Passo 3

Criar um novo aplicativo em React com o create-react-app e realocálo na pasta todo

Estudar a estrutura de pastas criada pelo create-react-app
Entender onde estão os transpiladores de código;
Utilizar os comandos básicos para iniciar a aplicar e fazer o seu build;

Passo 4

Transformar o exemplo básico em um aplicativo escrito em react.

Mover os componentes;
Criar e organizar páginas, componentes e objetos;
Criar o sistema de roteamento entre as páginas do site.

Deixar o exemplo funcional localmente, sem utilizar nenhuma API.

Criar localmente um array de ítens que será manipulado pela aplicação;

Passo 5

Instalar o axios e o json-server

Entender seus conceitos e para que servem;

Passo 6

Criar um arquivo central de API para gerenciar a api fornecida pelo json-server

Criar um arquivo em uma pasta na raiz de src chamada api;
Criar os comandos necessários para o CRUD que irá consumir a api criada pelo json-server

Passo 7

Fazer o aplicativo se comunicar com a API e deixá-lo funcional.

Refatorar o aplicativo obter e salvar informações do JSON definido como banco de dados.

Conclusão

É claro que esse minicurso é apenas o começo! É continuar seus estudos e avançar na tecnologia para poder criar aplicativos mais dinâmicos e produtos!

É isso pessoal,

Qualquer dúvida, basta entrar em contato pelo e-mail: diogo@diogocezar.com

xumes / minicurso-reactjs