ReactJS

React é uma ferramenta somente para ​criar componentes​. Criada pela equipe do
Instagram​ (isso mesmo, antes do Facebook comprar) entrou para o ​“guarda chuva”
de projetos ​open-source​ do ​Facebook​, impulsionando mais ainda sua adoção. O
grande “boom”​ do React é o ​Virtual-DOM​.

Virtual-DOM
v-dom​ é uma técnica simples e complexa ao mesmo tempo. Simples no conceito e
complexa na aplicação.

Simples porque ela é apenas uma representação em ​JavaScript puro​(memória) do

DOM​ “real”. Se você sabe o que é DOM, sabe que a manipulação dele não é algo
“produtivo”, é extremamente lento e causa vários problemas a sua aplicação.

Então com ​v-dom​ você passa a manipular esse objeto e não o DOM de verdade.
Quando o objeto ​v-dom​ é atualizado um algoritmo calcula a diferença entre o ​v-dom
e o DOM real, alterando então pedaços de DOM.

Sempre foi de conhecimento comum que é mais produtivo você criar os elementos
DOM no JavaScript, processar eles e “aplicar eles de uma vez” na Arvore DOM do
navegador. React veio entre outras coisas e um delas é facilitar isso.
 JSX
Em resumo, JSX é uma sintaxe semelhante ao XML, onde você consegue escrever
e compreender de uma melhor forma, como será montado o seu component na UI.

JSX não é uma proposta para EcmaScript, ele é apenas uma sintaxe!

É claro que, JSX não é interpretado pelo browser, por este motivo devemos utilizar
um transpiler para realizar a mágica. Hoje existem vários transpiladores que
transpilam JSX, entre eles, o mais conhecido, ​Babel​.

Basicamente, usando o JSX você pode escrever estruturas concisas do tipo HTML,
e no mesmo arquivo que você escreve o código JavaScript, então o Babel
transformará isso em código JavaScript. Ao contrário do passado, em vez de
colocar JavaScript em HTML, o JSX nos permite colocar HTML em JavaScript.

JSX providencia uma sintaxe familiar para definir a árvore estrutural, e isso não
requer um novo conhecimento e também não abandonamos o Javascript.
 Código com JSX

