 |
|
||||
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: 647 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: 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: 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:
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:
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: |
Veja mais Dicas e truques de React |
Dicas e truques de outras linguagens |
|
C# - Como abrir outros formulários de sua aplicação C# Windows Forms a partir do formulário principal |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
