Aula 11 – React – Componentes – Classes – Hooks – useState

More videos
   

Aula 11 – React – ComponentesClassesHooks – useState

Tutorial React

Tutorial React

Voltar para página principal do blog

Todas as aulas desse curso

Aula 10                        Aula 12

Meus Canais

Toti:

https://www.youtube.com/channel/UCUEtjLuDpcOvR3mIUr-viOA

Backing track / Play-along:

https://www.youtube.com/channel/UCT3TryVMqTqYBjf5g5WAHfA

Código Fluente

https://www.youtube.com/channel/UCgn-O-88XBAwdG9gUWkkb0w

Putz!

https://www.youtube.com/channel/UCZXop2-CECwyFYmHbhnAkAw

Se gostarem do conteúdo dêem um joinha 👍 na página do Código Fluente no
Facebook

Esse é o link do código fluente no Pinterest

Meus links de afiliados:

Hostinger

Digital Ocean

One.com

Melhore seu NETWORKING

Participe de comunidades de desenvolvedores:

Fiquem a vontade para me adicionar ao linkedin.

E também para me seguir no GITHUB.

Ah, se puder, clica na estrela nos meus repositórios pra dá uma força ao meu perfil no GITHUB

Código da aula:

https://github.com/toticavalcanti/react-hooks-usestate-example/tree/useState-hook-example

Link da documentação oficial:

https://reactjs.org/tutorial/

Aula 11 – React – ComponentesClassesHooks – useState

Nessa aula vamos criar um exemplo bem simples de aplicação React.

Vamos comparar o uso de classes e o uso do hook useState.

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.

Use o comando:


npm start

 Ou


yarn start

Sua aplicação deverá abrir no browser automaticamente.

Ficamos por aqui, até a próxima.  😉

Aula 10                        Aula 12

Todas as aulas desse curso

Voltar para página principal do blog

Toti:

https://www.youtube.com/channel/UCUEtjLuDpcOvR3mIUr-viOA

Backing track / Play-along:

https://www.youtube.com/channel/UCT3TryVMqTqYBjf5g5WAHfA

Código Fluente

https://www.youtube.com/channel/UCgn-O-88XBAwdG9gUWkkb0w

Putz!

https://www.youtube.com/channel/UCZXop2-CECwyFYmHbhnAkAw

Se gostarem do conteúdo dêem um joinha 👍 na página do Código Fluente no
Facebook

Esse é o link do código fluente no Pinterest

Meus links de afiliados:

Hostinger

Digital Ocean

One.com

Código da aula:

https://github.com/toticavalcanti/react-hooks-usestate-example/tree/useState-hook-example

Se gostarem do conteúdo dêem um joinha 👍 na página do Código Fluente no
Facebook

Link do código fluente no Pinterest

Obrigado, até a próxima e bons estudos. 😉

 

About The Author
-

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>