 |
|
||||
 Código-Fonte Controle de Estoque completo com código fonte em PHP, MySQL, Bootstrap, jQuery - 100% funcional e fácil de modificar e implementar novas funcionalidadesTenha o seu próprio sistema de controle de estoque web. com cadastro de produtos, categorias, fornecedores, entradas e saídas de produtos, com relatórios por data, margem de lucro e muito mais. Código simples e fácil de modificar. Acompanha instruções para instalação e criação do banco de dados MySQL. Clique aqui e saiba mais |
|||||
Você está aqui: React ::: Dicas & Truques ::: Aplicações com código fonte completo |
Como criar um "Hello, World" em React - Curso de React para iniciantesQuantidade de visualizações: 624 vezes |
|
Em outra dica do site nós falamos sobre o que é o React, como instalar e como testar este framework JavaScript. Agora vamos, de forma bem rápida, escrever a famosa aplicação "Hello, World!" em React. A aplicação "Olá, Mundo!" é, em geral, o primeiro código que escrevemos em uma determinada linguagem de programação ou framework, com o propósito de testar a instalação e os componentes baixados. Como criar uma aplicação React usando o CLI do React Para criar a nossa aplicação "Hello, World!" em React nós vamos utilizar a ferramenta create-react-app, que é instalada usando o npm do Node.js. Então, se você ainda não tem essa ferramenta instalada, reveja nossas dicas anteriores. O primeiro passo é criar um diretório para a nossa aplicação. Para este exemplo eu criei um diretório chamado "C:\estudos_react". Em seguida, via janela de terminal, navegue até este diretório e dispare o seguinte comando: ---------------------------------------------------------------------- Se precisar de ajuda para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- C:\Users\Osmar>cd c:\estudos_react c:\estudos_react>npx create-react-app hello-world Muita coisa vai acontecer agora. Recomendo que você busque um copo de café e se sente confortavelmente, pois uns 100MB de arquivos serão baixados e instalados. Depois disso nós veremos a seguinte mensagem: Success! Created hello-world at c:\estudos_react\hello-world Inside that directory, you can run several commands: npm start Starts the development server. npm run build Bundles the app into static files for production. npm test Starts the test runner. npm run eject Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can?t go back! We suggest that you begin by typing: cd hello-world npm start Happy hacking! Se você viu essas mensagens, então é sinal de que tudo correu bem. Na mesma janela de terminal, dispare os comandos a seguir: ---------------------------------------------------------------------- Se precisar de ajuda para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- c:\estudos_react>cd hello-world c:\estudos_react\hello-world>npm start Depois de alguns segundos você verá uma mensagem indicando que o Webpack compilou os arquivos com sucesso e poderemos acessar a aplicação React no endereço http://localhost:3000. Obteve resultado parecido? Deixe o servidor e o navegador abertos e vamos escrever a nossa aplicação "Hello, World!" agora. Como criar o componente "Hello, World" Para a criação da nossa aplicação "Olá, Mundo!" em React, nós já vamos aprender como criar um componente. Em React, os componentes são criados como um arquivo .jsx ou .js. Assim, vamos em frente e criar o componente HelloWorld.js. Dentro do diretório "C:\estudos_react\hello-world\src" crie um arquivo HelloWorld.js com o seguinte conteúdo: ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
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;
O nosso componente é um dos mais simples que se pode criar em React, mas não se preocupe. Nossa intenção é mostrar como o framework funciona na prática. Tudo que o nosso componente React possui é um botão Button que exibe uma mensagem window.alert() ao ser clicado. Agora, dentro do diretório "C:\estudos_react\hello-world\src", localize o arquivo App.js e altere seu código para a seguinte listagem: ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
import React from 'react';
import HelloWorld from './HelloWorld';
import './App.css';
function App() {
return (
<div className="App">
<HelloWorld />
</div>
);
}
export default App;
Pronto! Agora é só abrir a aplicação novamente e conferir o resultado no navegador. Se tudo correu bem você deverá ver um botão na página. Clique nele e uma mensagem window.alert() será exibida. Agora você pode brincar com o código à vontade. Experimente alterar o CSS, adicionar mais funções ao componente React, criar novos componentes, adicionar um formulário, etc. Sua criatividade é o limite. Bons estudos. |
 Link para compartilhar na Internet ou com seus amigos: |
