Tutorial ReactJS para iniciantes

O que é ReactJS?

ReactJS é um front-end de código aberto JavaBiblioteca de scripts para construção de interfaces de usuário. ReactJS É mantido pela Meta (antiga Facebook) e por uma comunidade de desenvolvedores e empresas. É amplamente utilizado como base para a criação de aplicativos de página única e aplicativos móveis. É muito fácil de usar e permite que os usuários criem componentes de interface do usuário reutilizáveis.

Antes de escrever sua primeira linha de código React, é útil saber o que diferencia a biblioteca do React puro. JavaRoteiro. A próxima seção descreve suas principais funcionalidades.

Recursos do ReactJS

JSX: JSX é uma extensão para JavaScript. Embora o uso de JSX no React não seja obrigatório, é um dos seus recursos interessantes e fáceis de usar.

ComponentesOs componentes são como puros JavaFunções de script ajudam a simplificar o código, dividindo a lógica em código independente e reutilizável. Podemos usar componentes como funções e componentes como classes. Os componentes também possuem estado e propriedades, o que facilita o desenvolvimento. Dentro de um componente de classe, o estado e as propriedades são gerenciados.

DOM virtual: O React cria um DOM virtual, ou seja, um cache de estrutura de dados na memória. Somente as alterações finais são posteriormente atualizadas no DOM do navegador, o que mantém a renderização rápida.

JavaExpressões de script: Expressões JS podem ser usadas em arquivos JSX utilizando chaves, por exemplo, {}.

Vantagens do ReactJS

Aqui estão as principais vantagens/benefícios de usar ReactJS:

• ReactJS utiliza um DOM virtual que faz uso de um cache de estrutura de dados na memória, e apenas as alterações finais são atualizadas no DOM do navegador. Isso torna o aplicativo mais rápido.
• Você pode criar componentes de sua escolha usando o recurso de componentes do React. Os componentes podem ser reutilizados e também são úteis na manutenção do código.
• ReactJS é um software de código aberto. JavaBiblioteca de scripts, por isso é fácil começar a usá-la.
• ReactJS tornou-se muito popular em um curto período e é a base de produtos como o Facebook e InstagramÉ utilizado por muitas empresas famosas como a Apple, Netflix, etc.
• A Meta mantém a biblioteca ReactJS, por isso ela é bem mantida e atualizada.
• ReactJS pode ser usado para desenvolver UI rica para aplicativos desktop e móveis.
• Fácil de depurar e testar, pois a maior parte da codificação é feita em JavaScript em vez de em HTML.

Desvantagens do ReactJS

Aqui estão as desvantagens/contras de usar ReactJS:

• A maior parte do código é escrita em JSX, ou seja, HTML e CSS fazem parte do... JavaScript. Pode ser bastante confuso, já que a maioria das outras estruturas prefere keeping HTML separado do JavaCódigo de script.
• O tamanho dos arquivos do ReactJS é comparativamente grande.

Conhecendo as vantagens e desvantagens, você está pronto para configurar o React. A maneira mais rápida de experimentá-lo é diretamente de uma CDN, que abordaremos primeiro; configurações baseadas em npm para projetos reais serão apresentadas a seguir.

Usando ReactJS do CDN

Para começar a trabalhar com React, primeiro precisamos adicionar o ReactJS à nossa página. Você pode começar a usar o ReactJS facilmente com a CDN. JavaArquivos de script, conforme mostrado abaixo.

Acesse o site de documentação legado do React para obter os links do CDN, por exemplo: https://legacy.reactjs.org/docs/cdn-links.htmlE você receberá os arquivos necessários, conforme explicado na imagem a seguir.

Para desenvolvedores

<script crossorigin src="https://unpkg.com/react@version/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.development.js"></script>

Para produção

<script crossorigin src="https://unpkg.com/react@version/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.production.min.js"></script>

Substituir versão com a versão do React que você desejar, tanto para react.development.js quanto para react-dom.development.js. Nesta página, usamos a versão 16, portanto, os exemplos abaixo serão executados sem alterações.

