Reagovat Začínáme
Chcete-li použít React v produkci, potřebujete npm, který je součástí Node.js .
Chcete-li získat přehled o tom, co je React, můžete napsat kód React přímo v HTML.
Ale abyste mohli používat React v produkci, musíte mít nainstalované npm a Node.js.
Reagujte přímo v HTML
Nejrychlejší způsob, jak se začít učit React, je napsat React přímo do vašich HTML souborů.
W3Schools Spaces
Nejjednodušší způsob, jak začít s vytvářením souborů HTML, je W3Schools Spaces!
Je to ideální místo pro vytváření, úpravy a sdílení vaší práce s ostatními!
Začněte tím, že zahrnete tři skripty, první dva nám umožňují psát kód React v našich JavaScriptech a třetí, Babel, nám umožňuje psát syntaxi JSX a ES6 ve starších prohlížečích.
Více o JSX se dozvíte v kapitole React JSX .
Příklad
Zahrňte do svého HTML souboru tři CDN:
<!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>
Tento způsob použití Reactu může být pro testovací účely v pořádku, ale pro produkční účely budete muset nastavit prostředí React .
Získejte certifikaci!
95 $ PŘIHLÁSIT SE
Nastavení prostředí React
Pokud máte nainstalované npx a Node.js, můžete vytvořit aplikaci React pomocí create-react-app.
Pokud jste již dříve instalovali create-react-appglobálně, doporučujeme balíček odinstalovat, abyste zajistili, že npx bude vždy používat nejnovější verzi create-react-app.
Chcete-li odinstalovat, spusťte tento příkaz: npm uninstall -g create-react-app.
Spuštěním tohoto příkazu vytvořte aplikaci React s názvem
my-react-app:
npx create-react-app my-react-app
Nastaví vše , create-react-appco potřebujete ke spuštění aplikace React.
Spusťte aplikaci React
Nyní jste připraveni spustit svou první skutečnou aplikaci React!
Spuštěním tohoto příkazu se přesunete do my-react-appadresáře:
cd my-react-app
Spusťte tento příkaz pro spuštění aplikace React
my-react-app:
npm start
Objeví se nové okno prohlížeče s nově vytvořenou aplikací React! Pokud ne, otevřete prohlížeč a zadejte
localhost:3000do adresního řádku.
Výsledek:
Upravte aplikaci React
Zatím dobrý, ale jak změním obsah?
Podívejte se do my-react-appadresáře a najdete
srcsložku. Uvnitř
srcsložky je soubor s názvem
App.js, otevřete jej a bude vypadat takto:
/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;Zkuste změnit obsah HTML a soubor uložte.
Všimněte si, že změny jsou viditelné ihned po uložení souboru, nemusíte znovu načítat prohlížeč!
Příklad
Nahraďte veškerý obsah uvnitř <div className="App">prvkem
<h1>.
Po kliknutí na Uložit uvidíte změny v prohlížeči.
function App() {
return (
<div className="App">
<h1>Hello World!</h1>
</div>
);
}
export default App;Všimněte si, že jsme odstranili importy, které nepotřebujeme (logo.svg a App.css).
Výsledek:
Co bude dál?
Nyní máte na svém počítači prostředí React a jste připraveni dozvědět se více o Reactu.
Ve zbytku tohoto tutoriálu použijeme náš nástroj "Zobrazit React" k vysvětlení různých aspektů Reactu a způsobu jejich zobrazení v prohlížeči.
Chcete-li na svém počítači provést stejné kroky, začněte odstraněním srcsložky tak, aby obsahovala pouze jeden soubor: index.js. Měli byste také odstranit všechny nepotřebné řádky kódu uvnitř index.js
souboru, aby vypadaly jako příklad v nástroji „Show React“ níže:
Příklad
Kliknutím na tlačítko "Spustit příklad" zobrazíte výsledek.
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
const myfirstelement = <h1>Hello React!</h1>
ReactDOM.render(myfirstelement, document.getElementById('root'));