var Hello = React.createClass({

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

Código sem 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')
);

React x React Dom

React ​- Ajuda na criação de componentes e na integração desses componentes

para trabalharem juntos.

ReactDom​ - Basicamente pega os componentes criados e faz eles aparecerem no

DOM.
 Criação de projeto com react

1. Instalar/Atualizar Node.js
2. Instalar create-react-app -> comando no terminal ​npm install -g
create-react-app
3. Gerar projeto -> entrar na pasta do projeto e rodar o comando
create-react-app jsx (jsx é o nome do projeto)
*Para versões do npm acima de 5.2 pode rodar apenas o comando ​npm
create-react-app <nome do projeto>​, sem ser necessário os dois comandos
acima*
4. Buildar projeto

Dependencias
 Babel

Estrutura Básica

Rodar projeto React ->​ npm start

Webpack -> ​webpack é um empacotador de código para projetos web, como o 

browserify​. O que ele se propõe a fazer de diferente é focar em módulos da sua 
aplicação. Nem sempre ter todo e qualquer JavaScript/CSS do seu projeto num 
único arquivo é bom, por isso o webpack tem a ideia de ​code splitting​, onde você 
modulariza partes reaproveitáveis do seu projeto, facilitando o desenvolvimento 
independente, por exemplo, ter uma equipe trabalhando em um módulo X e outra 
num módulo Y, mas ambos de um mesmo projeto. 
 
 
  
Componentes 

 
Tipos de componentes 

 
 
 
 
 
 
 
 Estilização inline com JSX 

 
Adicionado classes com JSX 

 
Ao invés de usar ‘Class’ utilizar​ ‘className’ 
Ao invés de usar​ for ​utilizar​ htmlFor ​Ex:<label className="label" htmlFor="name">
 Conceitos importantes
 

https://semantic-ui.com/​ - Open source css framework 

https://cdnjs.com/libraries/semantic-ui​ -> Utilizar 
https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css 
https://github.com/marak/Faker.js/​ -​generate massive amounts of realistic fake
data in Node.js and the browser -> ​npm install --save faker
 Componente ​reutilizável

Props
props​ ​- valores herdados

state​ - valores dinâmicos

O conceito é: state deve servir para guardar valores/estados da aplicação que

mudam com o uso da mesma, para guardar uma alteração de estado que pode ter
efeito na renderização do próprio componente, ser passado a um componente filho
como prop, ou que deve ser passado a algo externo à aplicação. As ​props​ são
valores estáticos, ou que no contexto de um Componente sejam estáticos, daí
serem props e não state para separar conceptualmente.

state pode ser importado de props dentro do Componente, mas não pode ser
herdado do componente pai.
 Geolocation API
https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API

Linha do tempo de uma aplicação browser

Regras de componente de classe

Regras de states
 App lifecycle

LifeCycle Methods
 Site do babel
https://babeljs.io/
 Elementos Controlled x Uncontrolled

Unsplash Api - Api para busca de fotos a partir de uma palavra

Ex:“cars”
Retorna um json de imagens de carros.

https://unsplash.com/developers

Axios
Axios é um cliente HTTP, que funciona tanto no browser quanto em node.js.
A biblioteca é basicamente uma API que sabe interagir tanto com ​XMLHttpRequest
quanto com a interface ​http​ do node. Isso significa que o mesmo código utilizado
para fazer requisições ajax no browser também funciona no servidor. Além disso, as
requisições feitas através da biblioteca retornam uma ​promise​, compatível com a
nova versão do JavaScript - ES6.
 Renderização de elementos vindo de uma api

React Refs

Comunicação de componente filho para pai =>​ Utiliza-se funções callback

 Redux
https://redux.js.org/

https://medium.com/reactbrasil/iniciando-com-redux-c14ca7b7dcf
 Exemplo com a seguradora

Actions
Actions are payloads of information that send data from your application to
your store. They are the ​only​ source of information for the store. You send them to
the store using​ ​store.dispatch()​.
Reducers
Reducers specify how the application's state changes in response to​ ​actions 
sent to the store. Remember that actions only describe ​what happened​, but don't 
describe how the application's state changes.
Redux Store
A store holds the whole​ ​state tree​ of your application. The only way to change
the state inside it is to dispatch an​ ​action​ on it.A store is ​not a class​. It's just an
object with a few methods on it. To create it, pass your root​ ​reducing function​ to
createStore​.

Dependencias

Comando: npm install --save redux react-redux

 Api para dados ‘falsos’
https://jsonplaceholder.typicode.com/

Nova dependencia
npm install --save redux-thunk

React Thunk​ - ​ ​R​edux Thunk ​middleware​ allows you to write action creators that
return a function instead of an action. The thunk can be used to delay the dispatch of
an action, or to dispatch only if a certain condition is met. The inner function receives
the store methods d ​ ispatch​ and g
​ etState​ as parameters.
 Mudança de state a partir de reducers

Lodash
Lodash is a ​JavaScript​ library which provides utility functions for common programming
tasks using the ​functional programming​ paradigm.

https://lodash.com/

npm install --save lodash

React-router
npm install --save react-router-dom

import {BrowserRouter, Route, Link} from 'react-router-dom

React Router​ é uma lib completa para controle de rotas. Ela permite que você
consiga configurar rotas utilizando o formato ​JSX​ e também disponibiliza uma API para você
configurar diretamente via Javascript.A lib trabalha com ​History API​, mas também deixa a
possibilidade de você trabalhar com Hash(#) se for necessário.Ela possui features como:
Rotas aninhadas, lazy loading de componentes, matching para rotas dinâmicas e controle
de transição de rotas, além de possuir suporte a ​server-rendering​.
 *​Server Side Rendering ou SSR é o processo de pegar todos os Javascript e todos os CSS de um site que,
geralmente é carregado no browser (client-side), e renderizá-los como estático do lado do servidor.
 Sem a utilização do exact
<Route path="/pagetwo" component ={PageTwo}/>

Com a utilização do exact

<Route path="/" exact component={PageOne}/>
 Tipos de Browser Routers

<Switch>

Renders the first child ​<Route>​ or ​<Redirect>​ that matches the location.

How is this different than just using a bunch of ​<Route>s?

<Switch> is unique in that it renders a route ​exclusively.​ In contrast, every <Route>

that matches the location renders ​inclusively.​
Exemplo

​<Router history={history}>

<div>

<Header/>

​<Switch>

<Route path="/" exact component={StreamList}/>

<Route path="/streams/new" exact component={StreamCreate}/>

<Route path="/streams/edit/:id" exact component={StreamEdit}/>

<Route path="/streams/delete/:id" exact component={StreamDelete}/>

<Route path="/streams/:id" exact component={StreamShow}/>

​ ​ </Switch>

</div>

</Router>
 Mudança de rota através da tag Link/Redirect

<Link to="/streams/show" className="item">

<Redirect to="/home" > -> Redireciona página sem necessidade de click
obs: A tag link deve ser filha de um elemento Router(Browser, hash
memory)

Maneira “Correta”
Criar arquivo history
import​ ​createHistory​ ​from​ ​'history/createBrowserHistory'
export​ ​default​ ​cr eateHistory​();

Importar History aonde deseja utilizar

import​ ​history​ ​from​ ​'../history'
Aplicar
history.push​('/'​);
Path para onde será direcionado

App principal -> Utilizar Router

import​ { ​Route​, ​Router​ ​} ​from​ ​'react-router-dom'
Aplicar
<​Router​ ​history​=​{​history​}​>
</​Router>
Autenticação com OAuth
Fluxo utilizando Google Server
 Adicionando biblioteca do google no public/index.html (Não é
disponível via npm)
<​script​ ​src​=​"​https://apis.google.com/js/api.js​"​></​script​>
Gapi documentation
https://developers.google.com/api-client-library/javascript/reference/r
eferencedocs
 Redux-form
Lib para manipulação de formulários com react/redux
https://redux-form.com/
npm install --save redux-form

<​StreamForm​ ​initialValues​=​{​{​title:​ ​'Teste'​ , ​description:​ ​'Teste'​ }​}

Utilizar ​initialValues ​para definir valores inicias!

Define valores inicias para os inputs com ​name​ ‘title’, e ​name ​‘description’
<​Field​ ​name​=​"title"​ ​component​=​{this​.​renderInput​}​ ​label​=​"Enter
Tittle:"​/>
​<​Field​ ​name​=​"description"​ ​component​=​{this​.​renderInput​}​ ​label​=​"Enter
Description: "​ ​/>
Tipos de estrutura de reducers
 Portals
Portals provide a first-class way to render children into a DOM node that exists
outside the DOM hierarchy of the parent component.
 React.Fragment
A common pattern in React is for a component to return multiple elements.
Fragments let you group a list of children without adding extra nodes to the DOM, It
works like an ‘invisible’ element.

<React.Fragment> </React.Fragment>

Ou
<> </>

Servidor RTMP
Real time messaging protocol
https://github.com/illuspas/Node-Media-Server
Context System

Redux x Content