React - Introdução

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

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>
</div>
st element = React.createElement(
div",
ull,
eact.createElement(
"p",
null,
"Bem vindo ao React!"

EXEMPLO COM JSXEXEMPLO COM JSX
<div>
</div>
st element = (
div>
/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

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>
);
}

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

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

Mais conteúdo relacionado

Mais procurados

Semelhante a React - Introdução

React - Introdução