React ::: Elementos de Formulários HTML ::: input type text Element/Object |
Como obter o conteúdo de uma caixa de texto em React usando a função useRef() para acessar os elementos HTMLQuantidade de visualizações: 660 vezes |
|
Nesta dica mostrarei como podemos usar useRef() para criar uma referência para um elemento HTML <input type="text">. Em seguida nós vamos usar a propriedade current.value para retornar o conteúdo da caixa de texto e atualizar o estado nomeAtualizado, criado a partir da função useState(). Este código, embora simples, é o ponto de partida para aplicações React bem interessantes, pois não fazemos uso do evento onChange das caixas de texto para atualizar o estado da aplicação. Isso, como é fácil de se perceber, economiza os recursos gastos em processamento desnecessário. Veja o código para App.js: ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
// 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>
);
}
E aqui está o código para o index.js: ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
// 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>
);
Execute a aplicação React, digite um nome na caixa de texto e clique o botão Atualizar Estado. Somente neste momento é que o conteúdo da caixa de texto será transferido para o estado nomeAtualizado e refletido no elemento <h2>. |
React ::: Elementos de Formulários HTML ::: input type text Element/Object |
Como obter o texto digitado em uma caixa de texto em React usando useState()Quantidade de visualizações: 561 vezes |
|
Nesta dica mostrarei como podemos retornar o texto digitado em um elemento HTML <input type="text"> ao clicarmos em um botão. Para isso nós faremos uso do gerencimento de estado proporcionado pelo objeto useState do React. Note que teremos dois estados: nome e nomeAtualizado, que estarão conectados às funções setNome() e setNomeAtualizado(). No momento que o texto é digitado na caixa de texto, automaticamente o estado nome é atualizado para corresponder ao contéudo exato do elemento HTML <input type="text">. Somente quando o botão é clicado é que transferimos o valor do estado nome para o estado nomeAtualizado, por meio de uma chamada à função setNomeAtualizado. Veja o código completo para o App.js: ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
// 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>
);
}
E aqui está o código para o index.js: ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
// 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>
);
Execute o exemplo e você verá uma caixa de texto <input type="text">, um botão <button> e dois elementos <h2>. Quando digitamos na caixa de texto, automaticamente o estado nome é atualizado. Ao clicarmos no botão, o estado nome é transferido para o estado nomeAtualizado, tudo isso é refletido de imediato na página. |
Vamos testar seus conhecimentos em JavaScript |
Qual o resultado da execução do seguinte código JavaScript?document.write(1 + "2" + "2"); A) O valor 122 será exibido. B) O valor 5 será exibido. C) O valor 32 será exibido. D) O valor NaN será exibido. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Engenharia Civil - Instalações Hidráulicas Prediais |
| Água Fria: Sistemas de distribuição Em instalações prediais de água fria, como é denominada a tubulação que liga o ramal ao ponto de utilização? A) Aparelho sanitário. B) Registro. C) Alimentador predial. D) Extravasor. E) Sub-ramal. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Engenharia Civil - Construção Civil |
| Formas: Confecção e colocação O concreto deve estar curado e liberado para a remoção das formas segundo recomendações técnicas. Quando não se utiliza concreto especial ou aditivo acelerador de pega, para vigas de pequeno vão, qual é o prazo mínimo para a retirada das formas inferiores, com a manutenção das principais escoras? A) Cinco dias. B) Sete dias. C) Dez dias. D) Quatorze dias. E) Vinte e um dias. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Fenômeno de Transportes e Hidráulica |
| Equação da continuidade Um cano de 2,00 cm de diâmetro se estreita para 8,00 mm. No primeiro segmento, um líquido flui com velocidade de 4,00 m/s. A velocidade do líquido no segundo segmento e a vazão de volume no cano valem, respectivamente: A) 16,0 m/s e 1,26 x 10-3 m3/s. B) 100 m/s e 5,03 x 10-4 m3/s. C) 25,0 m/s e 4,00 x 10-4 m3/s. D) 25,0 m/s e 1,26 x 10-3 m3/s. E) 1,00 m/s e 1,26 m3/s. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em JavaScript |
Analise o seguinte trecho de código JavaScriptvar valores = new Array(2, 4); Este código A) cria uma matriz chamada valores com 2 linhas e 4 colunas. B) cria um array valores e atribui os valores 2 e 4 para valores[1] e valores[2]. C) cria um array valores e atribui os valores 2 e 4 para valores[0] e valores[1]. D) cria um array de três elementos com os índices variando de 2 até 4. Verificar Resposta Estudar Cards Todas as Questões |
Veja mais Dicas e truques de React |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
