Começando a Aprender com React JS
Por incrível que pareça você pode demorar apenas 1 dia* para aprender esse conteúdo; e por mais incrível que pareça esse conteúdo é o bastante para começar a desenvolver usando React JS.
- Introdução
- Pequeno Exemplo em Java
- React.createElement()
- JSX (JavaScript XML)
- Criando um Componente como Função
- Criando um Componente como Classe
- Reutilizando o Componente
- Qual Versão Estou Usando?
- Conclusões
- Recursos Adicionais
- Mais Conteúdos Relacionados
Introdução
React permite compor UIs complexas usando códigos pequenos e isolados.
React JS é uma biblioteca JavaScript para construção de interfaces de usuário.
Permite criar componentes reutilizáveis e gerenciar o estado deles de forma eficiente.
Um conceito importante em React é o de "virtual DOM", que permite atualizar apenas as partes da página, em vez de atualizar toda a página, ajudando a tornar as aplicações mais rápidas e escaláveis.
1 dia* para aprender: Presumindo que tenha um pouco de familiaridade com HTML e JavaScript; porém, você será capaz de acompanhar (em um tempo maior) mesmo sem pré-requisitos.
Pequeno Exemplo em Java
Você pode salvar esse arquivo com o nome de "exemplo.html".
Após salvar o arquivo; então você pode arrastar o arquivo para dentro da janela do seu navegador e observar o resultado.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript - Exemplo</title>
</head>
<body>
<div id="app"></div>
</body>
<script>
const mainContainer = document.getElementById("app");
mainContainer.innerHTML = "<h1>Hello World</h1>";
</script>
</html>
Esse é um exemplo simples de como usar JavaScript para modificar o conteúdo de uma página HTML.
O código seleciona o elemento HTML com o ID "app" usando o método getElementById
e, em seguida, modifica o conteúdo interno desse elemento (innerHTML
) para incluir uma tag <h1>
com o texto "Hello World".
<div id="app"></div>
cria um elemento <div>
com o atributo id
definido como "app".
O elemento <div>
é um container genérico para outros elementos HTML.
O atributo id
é usado para identificar de forma única um elemento em uma página HTML, ele pode ser usado para selecionar esse elemento em JavaScript usando o método getElementById
usando um seletor com #
.
Na linha de código
estamos criando um elemento<div>
vazio e identificando-o com o id
"app", esse id
será usado posteriormente para selecionar esse elemento com o JavaScript e inserir conteúdo nele.
const mainContainer = document.getElementById("app")
é uma linha de código JavaScript que cria uma constante chamada mainContainer
e atribui a ela o resultado da seleção do elemento HTML com o ID "app" usando o método getElementById
.
const
é uma palavra-chave do JavaScript que é usada para declarar uma constante, isso significa que o valor atribuído a ela não poderá ser alterado depois.
document
é uma variável global que representa o documento HTML atual, seu o método getElementById
permite selecionar um elemento HTML pelo seu atributo id
.
O método getElementById
recebe uma string como argumento, que é o valor do atributo id
do elemento que desejamos selecionar.
Em resumo, essa linha está selecionando o elemento HTML com o id "app" e atribuindo-o a uma constante chamada mainContainer
, permitindo que possamos manipular esse elemento no restante do código.
mainContainer.innerHTML = "<h1>Hello World</h1>"
é uma linha de código JavaScript que modifica o conteúdo interno do elemento selecionado anteriormente e atribuído a constante chamada mainContainer
.
innerHTML
é uma propriedade de um elemento HTML que representa o conteúdo interno de um elemento.
Atribuindo uma string para a propriedade innerHTML
, como "<h1>Hello World</h1>"
, estamos alterando o conteúdo interno do elemento, e qualquer conteúdo anterior será substituído.
Essa linha está criando uma tag <h1>
e inserindo a string "Hello World"
dentro dela. Essa tag <h1>
e seu conteúdo serão inseridos dentro do elemento que foi selecionado anteriormente com o ID "app".
Em resumo, essa linha de código está modificando o conteúdo interno do elemento selecionado com o ID "app" e inserindo uma tag <h1>
com o texto "Hello World"
dentro do elemento.
Isso é uma forma básica de manipulação de DOM (Document Object Model) e pode ser útil para dinamizar uma página sem precisar recarregar completamente a página. No entanto, usando uma biblioteca como o React, você pode construir aplicações mais complexas e escaláveis, com melhores recursos de gerenciamento de estado e performance.
O Mesmo Programa Usando React
Esse é um exemplo de como usar React para renderizar componentes em uma página HTML:
<!DOCTYPE html>
<html>
<head>
<title>React JS - Exemplo</title>
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/babel">
ReactDOM.render(<h1>Hello World</h1>, document.querySelector('#app'));
</script>
</html>
O código inclui as bibliotecas "React" e "ReactDOM" através de links para a CDN (unpkg), também inclui a biblioteca "babel-standalone" para transpilar o código JSX para JavaScript puro.
A tag <script type="text/babel">
contém uma única linha de código, o método ReactDOM.render
é usado para renderizar um componente React em um elemento do DOM. O primeiro argumento do método é o componente React que desejamos renderizar, no caso, é uma tag <h1>
com o texto "Hello World"
. O segundo argumento é o elemento do DOM onde desejamos que o componente seja renderizado, no caso, é selecionado pelo seletor document.querySelector('#app')
que retorna o elemento com id "app".
Em resumo, essa página está usando React para renderizar uma tag <h1>
com o texto "Hello World"
dentro do elemento com id
"app"
na página HTML; isso é uma forma mais escalável e poderosa de manipular o conteúdo de uma página em comparação com a manipulação direta do DOM com JavaScript puro.
Entendendo Melhor o que Aconteceu
Para entendermos com mais clareza; vamos adicionar um botão, então nosso código só vai ser executado após clicarmos nesse botão:
<!DOCTYPE html>
<html>
<head>
<title>React JS - Exemplo</title>
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<button id="myButton" onclick="renderHelloWorld()">Executar</button>
<div id="app">Por favor, pressione o botão Executar (acima) para continuar.</div>
</body>
<script type="text/babel">
function renderHelloWorld() {
ReactDOM.render(<h1>Hello World</h1>, document.querySelector('#app'));
}
</script>
</html>
Ficou claro que a execução do código substitue o conteúdo dentro das tags <div>
e </div>
.
React.createElement()
Esse é um exemplo de como usar React para renderizar componentes em uma página HTML com React.createElement()
:
<!DOCTYPE html>
<html>
<head>
<title>React JS - Exemplo</title>
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/babel">
ReactDOM.render(
React.createElement('div', null,
React.createElement('h1', null, 'Olá! Como posso te chamar?'),
React.createElement('form', {method: 'POST'},
React.createElement('input', {placeholder: 'Informe o seu nome'}),
React.createElement('button', {type: 'submit'}, 'Enviar')
),
),
document.querySelector('#app')
);
</script>
</html>
O método React.createElement()
é usado para criar elementos React. Ele recebe três argumentos:
- o tipo de elemento (string),
- as propriedades (objeto)
- e os elementos filhos (opcionais).
No exemplo, estamos criando um elemento <div>
sem propriedades, dentro dele uma <h1>
com o texto "Olá! Como posso te chamar?"
, e dentro da div, um formulário com método "POST" e dentro dele um input com placeholder "Informe o seu nome"
e um botão com o texto "Enviar"
.
Em resumo, essa página está usando React para renderizar uma <div>
, com dentro dela uma <h1>
e um formulário com input e botão; tudo isso dentro do elemento com id "app" que já existia previamente na página HTML.
JSX (JavaScript XML)
Esse é um exemplo de como usar React para renderizar componentes em uma página HTML usando JSX.
<!DOCTYPE html>
<html>
<head>
<title>React JS - Exemplo</title>
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/babel">
ReactDOM.render(
<div>
<h1>Olá! Como posso te chamar?</h1>
<form method="POST">
<input placeholder="Informe o seu nome" />
<button type="submit">Enviar</button>
</form>
</div>,
document.querySelector('#app')
);
</script>
</html>
JSX é uma sintaxe de código que permite escrever componentes React usando tags HTML, é uma extensão do JavaScript que é transpilada pelo Babel para código JavaScript puro; e então esse código JavaScript puro é passado como argumento para o método ReactDOM.render
.
O efeito final desse exemplo é indêntico ao anterior; porém com uma sintaxe mais amigável.
Criando um Componente como Função
Esse é um exemplo de como criar componentes personalizados no React JS:
<!DOCTYPE html>
<html>
<head>
<title>React JS - Exemplo</title>
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/babel">
function Formulario({ ola }) {
return (
<div>
<h1>{ ola }</h1>
<form method="POST">
<input placeholder="Informe o seu nome" />
<button type="submit">Enviar</button>
</form>
</div>
)
}
ReactDOM.render(
<Formulario ola="Olá! Como posso te chamar?" />,
document.querySelector('#app')
);
</script>
</html>
A linha function Formulario({ ola })
está criando uma função com o nome "Formulario"
(que também chamamos de componente).
O componente Formulario
recebe uma propriedade chamada "ola"
.
Agora esse componente Formulario
pode ser reutilizado várias vezes dentro do código.
O método ReactDOM.render
está sendo usada para renderizar o componente Formulario
, passando como argumento o valor "Olá! Como posso te chamar?"
para a propriedade "ola"
.
Criando um Componente como Classe
Esse é um exemplo de como usar React para renderizar componentes em uma página HTML usando JSX e componentes personalizados criados com a sintaxe de classe do JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>React JS - Exemplo</title>
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/babel">
class Formulario extends React.Component {
render () {
return (
<div>
<h1>{ this.props.ola }</h1>
<form method="POST">
<input placeholder="Informe o seu nome" />
<button type="submit">Enviar</button>
</form>
</div>
)
}
}
ReactDOM.render(
<Formulario ola="Olá! Como posso te chamar?" />,
document.querySelector('#app')
);
</script>
</html>
A classe chamada "Formulario"
; que é um componente personalizado, estende a classe React.Component
e tem um método chamado render
.
o método render
retorna uma <div>
com os mesmos elementos dos exemplos anteriores.
Reutilizando o Componente
Esse exemplo está reutilizando o componente Formulário
três vezes, e passando diferentes strings para cada chamada:
<!DOCTYPE html>
<html>
<head>
<title>React JS - Exemplo</title>
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/babel">
function Formulario({ ola }) {
return (
<div>
<h1>{ ola }</h1>
<form method="POST">
<input placeholder="Informe aqui" />
<button type="submit">Enviar</button>
</form>
</div>
)
}
ReactDOM.render(
<div>
<Formulario ola="Olá! Como posso te chamar?" />
<Formulario ola="Aonde você mora?" />
<Formulario ola="Para qual time você torce?" />
</div>,
document.querySelector('#app')
);
</script>
</html>
<React.Fragment>
é possível fazer isso sem a tag <div>
; com o React, vários componentes podem ser renderizados juntos sem precisar de uma tag de container (como <div>
) para agrupá-los:
ReactDOM.render(
<React.Fragment>
<Formulario ola="Aonde você nasceu?" />
<Formulario ola="Qual é a sua cor favorita?" />
<Formulario ola="Você prefere caro ou moto?" />
</React.Fragment>,
document.querySelector('#app')
);
Usar a tag <React.Fragment>
é uma forma de agrupar elementos sem adicionar uma tag extra ao DOM.
Array de Componentes
Uma outra forma é usar array, por exemplo:
ReactDOM.render(
[
<Formulario ola="Você sabe nadar?" />
<Formulario ola="Qual é o seu hobby?" />
<Formulario ola="Você tem filhos?" />
],
document.querySelector('#app')
);
<>
e </>
A partir do React 16.2, você também pode usar a sintaxe curta para React.Fragment
usando apenas <>
e </>
:
ReactDOM.render(
<>
<Formulario ola="Você tem animais de estimação?" />
<Formulario ola="Qual é o seu filme favorito?" />
<Formulario ola="Você pratica algum esporte?" />
</>,
document.querySelector('#app')
);
Qual Versão Estou Usando?
Esse código exibe a versão do React:
<script type="text/babel">
function Version() {
return <div>Versão do React: { React.version }</div>;
}
ReactDOM.render(<Version />, document.getElementById("app"));
</script>
Conclusões
Uma grande vantagem do React é tornar o código JavaScript mais fácil de ser compreendido.
Mas as vantagens não param por aqui:
- Reutilização de componentes: React permite que você divida sua aplicação em pequenos componentes independentes que podem ser facilmente reutilizados em diferentes partes da aplicação. Isso ajuda a manter o código organizado e fácil de manter.
- Performance: O React usa o conceito de "virtual DOM", que permite atualizar apenas as partes da página que precisam ser atualizadas, em vez de atualizar toda a página. Isso ajuda a tornar as aplicações mais rápidas e escaláveis.
- Facilidade de debug: React fornece ferramentas de depuração e ferramentas de desenvolvimento que ajudam a identificar e resolver problemas rapidamente.
- Comunidade ativa: React tem uma grande comunidade de desenvolvedores que criam e compartilham pacotes, componentes e outras ferramentas úteis. Isso facilita o desenvolvimento e ajuda a manter o código atualizado.
- Popularidade: React é uma das bibliotecas de JavaScript mais populares no mundo, isso significa que é fácil encontrar desenvolvedores experientes e recursos de aprendizado.
- Interoperabilidade: React pode ser usado em conjunto com outras tecnologias como Angular ou Vue.js. Isso permite criar aplicações híbridas e aproveitar as vantagens de cada uma delas.
Recursos Adicionais
Segue uma pequena lista das bibliotecas mais utilizadas com o React JS:
- Redux: Gerenciamanto de estados.
- React Router: Acesso a rotas de aplicações.
- React Intl: Datas e Números.
- React DevTools: Extenção do Chrome para DeBug.
Eis alguns recursos adicionais que você pode utilizar em seu apredizado de React JS:
- https://codepen.io/pen
- https://pt-br.reactjs.org/tutorial/tutorial.html
- https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Language_Overview
- https://babeljs.io/repl
- https://www.codux.com
Mais Conteúdos Relacionados
Desenvolver para Web exige saber também usar o Git e o GitHub;
estou compartilhando aqui mesmo no TabNews um Glossário de Termos Git e GitHub.
Se você quiser uma grande ajuda da Inteligência Artificial para escrever comentários naquele código que você não está entendendo; então visite esse post que eu fiz especialmente para te ajudar: [ChatGPT] Escrevendo Mensagens de Commit e Comentando Código