Executando verificação de segurança...
4
Centaurus
11 min de leitura ·

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.


  1. Introdução
  2. Pequeno Exemplo em Java
  3. React.createElement()
  4. JSX (JavaScript XML)
  5. Criando um Componente como Função
  6. Criando um Componente como Classe
  7. Reutilizando o Componente
  8. Qual Versão Estou Usando?
  9. Conclusões
  10. Recursos Adicionais
  11. 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:

  1. o tipo de elemento (string),
  2. as propriedades (objeto)
  3. 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:




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

2
1
2
1
1
gabrielbatista

Excelente conteúdo!

Hoje eu trabalho com Nuxtjs, mas estou querendo migrar para o Nextjs e esse post me ajudou a compreender a maneira como o React trata as informações.