Thuto mabapi le ho Theha Sesebelisoa sa Webo ho Sebelisa React.js

React.js ke laeborari e tsebahalang ea nts'etsopele ea front-end e sebelisetsoang ho aha li-interactive user interfaces (UIs). E ntlafalitsoe ke Facebook, React.js e sebelisitsoe ke lik'hamphani tse ngata tse kholo, ho kenyeletsoa Instagram, Airbnb le WhatsApp. Haeba u batla ho haha ​​​​li-application tsa webo tse sebetsang hantle, tse potlakileng le tse arabelang, React.js e kanna ea ba khetho e nepahetseng bakeng sa hau.

Pendahuluan

Pele re qala, etsa bonnete ba hore o kentse Node.js le npm (Node Package Manager) khomphuteng ea hau. Node.js le npm lia hlokahala hobane li fana ka tikoloho le lisebelisoa tse hlokahalang ho nts'etsapele lits'ebetso tsa webo ho sebelisoa React.js.

Mohato oa 1: Ho Qala Morero oa React

Ho theha sesebelisoa se secha sa React.js, re ka sebelisa Create React App, sesebelisoa sa ho theha sesebelisoa se fokotsang tlhophiso ea pele. Matha taelo e latelang ho terminal ea hau kapa taelo ea taelo:

“`bash
npx create-react-app my-app
sesebelisoa sa ka sa cd
npm qala
``

Taelo ena e tla theha bukana e ncha e bitsoang `my-app`, e jarolle le ho kenya lintho tsohle tse hlokahalang, 'me e qale seva ea nts'etsopele. Joale u ka bula sebatli 'me ua kena ho `http://localhost:3000` ho bona ts'ebeliso ea kamehla ea React.js.

Mohato oa 2: Sebopeho sa Foldara

A re shebeng sebopeho sa foldara seo Create React App e se entseng:

``
sesebelisoa sa ka/
├── di-node_modules/
├── phatlalatsa/
│ └── index.html
└── src/
├── Sesebelisoa.css
├── Lisebelisoa tsa App.js
├── App.test.js
├── index.css
├── index.js
└── logo.svg
``

– `node_modules/`: E na le lintho tsohle tse itšetlehileng ka projeke ea hau.
– `public/`: E na le difaele tse sa fetoheng, ho kenyeletswa le `index.html` e leng ntlha ya ho kena ya kopo.
– `src/`: Moo o tla qeta boholo ba nako ea hau teng. E na le likarolo tsa React, lifaele tsa CSS, le matlotlo a mang.

Mohato oa 3: Ho hlakola Lifaele tse sa Hlokahaleng

Ho qala ka ho hlakola letlapa, ha re hlakole difaele tse sa hlokahaleng. Hlakola `logo.svg` le `App.test.js` ka hara foldara ya `src/`. Ebe o bula `App.css` le `index.css`, o hlakola khoutu yohle ya CSS ka hare ho tsona ho qala ka ho hlakola setaele.

Mohato oa 4: Ho Theha Karolo ea Hao ea Pele

React.js e itshetlehile ka dikarolo. Dikarolo ke diboloko tsa kaho ya sesebelisoa sa hau sa webo. A re fetoleng `App.js` ho theha karolo ya rona ya pele.

Bula `src/App.js` 'me u e nkele sebaka ka khoutu e latelang:

“`jsx
kenya React ho tsoa ho 'reaction';
kenya './App.css';

Sesebelisoa sa tshebetso () {
khutla (

);
}

Sesebelisoa sa kamehla sa ho romela kantle;
``

Qala khoutu ea React ka hare ho `App.js` u sebelisa JSX (JavaScript XML), e re lumellang ho ngola mokhoa oa ho ngola o tšoanang le oa HTML ka har'a JavaScript. Boloka liphetoho tsa hau 'me u bone liphetho ho sebatli sa hau.

Mohato oa 5: Ho Eketsa Likarolo tse Ncha

Jwale ha re kenyeng dikarolo tse ntjha. Theha foldara e ntjha e bitswang `dikarolo` ka hara foldara ya `src`. Ebe o theha faele e ntjha `HelloWorld.js` ka hara foldara ya `dikarolo`.

“`jsx
kenya React ho tsoa ho 'reaction';

mosebetsi HelloWorld() {
khutla (

);
}

romela HelloWorld ya kamehla;
``

Bula `App.js` 'me u kenye karolo ea `HelloWorld` eo re sa tsoa e theha:

