Cashar ku saabsan Abuuritaanka Barnaamij Web ah oo la adeegsanayo React.js

React.js adalah salah satu library populer dalam pengembangan frontend yang digunakan untuk membangun antarmuka pengguna (UI) yang interaktif. React.js dikembangkan oleh Facebook dan telah digunakan oleh banyak perusahaan besar, termasuk Instagram, Airbnb, dan WhatsApp. Jika Anda ingin membuat codsiga shabakadda yang efektif, cepat, dan responsif, React.js mungkin menjadi pilihan yang tepat untuk Anda.

Pendahuluan

Sebelum kita mulai, pastikan Anda telah menginstal Node.js dan npm (Node Package Manager) di komputer Anda. Node.js dan npm sangat penting karena mereka menyediakan lingkungan dan alat yang diperlukan untuk mengembangkan aplikasi web menggunakan React.js.

Tallaabada 1: Bilaabidda Mashruuca React

Si aan u abuurno codsi cusub oo React.js ah, waxaan isticmaali karnaa Create React App, oo ah qalab abuurka codsiyada oo yareeya habaynta bilowga ah. Ku socodsii amarka soo socda ee ku jira terminal-kaaga ama amarkaaga:

"`bash
npx create-react-app my-app
cd my-app
npm bilaabid
““

Amarkani wuxuu abuuri doonaa buug cusub oo loogu magac daray `my-app`, soo dejiso oo rakib dhammaan waxyaabaha lagama maarmaanka ah, oo bilaabi doona server-ka horumarinta. Hadda waxaad furi kartaa biraawsar oo aad geli kartaa `http://localhost:3000` si aad u aragto codsiga React.js ee caadiga ah.

Tallaabada 2: Qaab-dhismeedka Faylka

Aan eegno qaab-dhismeedka faylalka uu sameeyay Create React App:

““
barnaamijkeyga/
Module_ka_noodka_ ├──
├── dadweyne/
│ └── index.html
└── src/
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
└── logo.svg
““

– `node_modules/`: Waxay ka kooban tahay dhammaan waxyaabaha ku xiran mashruucaaga.
– `public/`: Waxaa ku jira faylal aan isbeddelin, oo ay ku jiraan `index.html` kaas oo ah barta laga galo codsiga.
– `src/`: Meesha aad ku qaadan doonto inta badan waqtigaaga. Waxay ka kooban tahay qaybaha React, faylasha CSS, iyo hanti kale.

Tallaabada 3: Tirtirka Faylasha Aan Loo Baahnayn

Si aan ugu bilowno qoraal nadiif ah, aan tirtirno qaar ka mid ah faylasha aan loo baahnayn. Tirtir `logo.svg` iyo `App.test.js` gudaha faylka `src/`. Kadib, fur `App.css` iyo `index.css`, adigoo tirtiraya dhammaan koodka CSS ee ku jira si aad ugu bilowdo xaashi qaabaysan oo nadiif ah.

Tallaabada 4: Abuuritaanka Qaybtaada Koowaad

React.js waxay ku salaysan tahay qaybaha. Qaybuhu waa qaybaha dhismaha ee codsigaaga shabakadda. Aan wax ka beddelno `App.js` si aan u abuurno qaybta ugu horreysa.

Fur `src/App.js` oo ku beddel koodhkan soo socda:

"jsx
soo dejinta React ka 'ka falcelinta';
soo dejiso './App.css';

Barnaamijka shaqada() {
soo noqo (

);
}

Dhoofinta caadiga ah ee App-ka;
““

Bilow koodhka React-ka ee ku jira `App.js` adoo isticmaalaya JSX (JavaScript XML), kaas oo noo oggolaanaya inaan ku qorno qaab-dhismeedka HTML-ka ee gudaha JavaScript. Keydi isbeddeladaada oo natiijooyinka ku arag biraawsarkaaga.

Tallaabada 5: Ku darista Qaybaha Cusub

Hadda aan ku darno qaybo cusub. Samee fayl cusub oo la yiraahdo `components` gudaha faylka `src`. Kadib samee fayl cusub `HelloWorld.js` oo ku jira faylka `components`.

"jsx
soo dejinta React ka 'ka falcelinta';

shaqada HelloWorld() {
soo noqo (

);
}

dhoofinta caadiga ah ee HelloWorld;
““

Fur `App.js` oo soo dejiso qaybta `HelloWorld` ee aan hadda abuurnay:

"jsx
soo dejinta React ka 'ka falcelinta';
soo dejiso './App.css';
Soo dejiso HelloWorld laga bilaabo './components/HelloWorld';

Barnaamijka shaqada() {
soo noqo (

);
}

Dhoofinta caadiga ah ee App-ka;
““

Hadda, `App.js` wuxuu ka dhigayaa qaybta 'HelloWorld' bogga ugu weyn.

Tallaabada 6: Ku darista Maamulka Gobolka oo leh isticmaalka Gobolka

React waxay leedahay jillaabyo aad u awood badan oo loogu talagalay maaraynta xaaladda. Aan ku darno xaalad codsigeenna. Tusaale ahaan, aan ku darno tirin oo kordha mar kasta oo badhan la gujiyo.

Fur `HelloWorld.js` oo ku dar jillaab xaalad iyo `useState`:

"jsx
soo dejiso React, { useState } laga bilaabo 'react';

shaqada HelloWorld() {
const [tiro, setCount] = isticmaalka Gobolka(0);

kordhinta tirada = () => {
setCount(tiro + 1);
}

soo noqo (

);
}

dhoofinta caadiga ah ee HelloWorld;
““

Xaaladda `count` waxaa lagu bilaabaa qiimo ah 0, mar kasta oo badhanka la gujiyo, shaqada `incrementCount` waxay kordhin doontaa qiimahan.

Tallaabada 7: Ku darista Qaabaynta

Si aan u darno qaabaynta, waxaan CSS ku isticmaali karnaa faylka `App.css` ama waxaan isticmaali karnaa maktabad CSS-in-JS ah sida qaybaha qaabaysan. Aan ku dheganno CSS-ka caadiga ah hadda.

Fur `App.css` oo ku dar qaabeyn:

"`css
.App {
text-align: xarunta;
}

.Ab-header {
background-color: 282c34;
dhererka ugu yar: 100vh;
bandhig: dabacsanaan;
jiho-jilicsan: tiir;
isku toosi walxaha: xarunta;
qiil-content: xarun;
Cabbirka farta: kalsiyum (10px + 2vmin);
midab: cadaan;
}

badhanka {
caarada: 10px 20px;
sare-sare: 20px;
cabirka font-size: 16px;
}
““

Tallaabada 8: Ku darista Routing-ka iyadoo la adeegsanayo React Router

Si aan ugu darno navigation-ka bogag kala duwan oo ku jira barnaamijkeenna, waxaan isticmaali karnaa React Router. Ku rakib React Router adigoo socodsiinaya amarka soo socda:

"`bash
npm rakib react-router-dom
““

Kadib, samee laba qaybood oo cusub: `Home.js` iyo `About.js` oo ku jira galka `components`.

`Hoyga.js`:
"jsx
soo dejinta React ka 'ka falcelinta';

Shaqada Hoyga() {
soo noqo (

);
}

Dhoofinta caadiga ah ee Guriga;
““

`Ku saabsan.js`:
"jsx
soo dejinta React ka 'ka falcelinta';

shaqada Ku saabsan() {
soo noqo (

);
}

dhoofinta caadiga ah Ku saabsan;
““

Marka xigta, fur `App.js` oo deji marin-haweedka:

"jsx
soo dejinta React ka 'ka falcelinta';
soo dejiso { BrowserRouter sida Router, Route, Link, Switch } laga bilaabo 'react-router-dom';
soo dejiso './App.css';
Soo dejiso HelloWorld laga bilaabo './components/HelloWorld';
Soo dejiso Guriga './components/Home';
soo dejiso Ku saabsan laga bilaabo './qaybaha/Ku saabsan';

Barnaamijka shaqada() {
soo noqo (

);
}

Dhoofinta caadiga ah ee App-ka;
““

Tan, waxaan ku darnay hagitaan aasaasi ah oo u dhexeeya bogag kala duwan oo ku jira barnaamijkeenna.

Xiritaanka

Waa kaas tutorial dasar untuk membuat aplikasi web menggunakan React.js. Kita telah melalui langkah-langkah pengaturan proyek, pembuatan komponen, menambahkan state management, styling, dan routing. React.js memiliki ekosistem yang kaya dengan banyak library dan alat yang dapat membantu Anda membangun aplikasi web yang lebih kompleks.

Nasiib wacan, waxaana rajeynayaa in casharkan uu kaa caawin doono inaad bilowdo safarkaaga React.js!