Caso você planeje usar os arquivos da CDN, certifique-se de manter o atributo `crossorigin` para evitar problemas de domínio cruzado. O código ReactJS não pode ser executado diretamente no navegador e precisa ser transpilado usando o Babel para código nativo. JavaScript antes de ser executado no navegador.

Aqui está o script BabelJS que pode ser usado:

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

Aqui está um exemplo funcional de ReactJS usando arquivos CDN e o script BabelJS.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, from Guru99 Tutorials!</h1>,
        document.getElementById('app')
      );
   </script>
  </body>
</html>

Saída:

Vamos nos aprofundar nos detalhes do código no próximo capítulo; vamos ver como funciona com arquivos CDN. Usar o script Babel diretamente não é uma boa prática, e iniciantes devem usá-lo apenas para aprender ReactJS por enquanto. Em produção, você precisará instalar o React usando o pacote npm.

Usando pacotes NPM

Certifique-se de ter o Node.js instalado. Caso contrário, siga este tutorial para Node.js (https://www.guru99.com/node-js-tutorial.html) instalação.

Após instalar o Node.js, crie uma pasta. reactproj/.

Para começar com a configuração do projeto, execute o comando inicialização npm.

A estrutura de pastas ficará assim:

reactproj\
package.json

Agora vamos instalar os pacotes que precisamos.

Aqui está a lista de pacotes para ReactJS. Mantemos o React na versão 16, então... ReactDOM.render Os exemplos nesta página funcionam exatamente como mostrado:

npm install react@16 --save
npm install react-dom@16 --save
npm install react-scripts --save

Abra o prompt de comando e execute os comandos acima dentro da pasta reactproj/.

Crie uma pasta src / Onde todo o código JS será inserido. Todo o código do projeto ReactJS estará disponível na pasta src/. Crie um arquivo index.js e importe react e react-dom, como mostrado abaixo.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

Já escrevemos o código básico para ReactJS. Explicaremos os detalhes no próximo capítulo. Queremos exibir Olá, de Guru99 tutoriaisE o mesmo é atribuído ao elemento DOM com o id “root”. Ele é obtido do arquivo index.html, que é o arquivo inicial, como mostrado abaixo.

Crie uma pasta chamada public/ e adicione o arquivo index.html dentro dela, conforme mostrado abaixo.

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
   </body>
</html>

O pacote react-scripts se encarregará de compilar o código e iniciar o servidor para exibir o arquivo HTML, ou seja, index.html. Você precisa adicionar o comando no package.json que usará o react-scripts para compilar o código e iniciar o servidor, conforme mostrado abaixo:

 "scripts": {
    "start": "react-scripts start"
  }

Depois de instalar todos os pacotes e adicionar o comando acima, o package.json final é o seguinte:

Pacote.json

{
  "name": "reactproj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "^3.1.1"
  }
}

Para começar a testar o ReactJS, execute o comando:

npm run start

C:\reactproj>npm run start
> reactproj@1.0.0 start C:\reactproj
> react-scripts start

Isso abrirá o navegador com o URL http://localhost:3000/ como mostrado abaixo:

public / index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Vamos usar o mesmo processo para executar o JavaOs arquivos de script também serão abordados nos próximos capítulos. Adicione todos os seus arquivos .js e .jsx na pasta src/. A estrutura de arquivos será a seguinte:

reactproj/
	 src/
	    index.js
	 node_modules/
	 public/
                index.html
	 package.json

Como criar a configuração do seu primeiro projeto React

Aqui está um guia passo a passo neste tutorial de ReactJS para você começar a criar seu primeiro aplicativo React.

Passo 1) Importe os pacotes react.
1. Para começar com ReactJS, precisamos primeiro importar os pacotes react da seguinte maneira.

import React from 'react';
import ReactDOM from 'react-dom';

2. Salve o arquivo como index.js na pasta src/.

Passo 2) Escreva de forma simples. Code.
Escreveremos um código simples neste tutorial React JS, onde exibiremos a mensagem “Olá, de Guru99 tutoriais!

ReactDOM.render(

<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

ReactDOM.render adicionará o Adicione a tag ao elemento com o id root. Aqui está o arquivo HTML que temos:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Passo 3) Compile o Code.

