Nessa aplicação temos um card com o nome Fulano e um botão mudar, que quando clicado, muda o nome para Beltrano, se clicado novamente volta a ser Fulano, ele alterna.

A aplicação é bem bobinha de propósito, pra que a gente foque no que interessa.

Partiu código! 😉

Opções para o código

Você pode fazer um pull da branch useState-hook-example do meu repositório:


git clone -b useState-hook-example git@github.com:toticavalcanti/react-hooks-usestate-example.git

Ou pode baixar o projeto zipado.

Ou ainda gerar a aplicação através do comando:


npx create-react-app react-hooks-usestate-example

E depois fazer as alterações para a aplicação ficar igual a minha.

Pra essa aula, vou criar novamente do zero

Vamos usar o npx e o create-react-app para gerar o esqueleto da aplicação.

O npx significa Node Package Execute e vem com o npm.

É um executor de pacote npm que pode executar qualquer pacote que você quiser, mesmo sem instalar esses pacotes.

Então, pra gerar digite:


npx create-react-app new-app

Pronto, já temos a aplicação padrão React pronta pra começar.

Entre na pasta da aplicação


cd create-react-app

Pronto, já temos a aplicação padrão React pronta pra começar.

Entre na pasta da aplicação


cd create-react-app

Abra o src/App.js e substitua o conteúdo por esse:

src/App.js


import React from 'react';

import StateClassComponent from './components/use-state-component/use-state-example-component';

import './App.css';

const App = props => {
return (
    <div className='App'>
      <StateClassComponent />
    </div>
  );
};
export default App;

Crie uma pasta components e dentro crie dois arquivos: card.component.jsx e card.css

src/components/card/card.component.jsx



import React from 'react';

import './card.css';const Card = ( { children } ) => (
  <div className='card'>
    { children }
  </div>
  );
export default Card;

src/components/card/card.css


.card {
  background-color: lightPINK;
  min-width: 300px;
  max-width: 600px;
  min-height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  flex-direction: column;
  padding: 30px;
  font-size: 20px;
}

.card > button {
  background-color: white;
  border: 1px solid black;
  cursor: pointer;
  border-radius: 5px;
  min-width: 90px;
  min-height: 30px;
  font-size: 16px;
  margin: 10px 0;
  padding: 10px;
}

Modifique o css do App, substitua o conteúdo do App.css pelo conteúdo abaixo.

src/App.css


.App {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.App > .card {
  margin-top: 25px;
}

Agora crie uma pasta chamada use-state-component também dentro da pasta components e dentro crie o arquivo: use-state-example-component.jsx.

Versão usando componentes baseados em classes.

src/components/use-state-component/use-state-example-component.jsx


import React from 'react';

import Card from '../card/card.component';  

export class StateClassComponent extends React.Component {
  constructor() {
    super();

    this.state = {
      name: 'Fulano'
    };
  }

  render() {
    return (
      <Card>
        <h1> {this.state.name} </h1>
        <button onClick={(e) => this.setState({ 
          name: this.state.name === 'Fulano' ? 'Beltrano' : 'Fulano'
          })}>
          Mudar
        </button>
      </Card>
    );
  }
}

export default StateClassComponent;

Versão usando componentes funcionais usando hooks, nesse caso o hook useState.

src/components/use-state-component/use-state-example-component.jsx


import React, { useState } from 'react';

import Card from '../card/card.component';  

const UseStateExample = () => {
  const [name, setName] = useState('Fulano');
  return (
    <Card>
      <h1> {name} </h1>
      <button onClick={(e) => setName(name === 'Fulano' ? 'Beltrano' : 'Fulano')}>Mudar</button>
    </Card>
  );
};

export default UseStateExample;

Faça o teste com cada uma das versões.