----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

C:\Users\Osmar>cd c:\estudos_react
c:\estudos_react>npx create-react-app hello-world

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

c:\estudos_react>cd hello-world
c:\estudos_react\hello-world>npm start

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

import React from 'react';

// corpo do componente
const HelloWorld = () => {
  // uma função que exibe uma mensagem
  function exibirMensagem() {
    window.alert('Hello, World!');
  }
  
  // o que vai ser exibido pelo componente
  return (
    <button onClick={exibirMensagem}>
      Clique Aqui</button>
  );
};

// exporta o componente
export default HelloWorld;

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

import React from 'react';
import HelloWorld from './HelloWorld';
import './App.css';

function App() {
  return (
    <div className="App">
      <HelloWorld />
    </div>
  );
}

export default App;

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

// vamos importar o useState e useRef
import {useState, useRef} from 'react';

// função App() que será exportada
export default function App() {
  // vamos criar uma referência para a caixa
  // de texto. Veja que esta referência será
  // usada na declaração do elemento input type text
  const txtNome = useRef(null);

  // vamos usar um estado para guardarmos o conteúdo
  // da caixa de texto
  const [nomeAtualizado, setNomeAtualizado] = useState('');

  // aqui nós gerenciamos o evento onClick do botão
  const tratarEventoClick = () => {
    // vamos obter o conteúdo da caixa de texto
    // usando "txtNome.current.value"
    setNomeAtualizado(txtNome.current.value);
  };

  // e retornamos para renderização
  return (
    <div>
      <input type="text"
        id="nome" name="nome"
        ref={txtNome}/>

      <h2>Nome Atualizado: {nomeAtualizado}</h2>

      <button onClick={tratarEventoClick}>
	Atualizar Estado</button>
    </div>
  );
}

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

// vamos fazer os imports necessários
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

// definimos a raiz da aplicação React
const root = ReactDOM.createRoot(
  document.getElementById('root'));

// e renderizamos a aplicação no navegador
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

// vamos importar o useState
import {useState} from 'react';

// função App() que será exportada
export default function App() {
  // vamos criar dois states e suas funções
  // correspondentes
  const [nome, setNome] = useState('');
  const [nomeAtualizado, setNomeAtualizado] = useState(nome);

  // aqui nós gerenciamos o evento onChange da caixa
  // de texto
  const tratarEventoChange = (event) => {
    // e chamamos a função que atualiza o estado nome
    setNome(event.target.value);
  };

  // aqui nós gerenciamos o evento onClick do botão
  const tratarEventoClick = () => {
    // aqui nós transferimos o valor do estado
    // nome para o estado nomeAtualizado
    setNomeAtualizado(nome);
  };

  // e retornamos para renderização
  return (
    <div>
      <input type="text"
        id="nome" name="nome"
        onChange={tratarEventoChange}
        value={nome}/>

      <h2>Nome Informado: {nome}</h2>

      <h2>Nome Atualizado: {nomeAtualizado}</h2>

      <button onClick={tratarEventoClick}>
	 Atualizar Estado</button>
    </div>
  );
}

----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------

// vamos fazer os imports necessários
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

// definimos a raiz da aplicação React
const root = ReactDOM.createRoot(
  document.getElementById('root'));

// e renderizamos a aplicação no navegador
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

# cria uma string
palavra = "ESTUDAR"
letras = ['A', 'B', 'C']
letras[0], letras[2] = palavra[3], palavra[1]
print(letras)