Tutorial ReactJS para iniciantes: aprenda com um exemplo passo a passo

O que é ReactJS?

ReactJS é uma biblioteca JavaScript front-end de código aberto para construção de interfaces de usuário. ReactJS é mantido pelo Facebook e por uma comunidade de desenvolvedores e empresas individuais. É amplamente utilizado como base na construção de sites de página única e aplicativos móveis. É muito fácil de usar e permite aos usuários criar componentes de UI reutilizáveis.

Recursos do ReactJS

JSX: JSX é uma extensão do javascript. Embora não seja obrigatório usar JSX no react, é um dos bons recursos e fácil de usar.

Componentes: os componentes são como funções javascript puras que ajudam a tornar o código mais fácil, dividindo a lógica em código independente reutilizável. Podemos usar componentes como funções e componentes como classes. Os componentes também possuem um estado, adereços que facilitam a vida. Dentro de uma classe, o estado de cada um dos adereços é mantido.

DOM virtual: O React cria um dom virtual, ou seja, um cache de estrutura de dados na memória. Somente as alterações finais do DOM foram atualizadas posteriormente no DOM do navegador.

Expressões Javascript: Expressões JS podem ser usadas nos arquivos jsx usando chaves, por exemplo {}.

Vantagens do ReactJS

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

  • ReactJS usa dom virtual que faz uso do 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 componente react. Os componentes podem ser reutilizados e também úteis na manutenção do código.
  • Reactjs é uma biblioteca javascript de código aberto, por isso é fácil de começar.
  • ReactJS se tornou muito popular em um curto espaço de tempo e é mantido pelo Facebook e Instagram. É usado por muitas empresas famosas como Apple, Netflix, etc.
  • O Facebook mantém ReactJS, a biblioteca, por isso é 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 os contras/desvantagens 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 dos outros frameworks preferem manter o Html separado do código javascript.
  • O tamanho do arquivo do ReactJS é grande.

Usando ReactJS do CDN

Para começar a trabalhar com o react, precisamos primeiro instalar o reactjs. Você pode facilmente começar a usar o reactjs usando os arquivos javascript CDN, conforme mostrado abaixo.

Vá para o site oficial do reactjs para obter os links do CDN, ou seja, https://reactjs.org/docs/cdn-links.html e você obterá os arquivos necessários para explicar o seguintewing imagem.

Usando ReactJS do CDN

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 mais recente do react para react-development.js e react-dom.developement.js. Você pode hospedar os arquivos para começar a trabalhar com reactjs.

Caso você esteja planejando usar os arquivos CDN, certifique-se de manter o atributo de origem cruzada, para evitar problemas de domínio cruzado. O código Reactjs não pode ser executado diretamente no navegador e precisa ser convertido usando Babel para 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á o exemplo funcional do ReactJS usando arquivos cdn e 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:

Para saída de produto

Entraremos no details do código no próximo capítulo, vamos ver como trabalhar aqui com arquivos CDN. Diz-se que usar o script babel diretamente não é uma boa prática, e os novatos podem usá-lo apenas para aprender reactjs por enquanto. Na produção, você terá que instalar o react usando o pacote npm.

Usando pacotes NPM

