Aula 01 – React – Introdução
Aula 01 – React – Introdução
Tutorial React
Voltar para página principal do blog
Todas as aulas desse curso
Aula 02
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:
Hostinger
Digital Ocean
One.com
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:
https://github.com/toticavalcanti/tutorial-react/tree/initial_branch
Link da documentação oficial:
https://reactjs.org/tutorial/
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-toeNa 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-toeEntre na pasta dele.
cd create-react-appCrie uma pasta src dentro da pasta do projeto, para colocar os códigos.
mkdir srcAnalisando 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;
}
