Wat is React?
React is 'n JavaScript- biblioteek wat deur Facebook geskep is
React is 'n gebruikerskoppelvlak (UI) biblioteek
React is 'n instrument om UI-komponente te bou
Reageer Quickstart Tutoriaal
Dit is 'n vinnige begin-tutoriaal.
Voordat jy begin, moet jy 'n basiese begrip hê van:
Vir 'n volledige tutoriaal:
Begin Reageer-tutoriaal ❯Voeg React by 'n HTML-bladsy
Hierdie vinnige begin-tutoriaal sal React by 'n bladsy soos hierdie voeg:
Voorbeeld
<!DOCTYPE html>
<html lang="en">
<title>Test React</title>
<!-- Load React API -->
<script src= "https://unpkg.com/react@16/umd/react.production.min.js"></script>
<!-- Load React DOM-->
<script src= "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!-- Load
Babel Compiler -->
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
<body>
<script type="text/babel">
// JSX Babel code goes here
</script>
</body>
</html>
Wat is Babel?
Babel is 'n JavaScript-samesteller wat opmaak- of programmeertale in JavaScript kan vertaal.
Met Babel kan jy die nuutste kenmerke van JavaScript gebruik (ES6 - ECMAScript 2015).
Babel is beskikbaar vir verskillende omskakelings. React gebruik Babel om JSX in JavaScript te omskep.
Neem asseblief kennis dat <script type="text/babel"> nodig is om Babel te gebruik.
Wat is JSX?
JSX staan vir J ava S script X ML.
JSX is 'n XML/HTML-agtige uitbreiding tot JavaScript.
Voorbeeld
const element = <h1>Hello World!</h1>
Soos u hierbo kan sien, is JSX nie JavaScript of HTML nie.
JSX is 'n XML-sintaksisuitbreiding vir JavaScript wat ook met die volle krag van ES6 (ECMAScript 2015) kom.
Net soos HTML, kan JSX-merkers 'n merker name, kenmerke en kinders hê. As 'n kenmerk in krullerige hakies toegedraai is, is die waarde 'n JavaScript-uitdrukking.
Let daarop dat JSX nie aanhalingstekens om die HTML-teksstring gebruik nie.
Reageer DOM-weergawe
Die metode ReactDom.render() word gebruik om HTML-elemente weer te gee (vertoon):
Voorbeeld
<div id="id01">Hello World!</div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello React!</h1>,
document.getElementById('id01'));
</script>
JSX uitdrukkings
Uitdrukkings kan in JSX gebruik word deur dit in krullerige {} hakies te draai.
Voorbeeld
<div id="id01">Hello World!</div>
<script type="text/babel">
const name = 'John Doe';
ReactDOM.render(
<h1>Hello {name}!</h1>,
document.getElementById('id01'));
</script>
Reageer elemente
React-toepassings word gewoonlik rondom 'n enkele HTML-element gebou .
Reage-ontwikkelaars noem dit dikwels die wortelknoop (wortelelement):
<div id="root"></div>
Reageer-elemente lyk soos volg:
const element = <h1>Hello React!</h1>
Elemente word gelewer (vertoon) met die ReactDOM.render() metode:
ReactDOM.render(element, document.getElementById('root'));
Reaksieelemente is onveranderlik . Hulle kan nie verander word nie.
Die enigste manier om 'n React-element te verander, is om elke keer 'n nuwe element weer te gee:
Voorbeeld
function tick() {
const element = (<h1>{new
Date().toLocaleTimeString()}</h1>);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
Reageer komponente
Reageer-komponente is JavaScript-funksies.
Hierdie voorbeeld skep 'n React - komponent genaamd "Welkom":
Voorbeeld
function Welcome() {
return <h1>Hello React!</h1>;
}
ReactDOM.render(<Welcome />, document.getElementById('root'));
React kan ook ES6-klasse gebruik om komponente te skep.
Hierdie voorbeeld skep 'n React-komponent met die naam Welkom met 'n weergawe -metode :
Voorbeeld
class Welcome extends React.Component {
render() {
return(<h1>Hello React!</h1>); }
}
ReactDOM.render(<Welcome />,
document.getElementById('root'));
Reaksie-komponent-eienskappe
Hierdie voorbeeld skep 'n React - komponent genaamd "Welkom" met eiendomsargumente:
Voorbeeld
function Welcome(props) {
return <h1>Hello
{props.name}!</h1>;
}
ReactDOM.render(<Welcome name="John Doe"/>,
document.getElementById('root'));
React kan ook ES6-klasse gebruik om komponente te skep.
Hierdie voorbeeld skep ook 'n React-komponent genaamd "Welkom" met eiendomsargumente:
Voorbeeld
class Welcome extends React.Component {
render() {
return(<h1>Hello {this.props.name}</h1>); }
}
ReactDOM.render(<Welcome
name="John Doe"/>, document.getElementById('root'));
JSX-samesteller
Die voorbeelde op hierdie bladsy stel JSX in die blaaier saam.
Vir produksiekode moet die samestelling afsonderlik gedoen word.
Skep Reageer-toepassing
Facebook het 'n Create React-toepassing geskep met alles wat jy nodig het om 'n React-toepassing te bou.
Dit is 'n ontwikkelingsbediener wat Webpack gebruik om React, JSX en ES6, outo-voorvoegsel CSS-lêers saam te stel.
Die Create React App gebruik ESLint om te toets en te waarsku oor foute in die kode.
Om 'n Create React App te skep, voer die volgende kode op jou terminaal uit:
Voorbeeld
npx create-react-app react-tutorial
Maak seker jy het Node.js 5.2 of hoër. Andersins moet jy npx installeer:
Voorbeeld
npm i npx
Begin een vouer vanaf waar jy wil hê jou toepassing moet bly:
Voorbeeld
C:\Users\myUser>npx create-react-app react-tutorial
Suksesresultaat:
npx: installed 63
in 10.359s
Creating a new React app in C:\Users\myUser\react-tutorial.
Installing packages. This might take a couple of minutes.
Installing react,
react-dom, and react-scripts...
+ [email protected]
+ [email protected]
+
[email protected]
added 1732 packages from 664 contributors and audited
31900 packages in 355.501s
found 0 vulnerabilities+ [email protected]
Success! Created react-tutorial at C:\Users\myUser\react-tutorial
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 react-tutorial
npm start