pagr-exercicio-pt2.md

Pagr - exercícios para integração. Parte 2

1. Clonar e rodar o Pagr (https://bitbucket.org/ftd-educacao/pandora)

2. salvar em localstorage através de botão salvar

3. realtime preview

• criar uma tela dividida em 4 quadrantes
• o primeiro quadrante exibe uma instância do Draft.js, onde pode-se digitar, alterar estilos como bold, italico, etc.
• 2º quadro exibe o HTML renderizado do que está no quadro 1
• 3º exibe o JSON gerado do Draft.js
• 4º exibe o markup HTML

5. Criar página com N instâncias do Draft.js (onde N>=2)

6. Criar funcionalidade (através de botões) que permitam controlar alinhamento (esquerda, centralizado, direita e justificado) de um bloco de texto (parágrafo e h1, h2, etc)

pagr-exercicio.md

Pagr - exercícios para integração

Aquecimento 1: desvendando o Draft.js

A meta deste exercício é desmistificar a fisiologia de uma aplicação React simples e, em especial, o funcionamento básico do Draft.js

Recomendo que esse exercício seja realizado de forma individual com troca de informação entre os colegas. Fiquem livres para decidir, no entanto.

1. Criar uma nova aplicação React usando a ferramenta "create react app"
2. Nesta aplicação, instalar e instanciar a última versão do Draft.js
3. Adicionar um botão que transforma um texto selecionado em "bold"
4. Estilizar à gosto
5. Publicar experiência via codepen.io* ou em repositório GIT no Bitbucket/Github*

Ignorar outros botões para este exemplo

referências

• https://github.com/facebookincubator/create-react-app
• https://draftjs.org
• https://draftjs.org/docs/quickstart-rich-styling.html#styling-controls-in-ui

• A FTD não fornecerá ambiente para labortário nessa escala experimental. Criem codepens/repositórios com suas contas individuais e deixem o código público.

Aquecimento 2: Utilizando Plugins

A meta agora é entender como é possível utilizar componentes prontos para compor uma aplicação própria.

1. Duplicar resultado do exercício anterior em novo codepen ou novo repositório GIT no Bitbucket/Github
2. Adicionar botões de "desfazer" e "refazer" através do Draft.js Plugins (ver referência)
3. Publicar experiência via codepen.io* ou em repositório GIT no Bitbucket/Github*

Botão "refazer" é opcional, mas esforço é quase idêntico

referências

• https://www.draft-js-plugins.com/plugin/undo

Desafio: Inserção e edição de imagens

Finalizando este exercício, já teremos ido além do que conseguimos com o time atual do Pagr ;)

1. Criar novo projeto ou continuar projeto da experiência anterior.
2. Adicionar botão/funcionalidade de "inserção de imagem". Tanto faz se a imagem existe publicamente na internet (link) ou se um upload será feito.
3. Codificar ferramenta para redimensionar e rotacionar a imagem inserida (exemplo abaixo só demonstra intenção do uso)