Certifique-se de ter o nodejs instalado. Se não estiver instalado, siga este tutorial para nodejs (https://www.guru99.com/node-js-tutorial.html) instalação.

Depois de instalar o nodejs, crie uma pasta reactproj/.

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

Esta será a aparência da estrutura de pastas:

reactproj\
package.json   

Agora vamos instalar os pacotes que precisamos.

Aqui está a lista de pacotes para reactjs:

npm install react --save-dev
npm install react-dom --save-dev
npm install react-scripts --save-dev

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

Crie uma pasta src / onde todo o código js virá nessa pasta. Todo o código do projeto reactjs estará disponível na pasta src/. Crie um arquivo index.js e adicione import react e react-dom, conforme mostrado abaixo.

index.js

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

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

Devolvemos o código básico para reactjs. Vamos explicar o details disso no próximo capítulo. Queremos exibir Olá, dos tutoriais do Guru99 e o mesmo é dado ao elemento dom com id “root”. Ele é retirado do arquivo index.html, que é o arquivo inicial, conforme mostrado abaixo.

Crie uma pasta public/ e adicione index.html 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 em package.json que cuidará do uso de 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",
  "devDependencies": {
    "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	

Ele abrirá o navegador com 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>

Usando pacotes NPM

Também usaremos o mesmo processo para executar os arquivos javascript nos próximos capítulos. Adicione todos os seus arquivos js e .jsx na pasta src/. A estrutura do arquivo será a seguinte:

reatproj/
	 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 ReactJS para começar com o 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 código simples.
Escreveremos um código simples neste tutorial React JS, onde exibiremos a mensagem “Olá, dos tutoriais do Guru99!”

ReactDOM.render(

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

ReactDOM.render irá adicionar o tag para o elemento com id root. Aqui está o arquivo html que estamos tendo:

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

Passo 3) Compile o código.

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 seguintewing comando:

npm run start

Quando você executa o comando acima, ele irá compilar os arquivos e notificá-lo se houver algum erro, se tudo parecer bem, ele abrirá o navegador e executará o arquivo index.html em http://localhost:3000/index.html

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.
A URL http://localhost:3000 será aberto no navegador assim que o código for compilado conforme mostrado abaixo:

Resultado do projeto First React

O que é JSX?

JSX é uma extensão do javascript. É um script de modelo onde você terá o poder de usar HTML e Javascript 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 UI, precisamos de HTML, e cada elemento no dom terá eventos a serem manipulados, mudanças de estado, etc.

No caso do React, permite utilizar Html e javascript no mesmo arquivo e cuidar das mudanças de estado do dom de forma eficiente.

Expressões em JSX

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

Nos exemplos anteriores do ReactJS, escrevemos 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 iremos alterar o código acima para adicionar expressões. As expressões são usadas entre chaves {} e são expandidas durante o tempo de execução. As expressões em react são iguais às expressões javascript.

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.

Expressões na saída JSX

Você pode ver que a expressão {display} não foi substituída. O React não sabe o que fazer quando uma expressão é usada dentro do 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 text.jsx em index.js.Queremos o h1tag variável a ser usada dentro do script.js, para que a mesma seja exportada conforme mostrado acima no test.jsx

Aqui está 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 test.jsx em index.js, temos que importá-lo primeiro, conforme 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:

saída

O que são componentes no ReactJS?

Os componentes são como funções javascript puras que ajudam a tornar o código mais fácil, dividindo a lógica em código independente 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 retornou a tag h1 conforme mostrado acima. O nome da função atua como um elemento, conforme mostrado abaixo:

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

O componente Olá é usado como uma tag HTML, ou seja, e atribuído a Olá_comp variável e o mesmo é exportado usando export.

Vamos agora usar este componente no arquivo index.js conforme 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:

Saída de componentes em ReactJS

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 maneira:

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.

Classe como saída de componente

O que é um estado no ReactJS?

Um estado é um objeto javascript semelhante a adereços que possuem dados para serem usados ​​com a renderização do reactjs. Os dados de estado são um objeto privado e são usados ​​em componentes dentro de uma classe.

Exemplo de Estado

Aqui está um exemplo prático 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:

Estado na saída ReactJS

O que são acessórios no ReactJS?

Props são propriedades a serem usadas dentro de um componente. Eles atuam como objetos globais ou variáveis ​​que podem ser usadas 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;

Como mostrado acima, adicionamos msg atribuir a Componente. O mesmo pode ser acessado como adereços dentro da função Hello, que é um objeto que terá o msg atributo details, e o mesmo é usado como 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 saída do componente de função

Adereços para componente de classe

Para acessar os adereços 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;

A 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:

Adereços para saída de componente de classe

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

Ciclo de vida de um componente

O ciclo de vida de um componente é dividido em estágios de inicialização, montagem, atualização e desmontagem.

Aqui está uma explicação detalhada sobre cada componente.

Um componente no reactjs tem o seguintewing 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.

Montagem: Nesta fase, o Componente é renderizado dentro do dom. Estamos tendo exposição ao seguintewing métodos no estado de montagem.

  • componentDidMount(): Também é chamado quando o componente acaba de ser adicionado ao dom.
  • render(): Você tem este método para todos os componentes criados. Ele retorna o nó HTML.

Atualizar: neste estado, o dom é interagido por um usuário e atualizado. Por exemplo, você insere algo no textobox, portanto, as propriedades do estado são atualizadas.

Following são os métodos disponíveis no estado de atualização:

  • shouldComponentUpdate(): chamado quando o componente é atualizado.
  • componentDidUpdate() : após a atualização do componente.

Desmontando: esse estado entra em cena quando o componente não é necessário ou removido.

Following são os métodos disponíveis no estado de desmontagem:

Componente willUnmount(): chamado quando o Componente é removido ou destruído.

Exemplo de Trabalho

Aqui está um exemplo prático que mostra os métodos chamados em cada estado.

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')
); 

Quando você verifica a saída no navegador

saída

No console do navegador você obtém:

Saída do console do navegador

Quando o usuário digita o textobox:

Saída de valores do usuário

No console a seguirwing mensagens são exibidas:

Saída do console

Trabalhando com Formulários

Em elementos de entrada HTML do reactjs como , e <select /> tem seu próprio estado e precisa ser atualizado quando o usuário interage usando o método setState().

Neste capítulo, veremos como trabalhar com formulários no 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, então para isso o react fornece um método especial chamado definir Estado, o que ajuda a manter o estado sempre que há uma mudança.

Usamos os eventos onChange e onClick no textobox e enviar botão. Quando o usuário digita dentro do textobox o evento onChange é chamado e o campo name dentro do objeto state state é 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:

Trabalhando com saída de formulários

Passo 1) Digite seu nome no textobox:

