React básico

Neste post vou mostrar os conceitos mais básicos do React que permitirão você começar a se aventurar nessa tecnologia.

Um site que eu acho bem legal para treinar e validar alguns conceitos é o CodeSandbox através dele você consegue criar seus apps totalmente online e ainda compartilhar o link do mesmo com outras pessoas. Para acompanhar os exemplos deste post acesse o site do CodeSandbox e crie um React app

React Render HTML

O React renderiza HTML através através do uso da função ReactDOM.render(). Esta função recebe dois parâmetros o primeiro é o HTML que se deseja renderizar e o segundo é o HTML que irá comportar o primeiro, pense nesse segundo parâmetro como sendo um container onde se deseja renderizar algo.

Como você pode ver na linha 6 retornamos o rootElement (container) onde será renderizado nosso React app e em seguida é chamado o método ReactDOM.render() onde o primeiro parâmetro recebe o component App do React (vamos falar de componentes adiante) e o segundo recebe o rootElement que foi retornado na linha 6

src/index.js

React JSX

JSX significa Javascript XML ele nos permite escrever HTML e colocá-los no DOM sem nenhum método createElement() e/ou appendChild(). O que acontece é que o JSX converte tags HTML em elementos React. Existe também o TSX que a versão do Typescript

No JSX/TSX você deve escrever suas expressões dentro de { }. Esta expressão pode ser uma váriavel, propriedade ou qualquer outra expressão Javascript válida.

No exemplo abaixo eu criei a variável greeting e usei o valor da mesma no JSX de retorno.

Embora o que está dentro do return seja HTML ele deve ser pensado aqui como JSX pois estamos trabalhando com React

src/App.js

React Components

Componentes nada mais são que pequenos pedaços reutilizáveis de código. Podemos criar componentes de dois tipos Função e Classe

Na raiz do seu projeto do CodeSandbox, crie o folder components e adicione dois arquivos a ele: classExampleComponent.jsx e functionExampleComponent.jsx

components/classExampleComponent.jsx

import React from "react";

export default class Greeting extends React.Component {
 render() {
    return <h2>Hi, I'm Class!</h2>;
  }
}

components/functionExampleComponent.jsx

import React from "react";

export default function() {
    return <p>Hey I'm a function</p>;
}

Eu diria que a escolha entre o uso de classe ou função é mera questão de gosto pessoal. Em particular eu prefiro o uso de componentes do tipo função devido a sintaxe mais simples.

Componentes são simples de usar e um componente pode interagir com vários outros. Basta importar o componente para onde deseja utilizá-lo e depois chamá-lo como se fosse uma tag HTML (lembre-se que por se tratar e React o termo correto é JSX) e pronto!

React Props

Props são parâmetros passados via atributos HTML para components React. Esses parâmetros são passados do componente pai para os componentes filhos. Podem ser valores ou até mesmo funções de callback

Note que o componente App é pai de classExampleComponent e functionExampleComponent e foi passado o atributo greeting em ambos os filhos. O atributo greeting e seu valor respectivo será recebido e acessado pelos filhos através do Props

src/App.js

import React from "react";
import "./styles.css";
import MyFunc from "../components/functionExampleComponent";
import MyClass from "../components/classExampleComponent";

export default function App() {
 return (
          <div className="App">
              <MyFunc   greeting="Hi I'm a parameter passed via props to a class component" />
              <MyClass greeting="Hi I'm a parameter passed via props to a function component"     />
            </div>
         );
}

components/classExampleComponent.jsx

import React from "react";

export default class Greeting extends React.Component {
  render() {
      return <h2>{this.props.greeting}</h2>;
  }
}

components/functionExampleComponent.jsx

import React from "react";

export default function(props) {
    return <p>{props.greeting}</p>;
}

React State

O conceito de state é talvez um dos mais importantes na minha opinião. Um state object é onde armazenamos valores de propriedades que pertencem a um componente. Quando este objeto tem algum de seus valores alterados o componente é renderizado novamente.

src/App.js (Exemplo com componente do tipo function)

import React, { useState } from "react";
import "./styles.css";
import MyFunc from "../components/functionExampleComponent";
import MyClass from "../components/classExampleComponent";

export default function App() {
 // count é a variável de estado e setCount é o método que permite alterar o valor de count
 const [count, setCount] = useState(0);

 return (
         <div className="App">
                <MyFunc greeting={`I'm class Version ${count}`} />
                <MyClass greeting={`I'm function Version ${count}`} />
                <p>
                   <button onClick={() => setCount(count +                    1)}>Testing state</button>
                </p>
          </div>
          );
}