A seguir neste tutorial React.js, precisamos compilar o código para obter a saída no navegador.

Aqui está a estrutura de pastas:

reactproj/
     node_modules/
     src/
       index.js
     package.json
     public/
          index.html

Adicionamos os comandos para compilar o arquivo final em package.json da seguinte forma:

"scripts": {
    "start": "react-scripts start"
  },

Para compilar o arquivo final, execute o seguinte comando:

npm run start

Ao executar o comando acima, os arquivos serão compilados e você será notificado caso haja algum erro. Se tudo estiver correto, o navegador será aberto e a página será executada em http://localhost:3000/

Comando: npm run start:

C:\reactproj>npm run start

> reactproj@1.0.0 start C:\reactproj
> react-scripts start

Passo 4) Verifique a saída.
As URL http://localhost:3000 Será aberto no navegador assim que o código for compilado, conforme mostrado abaixo:

Como configurar o React com o Vite (abordagem moderna)

A configuração do react-scripts acima vem do Create React App (CRA), que foi o modelo inicial padrão por anos. A equipe do React oficialmente descontinuou o Create React App em fevereiro de 2025, portanto, novos projetos devem usar uma ferramenta de compilação moderna. A opção mais popular hoje é o React Native. parafuso, que inicia mais rápido e produz builds menores.

Veja como criar um novo projeto React com o Vite:

Passo 1) Execute o comando de scaffolding no seu terminal:

npm create vite@latest my-react-app -- --template react

Passo 2) Acesse a pasta e instale as dependências:

cd my-react-app
npm install

Passo 3) Inicie o servidor de desenvolvimento:

npm run dev

A Vite disponibiliza o aplicativo em http://localhost:5173/ Por padrão, ele recarrega instantaneamente ao salvar um arquivo.

Principais diferenças em relação à configuração anterior nesta página:

• O arquivo de entrada é src/main.jsx em vez de src/index.js.
• Ele instala a versão mais recente do React, que usa criarRaiz em vez de ReactDOM.render.
• O arquivo index.html está localizado na raiz do projeto, não em public/.
• As compilações são produzidas com npm run build em uma pasta dist/.

Para necessidades de pilha completa, como roteamento e renderização no servidor, a equipe do React também recomenda frameworks como Próximo.jsTudo o que você aprender nos capítulos abaixo — JSX, componentes, estado e propriedades — aplica-se sem alterações em um projeto Vite ou Next.js.

O que é JSX?

JSX é uma extensão para JavaScript. É um script modelo onde você terá o poder de usar HTML e JavaEscrevam o roteiro juntos.

Aqui está um exemplo simples de código JSX.

const h1tag = "<h1>Hello, from Guru99 Tutorials!</h1>";

Por que precisamos de JSX no React?

Para uma interface de usuário, precisamos de HTML, e cada elemento no DOM terá eventos a serem tratados, mudanças de estado, etc.

No caso do React, ele nos permite utilizar HTML e JavaCrie um script no mesmo arquivo e lide com as mudanças de estado no DOM de maneira eficiente.

Expressões em JSX

Aqui está um exemplo simples de como usar expressões em JSX.

Em exemplos anteriores do ReactJS, tínhamos escrito algo como:

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

Agora vamos alterar o código acima para adicionar expressões. Expressões são usadas dentro de chaves {} e são expandidas em tempo de execução. Expressões em React são semelhantes a JavaExpressões de script.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, from Guru99 Tutorials!";
const h1tag = "<h1>{display}</h1>";
ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Vamos agora testar o mesmo no navegador.

Como você pode ver na captura de tela acima, a expressão {display} não é substituída. O React não sabe o que fazer quando uma expressão é usada dentro de um arquivo .js.

Vamos agora adicionar alterações e criar um arquivo .jsx, conforme mostrado abaixo:

teste.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, to Guru99 Tutorials";
const h1tag =<h1>{display}</h1>;
export default h1tag;

Adicionamos o código necessário e usaremos o arquivo test.jsx em index.js. Queremos o h1tag A variável deve ser usada dentro do arquivo index.js, portanto, ela é exportada conforme mostrado acima no arquivo test.jsx.

