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 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.

Javascript Expressões: 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 a 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 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:

Entraremos em detalhes 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. Explicaremos os detalhes 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>

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

O que é JSX?

JSX é uma extensão para javascript. É um script de template 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.

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:

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:

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.

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:

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

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 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.

Montagem: Nesta fase, o Componente é renderizado dentro do dom. Estamos expostos aos seguintes 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 na caixa de texto para que as propriedades do estado sejam atualizadas.

A seguir estã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.

A seguir estã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

No console do navegador você obtém:

Quando o usuário entra na caixa de texto:

No console as seguintes mensagens são exibidas:

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 na caixa de texto e no botão enviar. Quando o usuário entra dentro do textbox 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:

Etapa 1) Digite seu nome na caixa de texto:

Clique no botão enviar

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 onClick na caixa de texto e no botão. Quando o usuário entra dentro da caixa de texto o 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:

Quando um usuário insere o nome:

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

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:

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 os detalhes da classe. Agora vamos testar no navegador.

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

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

Resumo

ReactJS é um front-end de código aberto JavaBiblioteca de scripts para construir a interface do usuário. É mantida pelo Facebook e usada 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)

O que é ReactJS?

Recursos do ReactJS

Vantagens do ReactJS

Desvantagens do ReactJS

Usando ReactJS do CDN

Para desenvolvedores

Para produção

ARTIGOS RELACIONADOS

Usando pacotes NPM

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

O que é JSX?

Por que precisamos de JSX no React?

Expressões em JSX

O que são componentes no ReactJS?

Componentes como funções

Classe como componente

O que é um estado no ReactJS?

Exemplo de Estado

O que são acessórios no ReactJS?

Adereços para componente de função

Adereços para componente de classe

Ciclo de vida de um componente

Exemplo de Trabalho

Trabalhando com Formulários

Trabalhando com eventos no ReactJS

Trabalhando com CSS Inline no ReactJS

Trabalhando com CSS externo no ReactJS

Resumo

Assine a newsletter