React

Status: Finalizado ✅

O React é uma biblioteca JavaScript voltada para construção de UI (User Interface), possibilitando que a criação dessas telas seja feita de forma simples e fácil.

O React tem a capacidade de renderizar a alteração ou os componentes afetados sem influenciar o outro, o que significa que, em vez de renderizar a página inteira novamente, ele renderiza apenas a parte da mudança.

Outra caracterísca do React, é que ele trabalha com componentes, que permite a divisão da UI em elementos independentes e reutilizáveis.

Documentação Oficial

Para mais detalhes, consulte a Documentação Oficial do React.

Sintaxe

O React utiliza uma sintaxe chamada HTML-in-JavaScript, o JSX. É meio que uma incorporação de HTML dentro do código JavaScript. Aqui vai um exemplo:

const element = <h1>Hello, world!</h1>;

Geralmene em prejetos front-end escreveriamos HTML, CSS e Javascript em arquivos diferentes, o JSX permite com que HTML e o Javascript sejam escritos incorporados, em um unico arquivo.

O projeto ObraPlay é escrito em Typescript, nesse caso a sintaxe usada no React é a TSX, que também é a incorporação do HTML no Typescript.

Componentes

Os componentes React são elementos da UI dividos, independetes e que podem ser reutilizáveis. Basicamente é como pegar uma tela e quebrar ela em partes pequenas, esses são os componentes React.

Vale a pena dar uma olhada na documentação sobre Componentes React.

Props

Props é uma abreviação de Properties (Propriedades), são informações que podem ser passadas para um componente, essas informações podem ser strings, numeros ou até mesmo funções. E esse valor pode ser passado para o componente que recebe essa prop.

Hooks

Os hooks são funções do JavaScript implementadas no React, eles permitem com uma forma alternativa para escrever componentes baseados em classe. Eles ajudam a tornar o código mais legível e objetivo.

• Código antes:

import React from 'react';

class Counter extends React.Component {
  constructor() {
    this.state = { count: 0 };
    this.incrementCount = this.incrementCount.bind(this);
  }
  incrementCount() {
    this.setState({ count: this.state.count + 1 });
  }

  componentDidMount() { document.title = `Você clicou ${this.state.count} vezes`; }
  componentDidUpdate() { document.title = `Você clicou ${this.state.count} vezes`; }

  render() {
    return (
      <div>
        <p>Você clicou {this.state.count} vezes</p>
        <button onClick={this.incrementCount}>Clique Aqui</button>
      </div>
    );
  }
}

export default Counter;

• Depois do Hooks:

  import React, { Component, useState } from 'react';
import useDocumentTitle from '@rehooks/document-title';

function Counter() {
  const [count, setCount] = useState(0);
  const incrementCount = () => setCount(count + 1);
  useDocumentTitle(`You clicked ${count} times`);

  return (
    <div>
      <p>Você clicou {count} vezes</p>
      <button onClick={incrementCount}>Clique Aqui</button>
    </div>
  )
}

export default Counter;

Exemplos de hooks

- useEffect()

- useState()

- useContext()