Nos dias 18 e 20 de Maio de 2016, realizei na Infoeste 2016 o Minicurso "Aplicações JavaScript de Alta Performance com React.js", onde passei um pouco de conhecimento sobre React.js para a comunidade da FIPP. No curso, passei introdução, conceitos fundamentais do React.js e implementei uma aplicação básica.

Resumo do minicurso:

Hoje em dia as aplicações javascript/web modernas possuem interfaces cada vez mais ricas, deixando complexo o desenvolvimento e manutenção destas, sendo assim surge a necessidade da utilização de bibliotecas que facilitam o processo de desenvolvimento e manutenção. Uma das maiores aplicações do mundo o Facebook, resolveu criar sua própria solução para criação de suas interfaces, e assim nasceu o React.js, uma biblioteca JavaScript voltada para criação de interfaces moderna complexas com uma performance muito boa, ideal para aplicações escaláveis. React.js possui um conceito diferente da maioria das bibliotecas/frameworks, você cria seus componentes totalmente com JavaScript unificando view com lógica, aproveitando todos os benefícios da linguagem, de forma modular permitindo uma alta reutilização e composição, além de possuir um virtual DOM para gerenciar as atualizações do DOM. Grandes aplicações como Facebook, Instagram, WhatsApp Web, NetFlix,Yahoo Mail, Khan Academy, FlipBoard, BBC, Periscope Web, dentre outras, já utilizam React.js. Neste curso será abordado os principais conceitos e padrões de desenvolvimento React.js. Será implementado exemplos básicos e uma simples aplicação Web de exemplo utilizando os conceitos de React.js mencionados no curso.

Abaixo segue os tópicos abordados no curso:

  • Aprender JavaScript
  • Conhecendo React.js
  • Ferramentas para desenvolver com React.js
  • Estrututa básica de um componente
  • JSX
  • Conceitos do React.js
  • Entendendo o Virtual DOM
  • State e Props
  • Composição
  • Fazendo Build do React.js
  • Criando Componentes
  • Ciclo de vida de um Componente
  • Eventos
  • Refs
  • Comunicação entre componentes pai/filho
  • Usando React junto com outras libs
  • Exemplo de Form - componentes controlavéis
  • SPA - Single Page Application
  • Rotas no React.js
  • Renderização de componentes no servidor
  • Arquitetura de desenvolvimento Flux
  • Desenvolvimento de uma aplicação de exemplo utilizando React.js
  • Quem utiliza React?

Visualizar conteúdo

Eu criei um repositório no GitHub com todos os exemplos e slides do curso.
Para acessar o conteúdo do curso acesse:
https://github.com/victorvhpg/minicurso-react.js.
Para visualizar os slides acesse:
https://victorvhpg.github.io/minicurso-react.js/slides/

Aplicação de exemplo

Veja a aplicação desenvolvida no minicurso:
http://victorvhpg.github.io/minicurso-react.js/app/build/