Segue o código modificado em index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import h1tag from './test.jsx';

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Para usar o arquivo test.jsx no arquivo index.js, primeiro precisamos importá-lo, como mostrado abaixo:

import h1tag from './test.jsx';

Podemos usar o h1tag agora no ReactDOM.render conforme mostrado abaixo:

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Aqui está o resultado quando verificamos o mesmo no navegador:

O que são componentes no ReactJS?

Os componentes são como puros JavaFunções de script que ajudam a simplificar o código, dividindo a lógica em código independente e reutilizável.

Componentes como funções

teste.jsx

import React from 'react';
import ReactDOM from 'react-dom';
function Hello() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
}
const Hello_comp = <Hello />;
export default Hello_comp;

Criamos uma função chamada Olá que retorna uma tag h1, como mostrado acima. O nome da função atua como um elemento, como mostrado abaixo:

const Hello_comp = <Hello />;
export default Hello_comp;

O componente Olá é usado como uma tag HTML, ou seja, , designado para o Olá_comp variável, e a mesma é exportada usando o comando export.

Vamos agora usar esse componente no arquivo index.js, como mostrado abaixo:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Aqui está a saída no navegador:

Classe como componente

Aqui está um exemplo de ReactJS que usa uma classe como componente.

teste.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
  }
}
export default Hello;

Podemos usar o componente Hello no arquivo index.js da seguinte forma:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

O componente Hello é usado como uma tag HTML, ou seja, .

Aqui está o resultado do mesmo.

Componentes de classe vs. componentes de função e hooks

Agora que você viu as duas maneiras de escrever um componente, qual delas você deve usar? Esta página ensina componentes de classe porque eles tornam explícitos os conceitos de estado e ciclo de vida, o que é valioso para iniciantes e ainda aparece em bases de código legadas. No entanto, desde que o React 16.8 introduziu os Hooks, os componentes de função também podem armazenar estado e são o estilo recomendado para todo o código novo.

Aspecto	Componente de Classe	Componente de função com ganchos
Estado	this.state e this.setState()	gancho useState()
Ciclo da vida	componentDidMount, componentDidUpdate, componentWillUnmount	O gancho useEffect() abrange todos os três.
Sintaxe	Mais código padrão (construtor, bind, this)	Mais curto, sem essa palavra-chave
Status	Suporte, estilo legado	Recomendado para novos códigos.

Aqui está o exemplo de estado desta página reescrito com o hook useState:

import React, { useState } from 'react';

function Hello() {
  const [msg] = useState("Hello, from Guru99 Tutorials!");
  return <h1>{msg}</h1>;
}
export default Hello;

Ambas as versões produzem a mesma saída. Aprenda a sintaxe de classe usada nos capítulos abaixo e, em seguida, pratique a conversão de cada exemplo para Hooks.

O que é um estado no ReactJS?

Um estado é um JavaObjeto de script, semelhante a props, que armazena dados a serem usados ​​com o renderizador ReactJS. Os dados de estado são um objeto privado e são usados ​​dentro de componentes de uma classe.

Exemplo de Estado

Aqui está um exemplo funcional de como usar o estado dentro de uma classe.

teste.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
       msg: "Hello, from Guru99 Tutorials!"
    }
  }
  render() {
    return <h1>{this.state.msg}</h1>;
  }
}
export default Hello;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

Isto é o que obtemos quando testamos no navegador:

O que são acessórios no ReactJS?

Props são propriedades que podem ser usadas dentro de um componente. Elas funcionam como objetos ou variáveis ​​globais que podem ser utilizadas dentro do componente.

Adereços para componente de função

Aqui está um exemplo de passagem de adereços para um componente de função.

import React from 'react';
import ReactDOM from 'react-dom';
function Hello(props) {
    return <h1>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

Conforme mostrado acima, adicionamos o msg atributo para o componente. O mesmo pode ser acessado como adereços dentro da função Hello, que é um objeto que terá o msg detalhes do atributo, e o mesmo é usado como uma expressão.

O componente é usado em index.js da seguinte forma:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Aqui está a saída no navegador:

Adereços para componente de classe

Para acessar as propriedades de uma classe, podemos fazer da seguinte maneira:

teste.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>{this.props.msg}</h1>;
  }
}
export default Hello;

