Esse repositório tem como objetivo compartilhar arquivos das aulas do curso React com ES6: de Padawan a Mestre Jedi. Além disso, disponibilizamos os arquivos do projeto que será feito no decorrer das aulas.
Os arquivos estão divididos por módulos. Cada módulo tem seu próprio contexto e cada aula pode conter um ou mais arquivos relacionados com o tema da aula.
Quer aprender mais?
Visite skillo.io onde temos outros cursos
React é uma biblioteca popular e por uma boa razão, ela é extremamente útil. Mas quando alguns desenvolvedores consideram aprender React, eles frequentemente acabam enfrentando um problema: Eles não tem muita certeza do que o React é ou problema que ele resolve.
Você provavelmente já leu várias descrições explicando 'o que é React?', mas pdoe ser que tenha achado que nessas definições alguma coisa estava faltando. Aqui estão alguns que eu encontrei:
React é ...
- ... uma biblioteca de JavaScript para criar interfaces de usuário.
- ... uma abstração de vista baseada em componentes.
- ... uma abstração DOM usada para evitar lidar diretamente com elementos HTML.
- ... o V em MVC.
Tudo isso é verdade, mas eles também descrevem toneladas de outras estruturas de front-end JavaScript. Eu acredito que React é melhor descrito pelo problema que resolve.
Essa aula vai ajudar exatamente nesse aspecto. Explicar o problema que o React resolve e como ele resolve.
Antes do React (e bibliotecas modernas similares), manter o DOM em sincronia com o seu modelo de dados era doloroso.
Havia geralmente duas abordagens:
- Renderizar novamente grandes seções do DOM quando seus dados mudam.
- Escrever funções que manipulavam o DOM para sincronizar o DOM com seus dados.
Ambas as abordagens tiveram grandes problemas, que você verá como em um exemplo.
Se você usar a abordagem de renderizar o DOM novamente, o navegador terá que destruir e criar muitos elementos. Esta abordagem tem alguns problemas:
- Lento com um grande número de elementos.
- Os manipuladores de eventos serão perdidos.
- O estado de foco será perdido.
Você poderia escrever uma função que atualize o DOM adicionando um elemento ao final da lista:
function addItem (itemName) {
var node = document.createElement('li');
node.textContent = itemName;
document.querySelector('ul').appendChild(node);
}Funciona! E é rápido! Mas, à medida que você adiciona recursos, essa abordagem é interrompida. Deseja escrever funções de atualização de DOM para cada um desses cenários?
- Adicionar item ao topo
- Adicionar item ao meio
- Remover item
- Sort da lista
- Checkbox State
Escrever funções de atualização de DOM para cada tipo de alteração de dados rapidamente incha sua base de código e cria maior potencial para erros.
Usando react.js e react-dom.js em uma página HTML
Usando JSX via Babel
Usando ES6 & ES* com React
Nesse módulo iremos aprender o que são React Nodes/Elements e como criá-los. Além disso, vamos ver a diferença entre React Components, Elements, and Instances.
Nessa aula vamos ver diversas formas possíveis de criar componentes com React.
Nessa aula iremos aplicar o que vimos até agora em um exemplo prático.
Nesse módulo iremos aprender a como criar nossos elementos e componentes usando JSX.
JSX é uma extensão de sintaxe XML-like para ECMAScript sem qualquer semântica definida. Destina-se a ser utilizado por vários pré-processadores (transpilers) para transformar estes tokens em ECMAScript padrão.
Vamos entender como usar essa extensão e como ela facilita o noso trabalho.
Nessa aula vamos configurar o nosso ambiente para começar a usar JSX sendo compilado pelo Babel, além do ES6.
Nessa aula vamos começar a analisar essa extensão.
Nessa aula vamos pegar os exemplos que fizemos no módulo passado e refatorá-los usando JSX e ES6.
Nessa aula vamos ver como podemos usar expressões do javascript e executar dentro do JSX. Essa abordagem nos ajuda na prática a renderizar nosso elemento de acordo determinadas condições ou propriedades.
Nesse módulo ainda não temos arquivos
Nesse módulo ainda não temos arquivos
Nesse módulo ainda não temos arquivos