REACTREACT
Jefferson Mariano de Souza
O QUE É REACT?O QUE É REACT?
React é uma biblioteca que auxilia na construção de
interfaces.
Comparando com um modelo MVC, React é o V,
responsável apenas pela View.
SÓ ISSO?SÓ ISSO?
E por que todo esse boom em volta dessa biblioteca?
VANTAGENSVANTAGENS
Fácil de aprender
Reaproveitamento de código
Comunidade ativa
Sintaxe amigável na construção de componentes
(HTML)
Grandes empresas utilizando
É rápido
POR QUE É RÁPIDO?POR QUE É RÁPIDO?
Virtual DOM
<!DOCTYPE html>
<html>
<head>
<title>Example<title>
<link rel="stylesheet" href="sty
</head>
<body>
<h1>
<a href="/">Header</a>
</h1>
<nav>
<a href="one/">One</a>
<a href="two/">Two</a>
<a href="three/">Three</a>
</nav>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
VIRTUAL DOMVIRTUAL DOM
COMPARANDO REACT COM JQUERYCOMPARANDO REACT COM JQUERY
JQUERYJQUERY
A manipulação do DOM (operação custosa) ca nas
mãos do desenvolvedor
Toda modi cação dispara uma alteração no DOM
REACTREACT
Otimiza a manipulação do DOM, alterando somente o
necessário
Alterações são enviadas em lote, minimizando impacto
no DOM
SINTAXESINTAXE
A sintaxe mais utilizada para a criação de componentes
em React é JSX
JSX é uma extensão da sintaxe do JavaScript que
lembra XML
OBJETIVOOBJETIVO
<div>
<p>Bem vindo ao React!</p>
</div>
EXEMPLO SEM JSXEXEMPLO SEM JSX
<div>
<p>Bem vindo ao React!</p>
</div>
st element = React.createElement(
div",
ull,
eact.createElement(
"p",
null,
"Bem vindo ao React!"
EXEMPLO COM JSXEXEMPLO COM JSX
<div>
<p>Bem vindo ao React!</p>
</div>
st element = (
div>
<p>Bem vindo ao React!</p>
/div>
JSX É A SINTAXE MAIS USADA PARA CRIARJSX É A SINTAXE MAIS USADA PARA CRIAR
COMPONENTESCOMPONENTES
REACT É BASEADO EM COMPONENTESREACT É BASEADO EM COMPONENTES
O QUE É UM COMPONENTE?O QUE É UM COMPONENTE?
EXEMPLO: SPOTIFYEXEMPLO: SPOTIFY
DESIGN PATTERNDESIGN PATTERN
USANDO COMPOSITEUSANDO COMPOSITE
React.createElement(
element, //div, p, h1, h2, span, header, main, etc
props, //id, class, data attributes
children // elementos filhos
);
const element = React.createElement(
"div",
null,
React.createElement(
"p",
null,
"Bem vindo ao React!"
)
);
TIPOS DE COMPONENTESTIPOS DE COMPONENTES
EXISTEM 2 TIPOS DE COMPONENTESEXISTEM 2 TIPOS DE COMPONENTES
Stateless
Stateful
STATELESS COMPONENTSTATELESS COMPONENT
function Componente(nome) {
return (
<div>
<p>Bem vindo {nome}!</p>
</div>
);
}
PROPRIEDADESPROPRIEDADES
STATEFUL COMPONENTSTATEFUL COMPONENT
class Componente extends React.Component {
constructor() {
this.state = { nome: ''}
}
render() {
return (
<div>
<p>Bem vindo {this.state.nome}!</p>
</div>
);
}
}
}
ESTADOESTADO
CARACTERÍSTICACARACTERÍSTICA
REACT WAYREACT WAY
MUDANÇA DE ESTADO ALTERA DOMMUDANÇA DE ESTADO ALTERA DOM
E O QUE EU PRECISO PARA USAR?E O QUE EU PRECISO PARA USAR?
DEPENDÊNCIASDEPENDÊNCIAS
nodejs (jdk)
plataforma base
yarn / npm (gradle / maven)
babel
EXEMPLO DE CÓDIGOEXEMPLO DE CÓDIGO
HTMLHTMLOCTYPE html>
ml lang="pt-br">
head>
<title>React App</title>
/head>
body>
<div id="app"></div>
/body>
tml>
JS (SETUP)JS (SETUP)
ort React from 'react';
ort ReactDOM from 'react-dom';
ort App from './App';
st divApp = document.getElementById('app');
ctDOM.render(<App />, divApp);
JS (DIVERSÃO)JS (DIVERSÃO)
import React from 'react';
function App() {
return (
<div className="full-width">
<button onClick={() => alert('Oi!')}>Hello!</button>
</div>
);
}
export default App;
E O REACT NATIVE?E O REACT NATIVE?
React - Introdução
React - Introdução

React - Introdução