As msg O atributo é passado para o componente em index.js da seguinte forma:

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello msg="Hello, from Guru99 Tutorials!" />,
    document.getElementById('root')
);

Esta é a saída no navegador:

Verifique também: - Tutorial AngularJS para iniciantes: Aprenda AngularJS passo a passo

Ciclo de vida de um componente

Com os conceitos de componentes, estado e propriedades já abordados, o próximo passo é entender quando o React chama os métodos do seu componente. O ciclo de vida de um componente é dividido em etapas de Inicialização, Montagem, Atualização e Desmontagem.

Segue abaixo uma explicação detalhada de cada etapa.

Um componente em ReactJS possui os seguintes estágios:

Inicialização: Este é o primeiro estágio do ciclo de vida do componente.

Aqui terá os adereços padrão e o estado no nível inicial.

MontagemNesta fase, o componente é renderizado dentro do DOM. Temos acesso aos seguintes métodos no estado de montagem:

• render(): Você tem esse método para todos os componentes criados. Ele retorna o nó HTML.
• componentDidMount(): Este método é chamado imediatamente após o componente ser adicionado ao DOM.

AtualizarNesse estado, o usuário interage com o DOM e ele é atualizado. Por exemplo, você digita algo na caixa de texto, e as propriedades do estado são atualizadas.

A seguir estão os métodos disponíveis no estado de atualização:

• shouldComponentUpdate(): chamado antes da renderização; permite que você decida se o componente deve ser atualizado. Retornar verdadeiro renderiza o componente novamente.
• componentDidUpdate(): chamado após o componente ser atualizado.

Desmontando: Essa situação entra em vigor quando o componente não é necessário ou é removido.

A seguir, o método disponível no estado desmontado:

• componentWillUnmount(): chamado imediatamente antes do componente ser removido ou destruído.

Exemplo prático de métodos de ciclo de vida

Aqui está um exemplo funcional que mostra os métodos chamados em cada etapa.

Exemplo: complife.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class COMP_LIFE extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  componentDidMount() {
    console.log('Mounting State : calling method componentDidMount');
  }

  shouldComponentUpdate() {
    console.log('Update  State : calling method shouldComponentUpdate');
    return true;
  }

  componentDidUpdate() {
    console.log('Update  State : calling method componentDidUpdate')
  }
  componentWillUnmount() {
    console.log('UnMounting State : calling method componentWillUnmount');
  }

  render() {
    return (
      <div>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default COMP_LIFE;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import COMP_LIFE from './complife.jsx';

ReactDOM.render(
    <COMP_LIFE />,
    document.getElementById('root')
);

Ao verificar a saída no navegador:

No console do navegador, você obtém:

Quando o usuário entra na caixa de texto:

No console, as seguintes mensagens são exibidas:

Agora que você já sabe quando um componente é renderizado e atualizado, vamos aplicar estado e eventos a um caso de uso prático: lidar com a entrada de dados do usuário por meio de formulários.

Trabalhando com Formulários

Em ReactJS, elementos de entrada HTML como , , e <select /> têm seu próprio estado e precisam ser atualizados quando o usuário interage, usando o método setState().

Neste capítulo, veremos como trabalhar com formulários em ReactJS.

Aqui está um exemplo prático:

formulário.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.formSubmit = this.formSubmit.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  formSubmit(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <form>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="submit" value="Submit" onClick={this.formSubmit} />
      </form>
    );
  }
}

export default Form;

Para os campos de entrada, precisamos manter o estado, e para isso o React fornece um método especial chamado definirEstado, que ajuda a manter o estado sempre que há uma mudança. Em uma aplicação real, também é chamado de event.preventDefault() Dentro do formulário FormSubmit, para impedir que o navegador recarregue a página ao enviar o formulário.

Utilizamos os eventos onChange e onClick na caixa de texto e no botão de envio. Quando o usuário digita na caixa de texto, o evento onChange é acionado e o campo "name" dentro do objeto de estado é atualizado, conforme mostrado abaixo:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Form from './form.jsx';