Trabalhando com saída de formulários

  1. Clique no botão enviar

Trabalhando com saída de formulários

Trabalhando com eventos no ReactJS

Trabalhar com eventos em reactjs é o mesmo que você faria em javascript. Você pode usar todos os manipuladores de eventos 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, então para isso o react fornece um método especial chamado definir Estado, o que ajuda a manter o estado sempre que há uma mudança.

Usamos eventos em mudança e onClick no textobox e botão. Quando o usuário digita dentro do textobox do em mudança O evento é chamado e o campo de nome dentro do objeto state state é 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:

Trabalhando com saída de eventos

Quando um usuário insere o nome:

Trabalhando com saída de eventos

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

Trabalhando com saída de eventos

Trabalhando com CSS Inline no ReactJS

Daremos uma olhada em um exemplo prático para entender o funcionamento do 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;

Eu adicionei o estilo color: 'red' à 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:

Trabalhando com saída CSS in-line

Você pode criar um objeto do estilo que desejar no elemento e usar uma expressão para adicionar estilo, conforme mostrado no exemplo acima.

Trabalhando com CSS externo no ReactJS

Vamos criar um css externo, para isso crie uma pasta css/ e adicione style.css nela.

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>
    <script src = "out/script.min.js"></script>
  </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 a classe details. Agora vamos testar no navegador.

Trabalhando com saída CSS externa

Isto é o que você vê quando inspeciona a tag h1 no navegador:

Trabalhando com saída CSS externa

Você pode ver que class=”h1tag” foi adicionado com sucesso à tag h1.

Resumo

  • ReactJS é uma biblioteca JavaScript front-end de código aberto para construir a interface do usuário. Ele é mantido pelo Facebook e usado por muitas empresas hoje para desenvolvimento de UI.
  • Os principais recursos do ReactJS incluem JSX, componentes (componentes funcionais e componentes baseados em classe), o ciclo de vida de um componente, adereços e suporte de estado para um componente, trabalhando com expressões javascript.
  • A configuração do projeto ReactJS é explicada usando arquivos CDN e também usando pacotes npm para construir o projeto.
  • JSX é uma extensão do javascript. É um script de modelo onde você terá o poder de usar HTML e javascript juntos.
  • Os componentes são como funções javascript puras que ajudam a tornar o código mais fácil, dividindo a lógica em código independente reutilizável.
  • Um estado é um objeto javascript semelhante a adereços que possuem dados para serem usados ​​com a renderização do reactjs. Os dados de estado são um objeto privado e são usados ​​em componentes dentro de uma classe.
  • Props são propriedades a serem usadas dentro de um componente.
  • O ciclo de vida de um componente é dividido em estágios de inicialização, montagem, atualização e desmontagem.
  • Em elementos de entrada HTML do reactjs como , e <select /> tem seu próprio estado e precisa ser atualizado quando o usuário interage usando o método setState().
  • Trabalhar com eventos em reactjs é o mesmo que você faria em javascript. Você pode usar todos os manipuladores de eventos usados ​​em javascript. O método setState() é usado para atualizar o estado quando o usuário interage com qualquer elemento HTML.
  • ReactJS permite que você trabalhe com CSS externo e também com CSS embutido usando expressão javascript.

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