 |
|
||||
 Planilha Web - Planilhas e Calculadoras online para estudantes e profissionais de Engenharia Civil, Engenharia Elétrica e Engenharia Mecânica. |
|||||
Você está aqui: React.js ::: Dicas & Truques ::: Passos Iniciais |
Aprenda a desenvolver aplicações React diretamente no HTML, sem usar a ferramenta create-react-appQuantidade de visualizações: 1575 vezes |
|
Embora seja recomendável usar a ferramenta create-react-app para criar suas aplicações React, às vezes gostaríamos de testar algumas idéias diretamente no código HTML, ou seja, sem precisar passar pelo processo "npx create-react-app" -> "npm start" -> "npm run build". Tudo que temos que fazer é incluir três scripts, a saber, react.production.min.js, react-dom.production.min.js e babel.min.js. Estes scripts estão disponíveis para inclusão via CDN (o mais recomendado) ou você pode baixá-los para uso local, o que, com certeza, vai deixar o processo de desenvolvimento ainda mais rápido. Para obter os CDS ou fazer o download individual dos mesmos, basta pesquisá-los no Google por seus nomes. Nesta dica eu optei por baixar os scripts e rodá-los a partir da minha máquina de desenvolvimento. Os dois primeiros scripts nos permitem escrever código React em nossos códigos JavaScript, e o terceiro, babel.min.js, nos permite usar a síntáxe JSX (JavaScript XML) e também dar suporte ao JavaScript ES6 para os navegadores mais antigos. Então, vamos escrever código? Veja a listagem a seguir: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Estudos React</title>
<script src="js/react.production.min.js"></script>
<script src="js/react-dom.production.min.js"></script>
<script src="js/babel.min.js"></script>
</head>
<body>
<h1>Primeira aplicação React direto no HTML</h1>
<div id="minha_app"></div>
<script type="text/babel">
// vmaos criar um novo compomente React
class Mensagem extends React.Component{
render() {
return <h1>Olá, bem-vindo(a) ao React!</h1>
}
};
// vamos exibir o componente Mensagem na div minha_app
ReactDOM.render(<Mensagem />, document.getElementById('minha_app'));
</script>
</body>
</html>
Ao abrir esta página no navegador teremos o seguinte resultado: Primeira aplicação React direto no HTML Olá, bem-vindo(a) ao React! Pronto! Agora você pode testar idéias no React de forma bem rápida e fácil. Mas, lembre-se, em aplicações mais complexas, o uso da ferramenta create-react-app continua sendo o mais recomendado. |
 Link para compartilhar na Internet ou com seus amigos: |
Veja mais Dicas e truques de React.js |
Dicas e truques de outras linguagens |
|
VB.NET - Como retornar a versão do .NET a partir de seus códigos VB.NET usando Environment.Version.ToString() |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
