Introdução ao React

1. João Maiorchini
React
A JavaScript library for building user interfaces

2. 1. Origem
2. O que é React?
3. Quem usa React?
4. Comunidade
5. Suporte (nativo e pwa)
6. Ecossistema
7. Controle de estado da aplicação
8. Hello World =)
Cronograma
2

3. ● Porta JavaScript do XHP
○ XHP não resolveu problema muitas idas e voltas ao servidor
○ Engenheiro do Facebook "portou" o XHP para o JavaScript
○ Seis meses o resultado é "ReactJS".
● Primeiro uso foi no feed do Facebook em 2011
● Instagram se junta ao Facebook
Origem
3

4. ● Base de código do Instagram era separada do Facebook
● Exigiu extrair o React da base do código do Facebook.
● Instagram foi o primeiro uso "externo" do React (2012).
○ Tornou-se open-source em maio de 2013 durante a JSConf US
○ Apresentação do React ( https://youtu.be/GW0rj4sNH2w)
Problema
4

5. Jordan Walke
Criador do ReactJS
5
Pete Hunt

6. ● Uma biblioteca JavaScript open-source usada para desenvolver interfaces de usuário.
● Permite o reuso de componentes UI.
● Criar grandes aplicações web do qual os dados mudam mas sem recarregar a página.
O que é ReactJS
6

7. ● O principal propósito do React é:
○ Ser rápido;
○ Escalável;
○ Simples.
● Corresponde a View do modelo MVC
O que é ReactJS
7

8. JSX
8

9. JSX
9Sem JSX
var Hello = React.createClass({
displayName: 'Hello',
render: function() {
return React.createElement("div", null, "Hello ", this.props.name);
}
});
ReactDOM.render(
React.createElement(Hello, {name: "World"}),
document.getElementById('container')
);

10. JSX
10Com JSX
var Hello = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
ReactDOM.render(
<Hello name="World" />,
document.getElementById('container')
);

11. Single-Way data flow
11

12. Virtual Document Object Model (Virtual-DOM)
12

13. Quem usa React?
13

14. Quem usa React?
14
E muito mais…
→ https://github.com/facebook/react/wiki/Sites-Using-React

15. Comunidade
15
● StackOverflow → Aprox. 74050 perguntas feitas
● Fórum (oficial)→ https://discuss.reactjs.org/
● React community no Hashnode → https://hashnode.com/n/reactjs
● Reactiflux Chat no Discord → https://discord.gg/0ZcbPKXt5bZjGY5n
● FreeNode channel → http://irc.lc/freenode/reactjs
● Redes Sociais
○ Facebook → https://www.facebook.com/react
○ Twitter → https://twitter.com/reactjs
● Canal no Slack https://react-brasil.slack.com/

16. Suporte
16
● React-native → https://facebook.github.io/react-native/
○ Ele usa o mesmo design do React para Android iOS e UWP (Universal Windows Platform)
● React PWA → https://www.reactpwa.com/
○ Suporte para aplicações PWA (progressive web apps).

17. Ecossistema
17
● Cerca de 48023 pacotes no NPM / YARN.
● react dev-tools
● code sandbox
● es7 (decorators, arrow functions, generators)
● babel

18. Controle de estado da aplicação
18
● mobX
● flow

19. Get started - Hello World
19
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
Necessita versão recente do Node.js Instalado

20. Obrigado!
20
Dúvidas?
REACT > (Angular && Vue.js)