“`jsx
kenya React ho tsoa ho 'reaction';
kenya './App.css';
kenya HelloWorld ho tsoa ho './components/HelloWorld';

Sesebelisoa sa tshebetso () {
khutla (

);
}

Sesebelisoa sa kamehla sa ho romela kantle;
``

Jwale, `App.js` e fetolela karolo ya `HelloWorld` leqepheng le ka sehloohong.

Mohato oa 6: Ho eketsa Tsamaiso ea Naha ka tšebelisoState

React e na le lihokelo tse matla haholo bakeng sa ho laola boemo. A re eketseng boemo bo itseng ts'ebelisong ea rona. Mohlala, ha re eketseng khaontara e eketsang nako le nako ha konopo e tobetsoa.

Bula `HelloWorld.js` 'me u kenye sehokelo sa boemo le `useState`:

“`jsx
kenya React, {useState} ho tsoa ho 'react';

mosebetsi HelloWorld() {
const [palo, setaCount] = useState(0);

Palo ea keketseho ea const = () => {
seteCount(palo + 1);
}

khutla (

);
}

romela HelloWorld ya kamehla;
``

Boemo ba `count` bo qalisoa ka boleng ba 0, 'me nako le nako ha konopo e tobetsoa, ​​​​mosebetsi oa `incrementCount` o tla eketsa boleng bona.

Mohato oa 7: Ho eketsa setaele

Ho eketsa setaele, re ka sebelisa CSS faeleng ea `App.css` kapa re ka sebelisa laeborari ea CSS-in-JS joalo ka likarolo tse entsoeng ka mokhoa oa setaele. Ha re khomareleng CSS e tloaelehileng hajoale.

Bula `App.css` 'me u kenye setaele se seng:

"css"
Sesebelisoa {
ho tsamaisana le mongolo: bohareng;
}

Sehlooho sa app {
'Mala oa bokamorao: 282c34;
bophahamo ba bonyane: 100vh;
bonts'a: flex;
flex-direction: kholomo;
lokisa-lintho: bohareng;
lokafatsa-kahare: setsi;
boholo ba mongolo: calc(10px + 2vmin);
mala: tšoeu;
}

konopo {
ho laola: 10px 20px;
margin-top: 20px;
boholo ba fonte: 16px;
}
``

Mohato oa 8: Ho eketsa Routing ka React Router

Ho eketsa ho tsamaya pakeng tsa maqephe a fapaneng ts'ebelisong ea rona, re ka sebelisa React Router. Kenya React Router ka ho sebelisa taelo e latelang:

“`bash
npm kenya react-router-dom
``

Ebe, theha dikarolo tse pedi tse ntjha: `Home.js` le `About.js` ka hara foldara ya `dikarolo`.

`Lehae.js`:
“`jsx
kenya React ho tsoa ho 'reaction';

mosebetsi Lehae() {
khutla (

);
}

Lehae la kamehla la ho romela kantle;
``

`Mabapi le.js`:
“`jsx
kenya React ho tsoa ho 'reaction';

mosebetsi Mabapi le () {
khutla (

);
}

kantle ho naha kamehla Mabapi le;
``

E latelang, bula `App.js` ebe o seta routing:

“`jsx
kenya React ho tsoa ho 'reaction';
kenya { BrowserRouter jwalo ka Router, Router, Link, Switch} ho tloha ho 'react-router-dom';
kenya './App.css';
kenya HelloWorld ho tsoa ho './components/HelloWorld';
kenya Lehae ho tsoa ho './components/Home';
kenya Mabapi ho tsoa ho './components/About';

Sesebelisoa sa tshebetso () {
khutla (

);
}

Sesebelisoa sa kamehla sa ho romela kantle;
``

Ka sena, re ekelitse mokhoa oa motheo oa ho tsamaea lipakeng tsa maqephe a fapaneng ts'ebelisong ea rona.

Ho koala

Ke thuto ea motheo ea ho theha sesebelisoa sa webo u sebelisa React.js. Re se re koahetse ho seta projeke, ho theha likarolo, tsamaiso ea mmuso, setaele le ho tsamaisa. React.js e na le tikoloho e ruileng e nang le lilaeborari tse ngata le lisebelisoa tse ka u thusang ho haha ​​​​likopo tse rarahaneng tsa webo.

Mahlohonolo, 'me ke tšepa hore thupelo ena e tla u thusa ho qala leeto la hau ka React.js!