Instrutor:
Victor Hugo de Paiva Gonçales
Bibliotecas/Frameworks JavaScript estão sempre surgindo, então antes de tudo você deve aprender JavaScript de verdade!!!
React é uma biblioteca open-source desenvolvida pelo Facebook, para construção de interfaces(Componentes) em JavaScript com alta performance que permite composição e modularização de uma maneira muito simples e organizada.
Além de renderizar interfaces na Web(views resultando em HTML), React pode ser usado para renderizar outros tipos de tecnologias,
tais como Canvas, WebGL, VR, views nativas de Android/iOS/Windows além de outras.
"learn once, write anywhere"
Aprendendo o conceito de React, você estará qualificado para essas outras tecnologias
Video da React.js Conf 2015 - mostrando que React possui uma performance superior ao Angular e ao Ember.
https://www.youtube.com/watch?v=z5e7kWSHWTg&t=295
Antes de começar abra sua mente para alguns conceitos um pouco difícies de aceitar no começo ...
Empty your mind...
HTML dentro do JavaScript, como assim?
As expressões javascript são avaliadas entre { }
Exemplo de iteração
this.props
this.state
this.context
O Virtual DOM é uma representação leve em memória do DOM.
A cada mudança de estado o React renderiza o componente novamente, mas para uma melhor performance
ele utiliza o virtual DOM.
A cada mudança de estado:
Através das propriedades que componentes passam dados para seus filhos. (this.props
).
Props devem ser read-only.
Componentes podem ter estados para gerenciar alguma lógica interna (this.state
).
Somente use this.setState
para atualizar um estado. Toda vez* que atualiza o estado o render
é chamado.
Através do context podemos acessar recursos em qualquer nivel da árvore de componentes
Através da composição podemos montar componentes complexos que são divididos em componentes menores e mais simples.
this.props.children
false
no shouldComponentUpdate()
React tem um controle interno de eventos e só delega evento DOM na raiz da árvore de componentes, depois os eventos são gerenciados
pelo próprio React.
Os nomes dos eventos são lowerCamelCase:
onClick, onChange, onTouchStart
Utilizado para acessar diretamente o elemento, por exemplo um elemento DOM ou instância de um componente.
Podemos passar aos descendentes funções callback para passar dados ao pai quando forem axecutadas pelo filho.
Ferramenta para facilitar o processo de build do React.
npm install -g create-react-app create-react-app exemplo1 //modo de desenvolvmento http://localhost:3000 npm start //para compilar e gerar o bundle final: npm run build
Para ter certeza que o componente estará no DOM quando for utilizar alguma outra lib, devemos usar o evento componentDidMount()
exemplo prático ...
São aplicações que carregam apenas uma vez a estrutura inicial e depois todas as outras ações/requisições/navegações são
feitas via ajax.
Exemplos: Facebook, Gmail
Para Rotas é possível utilizar o React-Router https://github.com/reactjs/react-router
Os componentes React podem ser renderizados no servidor.
Node, Java, .NET, php etc...
prática...
Grandes aplicações como Facebook, Instagram, WhatsApp Web, NetFlix,Yahoo Mail, Khan Academy, FlipBoard, BBC, Periscope Web,
Twitter Mobile, Uber, Airbnb dentre outras, já utilizam React.js.
No Brasil algumas empresas já estão com algum produto com React, por exemplo: "Globo Play".
Os aplicativos "Voz do Narrador", "SimsCat", "MemesPlay" e o "E aí Pah" da empresa "Escolha Tecnologia" foram desenvolvidos com React.