Para usar state em um componente do tipo function é necessário importar o useState. No exemplo acima eu criei uma propriedade de estado count no componente pai e linkei o valor da mesma aos componentes filhos através do uso de props.

Para que o React entenda que o estado foi alterado está alteração deve ser feita através do método referente a váriavel de estado no caso deste é exemplo é o setCount

Toda vez que o valor de count for alterado, através do clique do botão, o componente pai será renderizado novamente e consequentemente os valores passados aos componentes filhos serão atualizados.

Se você alterar o código do clique do botão para ficar como o exemplo abaixo um erro será lançado. Você consegue pensar no porque? Deixe a resposta nos comentários.

<button onClick={() =>setCount(count++)}>Testing state</button>

src/App.js (Exemplo com componente do tipo class)

import React from "react";
import "./styles.css";
import MyFunc from "../components/functionExampleComponent";
import MyClass from "../components/classExampleComponent";

export default class App extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 count: 0
    };
  }
 render() {
 return (
 <div className="App">
        <MyFunc greeting={`I'm class Version ${this.state.count}`} />
        <MyClass greeting={`I'm function Version ${this.state.count}`}          />
        <p>
          <button
 onClick={() => this.setState({ count: this.state.count + 1 })}
 >
            Testing state
          </button>
        </p>
      </div>
    );
  }
}

Como pode ver usar class é muito mais verboso o que significa escrever mais código para fazer a mesma coisa.

React CSS

No React, class é um palavra reservada então para atribuir uma classe CSS a um elemento utilize o atributo className

<div className="App">

React Events

Eventos em React são escritos com a sintaxe camelCase:

onClick ao invés de onclick

Os event handlers são escritos entro de chaves { }

onClick={myEvent} ao invés de onclick="myEvent()"

React

<button onClick={doSomenting}>Test my event</button>

HTML

<button onClick="doSomething()">Test my event</button>

Para passar parâmetros para um event handler do React existem duas formas:

Usando Arrow Function

<button onClick={() =>setCount(count++)}>Testing state</button>

Fazendo o bind do event handler ao this

<button onClick={setCount.bind(this, count + 1)}>Testing state</button>

Sempre opte pelo uso de Arrow Function pois com elas o this sempre irá representar o objeto que criou a Arrow Function do contrário terá sempre que ficar usando o métod bind.

Para acessar o objeto do evento basta passá-lo como parâmetro.

No caso de não estar usando uma Arrow Function o próprio this passado como parâmetro no bind já é a referência do evento

<button onClick={(event) => doSomenting(event)}>Test my event</button>

Fazendo Requests com Fetch

Esta parte é um plus pois, não se trata de React e sim de uma API da Web.

A Fetch API fornece uma interface para buscar recursos (por exemplo, em toda a rede). Parecerá familiar para qualquer pessoa que tenha usado XMLHttpRequest, porém a nova API oferece um conjunto de recursos mais poderoso e flexível.

GET

const response = await fetch('my_url');
const data = await response.json();
return data;

POST

await fetch('my_url', {
 method: 'post',
 headers: { 'Content-Type': 'application/json' },
 body: JSON.stringify(objectToPost)
});

PUT

await fetch('my_url/' + id, {
 method: 'put',
 headers: { 'Content-Type': 'application/json' },
 body: JSON.stringify(objectToPost)
});

DELETE

await fetch('todo/' + id, {
 method: 'delete',
 headers: { 'Content-Type': 'application/json' }
});

O uso do await na frente da chamada do método indica que o mesmo está sendo chamdo dentro de uma funçao assíncrona. Portanto, se você NÃO está em um método assíncrono resolva o fetch através de promise.

Pense no Fetch como uma nova alternativa ao Ajax do JQuery.

Dica: Neste post eu criei um CRUD completo utilizando React e .NetCore. Nele você verá vários exemplos do uso do Fetch API

Considerações finais

O React em si é bem simples e há diversas abordagens para se trabalhar com ele.

Em particular eu prefiro criar components do tipo function pois, estes possuem uma sintaxe muito simples de ler e fixar na cabeça.

Também prefiro utilizar o Typescript pois, através dele é possível validar melhor o seu código tipando as coisas (veja o exemplo deste post ) o que com certeza irá previnir bugs bobos.