Aula 01 - React - Introdução
Se gostarem do conteúdo dêem um joinha 👍 na página do Código Fluente no
Facebook
Esse é o link do código fluente no Pinterest
Meus links de afiliados:
Melhore seu NETWORKING
Participe de comunidades de desenvolvedores:
Fiquem a vontade para me adicionar ao linkedin.
E também para me seguir no GITHUB.
Ah, se puder, clica na estrela nos meus repositórios pra dá uma força ao meu perfil no GITHUB
Código da branch inicial:
Link da documentação oficial:
Nível de conhecimento
É
necessário que se tenha pelo menos um
entendimento básico da linguagem
JavaScript, para absorver o conteúdo do tutorial de
React.
É necessário ter o node instalado.
Aqui tem o link para baixar o node, lá tem as instruções também, de acordo com cada sistema operacional.
https://nodejs.org/pt-br/download/
Vou começar supondo que você tenha um conhecimento mínimo em javascript e que já tenha o node instalado na sua máquina.
Então vamos lá!
O que é React ?
React é uma biblioteca
JavaScript declarativa,
eficiente e
flexível para a construção de
interfaces de
usuário.
Permite compor interfaces de usuário complexas a partir de pequenos e isolados trechos de código chamados "
componentes".
O
React possui alguns tipos diferentes de
componentes.
Começaremos com as
subclasses do
React.Component.
Vamos criar um projeto com o nome
tic-tac-toe, mas, antes de começar a desenvolver ele, vamos fazer alguns testes e ter um primeiro contato com os componentes do
React.
Dentro de uma pasta de sua escolha, crie o projeto
React chamado
tic-tac-toe com o comando:
npx create-react-app tic-tac-toe
Na pasta
src, deixe apenas o
App.js e o
index.js.
Na pasta public apenas o
index.html,
manifest.json e o
robots.txt.
Deixe o App.js assim:
import React from 'react';
class ShoppingList extends React.Component {
render() {
return (
<>
<div className="shopping-list">
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
</>
);
}
}
export default ShoppingList;
E o Index.js assim:
import React from 'react';
import ReactDOM from 'react-dom';
import ShoppingList from './app';
const element = <ShoppingList name="Toti Cavalcanti" />;
ReactDOM.render(
element,
document.getElementById('root')
);
Usamos
componentes para dizer ao
React o que queremos ver na tela.
Quando nossos dados são alterados, o
React atualiza e renderiza com eficiência os
componentes.
Aqui,
ShoppingList é uma classe do tipo
React component.
Um componente recebe parâmetros chamados
props (abreviação de "
properties").
Retorna uma hierarquia de
views a serem exibidas pelo método de
render.
O método
render retorna uma descrição do que você deseja ver na tela.
O
React pega a descrição e exibe o resultado.
O
render retorna um elemento
React, que é uma descrição do que renderizar.
A maioria dos desenvolvedores
React usa uma sintaxe especial chamada “
JSX”, que facilita a escrita dessas estruturas envolvendo a lógica de renderização e da interface do usuário.
O exemplo do
App.js acima é equivalente em
JSX a:
import React from 'react';
class ShoppingList extends React.Component {
render() {
return (
React.createElement("div", {
className: "shopping-list"
},
/*#__PURE__*/React.createElement("h1", null, "Shopping List for ", this.props.name),
/*#__PURE__*/React.createElement("ul", null,
/*#__PURE__*/React.createElement("li", null, "Instagram"),
/*#__PURE__*/React.createElement("li", null, "WhatsApp"),
/*#__PURE__*/React.createElement("li", null, "Oculus"))
));
}
}
export default ShoppingList;
Apresentando JSX
JSX não é nem tag, nem string e nem HTML!
JSX é uma extensão de sintaxe para JavaScript.
É usado com o
React para descrever a aparência da interface de usuário.
O
JSX produz "elementos" do
React.
Por que JSX?
O
React usa o fato de que a lógica de renderização é inerentemente acoplada a lógica da interface de usuário.
Como os eventos são manipulados, como o estado muda ao longo do tempo e como os dados são preparados para exibição.
Ao invés de separar, colocando linguagem de marcação e lógica em arquivos separados, o
React separa essas coisas em unidades fracamente acopladas chamadas "
componentes" que contêm ambas as lógicas.
O
React não requer o uso do
JSX, mas, a maioria das pessoas o considera útil no auxílio visual ao trabalhar com a interface de usuário dentro do código
JavaScript.
Ele também permite que o
React mostre mensagens úteis de
erro e
aviso.
No exemplo abaixo, incorporamos o resultado da chamada de uma função
JavaScript,
formatName (user), em um elemento.
Componentes
Existem dois tipos de componentes no
React:
- classe e
- componentes funcionais.
Componentes classe são classes do
ES6 que estendem o
React.Component e podem ter métodos de estado e de ciclo de vida:
class Message extends React.Component {
constructor(props) {
super(props); this.state = {
message: ''
}; }
componentDidMount() {
/* ... */
}
render() {
return <div>{this.state.message}</div>;
}
}
Componentes funcionais são funções que só aceitam argumentos como propriedades do componente e retornam
JSX válido:
function Message(props) {
return <div>{props.message}</div>
}
// Or as an arrow function
const Message = (props) => <div>{props.message}</div>
Como você pode ver, não há estado ou métodos de ciclo de vida.
No entanto, desde o
React 16.8, podemos usar
Hooks, que são funções com nomes que começam com
use, para adicionar variáveis de estado aos componentes funcionais e instrumentar os métodos de ciclo de vida das classes.
Mas vamos deixar essa parte para depois, vamos logo construir um
app e aprender fazendo.
Vamos aprender desenvolvendo um jogo da velha.
Crie o projeto.
npx create-react-app tic-tac-toe
Entre na pasta dele.
cd create-react-app
Crie uma pasta src dentro da pasta do projeto, para colocar os códigos.
mkdir src
Analisando o código inicial
Este código inicial é a base do que estamos construindo.
Fornecemos o CSS para que você só precise se concentrar em aprender
React e em programar o jogo da velha.
Ao analisar o código, você verá que temos três componentes do
React:
Quadrado
Borda
jogo
O componente
Quadrado renderiza um único botão
<button> e o
Board renderiza 9 quadrados.
O componente
Game renderiza um quadro com valores de
placeholder fixo, que modificaremos depois.
Até agora não há componentes interativos.
Vamos dá só uma olhada nos código inicial e na próxima aula a gente começa a mexer nele.
src/index.js
class Square extends React.Component {
render() {
return (
React.createElement("button", { className: "square" }));
}}
class Board extends React.Component {
renderSquare(i) {
return React.createElement(Square, null);
}
render() {
const status = 'Next player: X';
return (
React.createElement("div", null,
React.createElement("div", { className: "status" }, status),
React.createElement("div", { className: "board-row" },
this.renderSquare(0),
this.renderSquare(1),
this.renderSquare(2)),
React.createElement("div", { className: "board-row" },
this.renderSquare(3),
this.renderSquare(4),
this.renderSquare(5)),
React.createElement("div", { className: "board-row" },
this.renderSquare(6),
this.renderSquare(7),
this.renderSquare(8))));
}}
class Game extends React.Component {
render() {
return (
React.createElement("div", { className: "game" },
React.createElement("div", { className: "game-board" },
React.createElement(Board, null)),
React.createElement("div", { className: "game-info" },
React.createElement("div", null),
React.createElement("ol", null))));
}}
// ========================================
ReactDOM.render(
React.createElement(Game, null),
document.getElementById('root'));
tic-tac-toe/public/index.html
<div id="errors" style="
background: #c00;
color: #fff;
display: none;
margin: -20px -20px 20px;
padding: 20px;
white-space: pre-wrap;
"></div>
<div id="root"></div>
<script>
window.addEventListener('mousedown', function(e) {
document.body.classList.add('mouse-navigation');
document.body.classList.remove('kbd-navigation');
});
window.addEventListener('keydown', function(e) {
if (e.keyCode === 9) {
document.body.classList.add('kbd-navigation');
document.body.classList.remove('mouse-navigation');
}
});
window.addEventListener('click', function(e) {
if (e.target.tagName === 'A' && e.target.getAttribute('href') === '#') {
e.preventDefault();
}
});
window.onerror = function(message, source, line, col, error) {
var text = error ? error.stack || error : message + ' (at ' + source + ':' + line + ':' + col + ')';
errors.textContent += text + '\n';
errors.style.display = '';
};
console.error = (function(old) {
return function error() {
errors.textContent += Array.prototype.slice.call(arguments).join(' ') + '\n';
errors.style.display = '';
old.apply(this, arguments);
}
})(console.error);
</script>
src/tic-tac-toe.css
body {
font: 14px "Century Gothic", Futura, sans-serif;
margin: 20px;
}
ol, ul {
padding-left: 30px;
}
.board-row:after {
clear: both;
content: "";
display: table;
}
.status {
margin-bottom: 10px;
}
.square {
background: #fff;
border: 1px solid #999;
float: left;
font-size: 24px;
font-weight: bold;
line-height: 34px;
height: 34px;
margin-right: -1px;
margin-top: -1px;
padding: 0;
text-align: center;
width: 34px;
}
.square:focus {
outline: none;
}
.kbd-navigation .square:focus {
background: #ddd;
}
.game {
display: flex;
flex-direction: row;
}
.game-info {
margin-left: 20px;
}
É isso pessoal, nos vemos na próxima!
Código final da aula:
Se gostarem do conteúdo dêem um joinha 👍 na página do Código Fluente no
Facebook
Link do código fluente no Pinterest
Novamente deixo meus link de afiliados:
Obrigado, até a próxima e bons estudos. ;)
