Reageer Aan die gang
Om React in produksie te gebruik, benodig jy npm wat by Node.js ingesluit is .
Om 'n oorsig te kry van wat React is, kan jy React-kode direk in HTML skryf.
Maar om React in produksie te gebruik, moet jy npm en Node.js geïnstalleer hê.
Reageer direk in HTML
Die vinnigste manier om React te begin leer, is om React direk in jou HTML-lêers te skryf.
W3Skole Spasies
Die maklikste manier om te begin met die skep van HTML-lêers is W3Schools Spaces!
Dit is die perfekte plek om jou werk te skep, te redigeer en met ander te deel!
Begin deur drie skrifte in te sluit, die eerste twee laat ons React-kode in ons JavaScripts skryf, en die derde, Babel, laat ons toe om JSX-sintaksis en ES6 in ouer blaaiers te skryf.
Jy sal meer leer oor JSX in die React JSX- hoofstuk.
Voorbeeld
Sluit drie CDN's in jou HTML-lêer in:
<!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>
Hierdie manier om React te gebruik kan in orde wees vir toetsdoeleindes, maar vir produksie sal jy 'n React-omgewing moet opstel .
Word gesertifiseer!
$ 95 INSKRYF
Die opstel van 'n React-omgewing
As jy npx en Node.js geïnstalleer het, kan jy 'n React-toepassing skep deur create-react-app
.
As jy voorheen create-react-app
wêreldwyd geïnstalleer het, word dit aanbeveel dat jy die pakket deïnstalleer om te verseker dat npx altyd die nuutste weergawe van gebruik create-react-app
.
Om te verwyder, voer hierdie opdrag uit: npm uninstall -g create-react-app
.
Voer hierdie opdrag uit om 'n React-toepassing te skep met die naam
my-react-app
:
npx create-react-app my-react-app
Dit create-react-app
sal alles opstel wat jy nodig het om 'n React-toepassing te laat loop.
Begin die React-toepassing
Nou is jy gereed om jou eerste regte React-toepassing uit te voer!
Voer hierdie opdrag uit om na die my-react-app
gids te beweeg:
cd my-react-app
Voer hierdie opdrag uit om die React-toepassing uit te voer
my-react-app
:
npm start
'n Nuwe blaaiervenster sal verskyn met jou nuutgeskepte React-toepassing! Indien nie, maak jou blaaier oop en tik
localhost:3000
in die adresbalk.
Die resultaat:
Wysig die Reageer-toepassing
So ver so goed, maar hoe verander ek die inhoud?
Kyk in die my-react-app
gids, en jy sal 'n
src
gids vind. Binne die
src
gids is daar 'n lêer genaamd
App.js
, maak dit oop en dit sal so lyk:
/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;
Probeer om die HTML-inhoud te verander en stoor die lêer.
Let daarop dat die veranderinge onmiddellik sigbaar is nadat jy die lêer gestoor het, jy hoef nie die blaaier te herlaai nie!
Voorbeeld
Vervang al die inhoud binne die <div className="App">
met 'n
<h1>
element.
Sien die veranderinge in die blaaier wanneer jy op Stoor klik.
function App() {
return (
<div className="App">
<h1>Hello World!</h1>
</div>
);
}
export default App;
Let daarop dat ons die invoere wat ons nie nodig het nie (logo.svg en App.css) verwyder het.
Die resultaat:
Wat is volgende?
Nou het jy 'n React-omgewing op jou rekenaar, en jy is gereed om meer oor React te leer.
In die res van hierdie tutoriaal sal ons ons "Show React"-nutsding gebruik om die verskillende aspekte van React te verduidelik, en hoe dit in die blaaier vertoon word.
As jy dieselfde stappe op jou rekenaar wil volg, begin deur die src
vouer af te stroop om net een lêer te bevat: index.js
. Jy moet ook enige onnodige reëls kode binne die index.js
lêer verwyder om hulle soos die voorbeeld in die "Show React"-nutsding hieronder te laat lyk:
Voorbeeld
Klik op die "Laat voorbeeld"-knoppie om die resultaat te sien.
index.js
:
import React from 'react';
import ReactDOM from 'react-dom';
const myfirstelement = <h1>Hello React!</h1>
ReactDOM.render(myfirstelement, document.getElementById('root'));