ReactDOM.render(
    <Form />,
    document.getElementById('root')
);

A saída no navegador é a seguinte:

Passo 1) Digite seu nome na caixa de texto:

Passo 2) Clique no botão Enviar:

Trabalhando com eventos no ReactJS

Os formulários são apenas uma das fontes de interação do usuário. Trabalhar com eventos no ReactJS é da mesma forma que você faria em... JavaScript. Você pode usar todos os manipuladores de eventos que são usados ​​em JavaScript. O método setState() é usado para atualizar o estado quando o usuário interage com qualquer elemento HTML.

Aqui está um exemplo prático de como usar eventos em ReactJS.

eventos.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class EventTest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }

  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <div>
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default EventTest;

Para os campos de entrada, precisamos manter o estado, e para isso o React fornece o definirEstado método, que ajuda a manter o estado sempre que ocorre uma mudança.

Utilizamos os eventos em mudança e onClick na caixa de texto e no botão. Quando o usuário digita na caixa de texto, o em mudança O evento é acionado e o campo "nome" dentro do objeto de estado é atualizado, conforme mostrado abaixo:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import EventTest from './events.jsx';

ReactDOM.render(
    <EventTest />,
    document.getElementById('root')
);

Aqui está a saída no navegador:

Quando um usuário insere o nome:

Quando o usuário clica no botão Clique Aqui:

Trabalhando com CSS Inline no ReactJS

Depois que seus componentes lidam com dados e eventos, a etapa final é estilizar. Vamos analisar um exemplo prático para entender o CSS inline no ReactJS.

adicionar estilo.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const h1Style = {
    color: 'red'
};

function Hello(props) {
    return <h1 style={h1Style}>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

Adicionei o estilo de cor 'vermelho' à tag h1.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

A saída no navegador é a seguinte:

Você pode criar um objeto com o estilo desejado para o elemento e usar uma expressão para adicionar o estilo, como mostrado no exemplo acima.

Trabalhando com CSS externo no ReactJS

Vamos criar um arquivo CSS externo. Para isso, crie uma pasta chamada css/ e adicione o arquivo style.css dentro dela.

style.css

.h1tag {
color:red;
}

Adicione o style.css ao seu arquivo index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Agora vamos adicionar a classe à tag h1 no arquivo .jsx.

adicionar estilo.jsx

import React from 'react';
import ReactDOM from 'react-dom';

let classforh1 = 'h1tag';

function Hello(props) {
    return <h1 className={classforh1}>{props.msg}</h1>;
}
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

O atributo className recebe os detalhes da classe. Observe que o JSX usa nome da classe em vez do atributo de classe HTML, porque `class` é uma palavra-chave reservada em JavaScript. Agora vamos testá-lo no navegador.

Isto é o que você vê ao inspecionar a tag h1 no navegador:

Você pode ver que a classe “h1tag” foi adicionada com sucesso à tag h1.

Por que ReactDOM.render foi substituído por createRoot?

Todos os exemplos nesta página montam o aplicativo com ReactDOM.render, o que é correto para o React 16 e 17, as versões abordadas neste curso. O React 18, lançado em março de 2022, substituiu esse ponto de entrada pela API createRoot, e o React 19 removeu o ReactDOM.render completamente. O motivo é a concorrência: createRoot permite que o React prepare várias versões da interface do usuário ao mesmo tempo, interrompa a renderização de baixa prioridade e mantenha a consistência.ping e animações suaves. Recursos como agrupamento automático, useTransition e streaming baseado em Suspense dependem disso.

O equivalente moderno do arquivo index.js usado ao longo desta página tem a seguinte aparência:

import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<h1>Hello, from Guru99 Tutorials!</h1>);

Tudo o que você aprendeu aqui — componentes, JSX, estado, propriedades e eventos — funciona da mesma maneira após essa alteração de uma linha no ponto de entrada. Diferenças de versão como essa são comuns em Perguntas de entrevista sobre React JSPortanto, vale a pena entender ambas as APIs.

Perguntas Frequentes

Verifique também: - As 70 principais perguntas e respostas da entrevista React (atualizado)