Reagir Introdução
Para usar o React em produção, você precisa do npm que está incluído no Node.js .
Para obter uma visão geral do que é React, você pode escrever código React diretamente em HTML.
Mas para usar o React em produção, você precisa do npm e do Node.js instalados.
Reagir diretamente em HTML
A maneira mais rápida de começar a aprender React é escrever React diretamente em seus arquivos HTML.
Espaços W3Schools
A maneira mais fácil de começar a criar arquivos HTML é o W3Schools Spaces!
É o lugar perfeito para criar, editar e compartilhar seu trabalho com outras pessoas!
Comece incluindo três scripts, os dois primeiros nos permitem escrever código React em nossos JavaScripts, e o terceiro, Babel, nos permite escrever sintaxe JSX e ES6 em navegadores mais antigos.
Você aprenderá mais sobre JSX no capítulo React JSX .
Exemplo
Inclua três CDNs em seu arquivo HTML:
<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="mydiv"></div> <script type="text/babel"> function Hello() { return <h1>Hello World!</h1>;} ReactDOM.render(<Hello />, document.getElementById('mydiv')) </script> </body> </html>
Esta maneira de usar o React pode ser boa para fins de teste, mas para produção você precisará configurar um ambiente React .
Obter certificação!
$ 95 INSCRIÇÃO
Configurando um ambiente React
Se você tiver npx e Node.js instalados, poderá criar um aplicativo React usando create-react-app.
Se você instalou create-react-appglobalmente anteriormente, é recomendável desinstalar o pacote para garantir que o npx sempre use a versão mais recente do create-react-app.
Para desinstalar, execute este comando: npm uninstall -g create-react-app.
Execute este comando para criar um aplicativo React chamado
my-react-app:
npx create-react-app my-react-app
O create-react-appirá configurar tudo o que você precisa para executar um aplicativo React.
Execute o aplicativo React
Agora você está pronto para executar seu primeiro aplicativo React real !
Execute este comando para mover para o my-react-appdiretório:
cd my-react-app
Execute este comando para executar o aplicativo React
my-react-app:
npm start
Uma nova janela do navegador irá aparecer com seu recém-criado React App! Caso contrário, abra seu navegador e digite
localhost:3000na barra de endereços.
O resultado:
Modificar o aplicativo React
Até aí tudo bem, mas como faço para alterar o conteúdo?
Procure no my-react-appdiretório e você encontrará uma
srcpasta. Dentro da
srcpasta existe um arquivo chamado
App.js, abra-o e ficará assim:
/myReactApp/src/App.js:
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;Tente alterar o conteúdo HTML e salve o arquivo.
Observe que as alterações ficam visíveis imediatamente após você salvar o arquivo, não é necessário recarregar o navegador!
Exemplo
Substitua todo o conteúdo dentro de <div className="App">por um
<h1>elemento.
Veja as alterações no navegador ao clicar em Salvar.
function App() {
return (
<div className="App">
<h1>Hello World!</h1>
</div>
);
}
export default App;Observe que removemos as importações desnecessárias (logo.svg e App.css).
O resultado:
Qual é o próximo?
Agora você tem um ambiente React em seu computador e está pronto para aprender mais sobre o React.
No restante deste tutorial, usaremos nossa ferramenta "Show React" para explicar os vários aspectos do React e como eles são exibidos no navegador.
Se você quiser seguir os mesmos passos em seu computador, comece por remover a srcpasta para conter apenas um arquivo: index.js. Você também deve remover quaisquer linhas de código desnecessárias dentro do index.js
arquivo para torná-las parecidas com o exemplo da ferramenta "Show React" abaixo:
Exemplo
Clique no botão "Executar Exemplo" para ver o resultado.
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
const myfirstelement = <h1>Hello React!</h1>
ReactDOM.render(myfirstelement, document.getElementById('root'));