Hagaha Bilowga ah ee React: Ka Dhis Interface-kaaga Isticmaale ee Ugu Horreeya Laga Bilaabo Eeber Ilaa Mid

React waa maktabad JavaScript ah oo loo isticmaalo dhismaha interface-yada isticmaalaha. Waxaa soo saaray oo dayactira Facebook, waxaana ay noqotay mid ka mid ah qalabka ugu caansan ee horumarinta hore. Hagahan wuxuu ku geyn doonaa laga bilaabo eber, tallaabo tallaabo, si aad u fahamto fikradaha aasaasiga ah ee React, oo aad u dhisto interface isticmaale oo fudud.

Maxaa loo Doortaa React?

React waxay leedahay faa'iidooyinka soo socda:

• Qaybaysan: React waxay u kala jebisaa interface-ka isticmaalaha qaybo madaxbannaan oo dib loo isticmaali karo. Tani waxay ka dhigaysaa koodhka mid sahlan in la dayactiro oo la fahmo.
• Bayaansan: React waxay isticmaashaa qaabka barnaamijka bayaansan, taas oo macnaheedu yahay inaad u baahan tahay oo keliya inaad qeexdo waxa aad rabto inaad soo bandhigto, React si toos ah ayay u maareyn doontaa cusbooneysiinta iyo soo bandhigidda.
• Hufan: React waxay isticmaashaa DOM-ka farsamada iyo algorithm-ka diff-ka ee caqliga badan, kaas oo si hufan u cusbooneysiin kara interface-ka isticmaalaha, yareynayana soo bandhigidda aan loo baahnayn.
• Taageero Bulsho oo Weyn: React waxay leedahay bulsho weyn iyo nidaam deegaan oo qani ah, waxaadna ka heli kartaa tiro badan oo casharro, maktabado, iyo qalab ah si ay kaaga caawiyaan horumarinta.
• Awood Iskutallaab Platform ah: React Native waxay kuu oggolaaneysaa inaad isticmaasho React si aad u horumariso codsiyada moobiilka ee u dhashay (iOS iyo Android).

Diyaar garow

Kahor intaadan bilaabin, waxaad u baahan tahay inaad hubiso in qalabka soo socda lagu rakibay kombiyuutarkaaga:

• Node.js: Node.js waa jawi socodsiinta JavaScript ah, oo loo isticmaalo in lagu socodsiiyo qalabka horumarinta React. Waxaad kala soo bixi kartaa oo aad ku rakibi kartaa https://nodejs.org/.
• npm ama yarn: npm (Node Package Manager) iyo yarn waa maareeyayaasha xirmooyinka JavaScript, oo loo isticmaalo in lagu rakibo oo lagu maareeyo ku tiirsanaanta React. Caadi ahaan npm waxaa lagu rakibaa marka la rakibo Node.js. yarn waxaa laga rakibi karaa https://yarnpkg.com/.

Abuur Codsigaaga React ee Ugu Horreeya

Waxaan isticmaali doonnaa create-react-app si aan si dhakhso leh u abuurno mashruuc React ah.

1. Isticmaal npm si aad u abuurto:

   npx create-react-app my-first-react-app
   cd my-first-react-app
   npm start
   

2. Isticmaal yarn si aad u abuurto:

   yarn create react-app my-first-react-app
   cd my-first-react-app
   yarn start
   

Ka dib markaad fuliso amarrada kore, create-react-app waxay si toos ah u abuuri doontaa galka la yiraahdo my-first-react-app, waxayna bilaabi doontaa mashruuc React ah galkaas hoostiisa. Amarka npm start ama yarn start wuxuu bilaabi doonaa server-ka horumarinta, waxaadna ka booqan kartaa http://localhost:3000 biraawsarkaaga si aad u aragto codsigaaga React.

Qaab dhismeedka Galka

Qaab dhismeedka galka mashruuca ee ay abuurtay create-react-app waa sida soo socota: \nmy-first-react-app/\n├── node_modules/ # Maktabadaha ay ku tiirsan tahay mashruucu\n├── public/ # Agabka taagan (sida faylasha HTML)\n│ ├── index.html # Faylka HTML ee laga galo codsiga\n│ └── ...\n├── src/ # Isha koodhka React\n│ ├── App.css # Habka CSS ee qaybta App\n│ ├── App.js # Qaybta App\n│ ├── App.test.js # Faylka tijaabada ee qaybta App\n│ ├── index.css # Habka CSS ee guud\n│ ├── index.js # Faylka JavaScript ee laga galo codsiga\n│ ├── logo.svg # Astaanta React\n│ └── ...\n├── .gitignore # Faylka Git ee la iska indho tiro\n├── package.json # Macluumaadka meta iyo ku tiirsanaanta mashruuca\n├── README.md # Dukumeentiga sharaxaada mashruuca\n└── yarn.lock # Faylka qufulka nooca ku tiirsanaanta (haddii la isticmaalo yarn)\n\n\n## Fahamka Qaybaha React\n\nCodsiyada React waxay ka kooban yihiin qaybo. Qaybuhu waa qaybo koodh oo madaxbannaan oo dib loo isticmaali karo, oo loo isticmaalo in lagu sawiro qayb gaar ah oo ka mid ah is dhexgalka isticmaalaha.\n\nFaylka src/App.js, waxaad ka arki kartaa qaybta App ee caadiga ah:\n\njavascript\nimport React from 'react';\nimport logo from './logo.svg';\nimport './App.css';\n\nfunction App() {\n return (\n \n \n \n \n Edit `src/App.js` and save to reload.\n \n\n [\n Learn React\n ](https://reactjs.org)\n \n \n );\n}\n\nexport default App;\n\n\nSharaxaada Koodhka:\n\n* import React from 'react'; Soo dejinta maktabadda React.\n* function App() { ... } Qeexida qayb shaqo oo lagu magacaabo App.\n* return ( ... ) Soo celinta tibaaxda JSX, oo sharraxaysa waxa ay tahay in qaybtu sawirto.\n* export default App; Dhoofinta qaybta App, si loogu isticmaalo faylal kale.\n\nJSX (JavaScript XML)\n\nJSX waa kordhin naxwe JavaScript ah, oo kuu oggolaanaysa inaad ku qorto koodh u eg HTML koodhka JavaScript. Tusaalaha kore, ... waa tibaaxda JSX. Koodhka JSX waxaa loo beddelaa koodhka JavaScript ee caadiga ah iyadoo la isticmaalayo Babel, si biraawsarku u fahmi karo.\n\n## Wax ka Beddelka Qaybta App\n\Aan wax ka beddelno qaybta App, oo aan abuurno tiriyaha fudud.\n\njavascript\nimport React, { useState } from 'react';\nimport './App.css';\n\nfunction App() {\n const [count, setCount] = useState(0);\n const increment = () => { setCount(count + 1); };

const decrement = () => { setCount(count - 1); };

return (

Tiriyaha

  Tirada hadda jirta: {count}

  +
  -

); }

export default App;

**Tilmaamaha wax ka beddelka:**

* `import React, { useState } from 'react';` Soo dejiso `useState` Hook. `useState` waa React Hook, oo loo isticmaalo in lagu daro xaaladaha qaybaha shaqada.
* `const [count, setCount] = useState(0);` Isticmaal `useState` Hook si aad u abuurto doorsoome xaaladeed oo la yiraahdo `count`, oo loo bilaabay `0`. `setCount` waa shaqo loo isticmaalo in lagu cusbooneysiiyo xaaladda `count`.
* `const increment = () => { setCount(count + 1); };` Qeex shaqo la yiraahdo `increment`, oo loo isticmaalo in lagu daro 1 xaaladda `count`.
* `const decrement = () => { setCount(count - 1); };` Qeex shaqo la yiraahdo `decrement`, oo loo isticmaalo in laga jaro 1 xaaladda `count`.
* `Tirada hadda jirta: {count}

` Ku soo bandhig qiimaha xaaladda `count` bogga. `{count}` waa tibaax JSX ah, oo loo isticmaalo in lagu geliyo doorsoomayaasha JavaScript koodhka JSX.
* `+` iyo `-` Abuur laba badhan, oo mid walba ku xir shaqooyinka `increment` iyo `decrement`. `onClick` waa maareeyaha dhacdooyinka, oo loo isticmaalo in la fuliyo shaqada la cayimay marka badhanka la riixo.

Ka dib markaad kaydiso faylka `src/App.js`, biraawsarku si toos ah ayuu u cusbooneysiin doonaa, waxaadna arki doontaa tiriyaha fudud. Guji badhanka "+" si aad u kordhiso tirada, guji badhanka "-" si aad u yareyso tirada.

## Isticmaalka qaabka CSS

Waxaad isticmaali kartaa CSS si aad u qurxiso codsigaaga React. `create-react-app` waxay taageertaa CSS Modules iyo faylasha CSS ee caadiga ah.

**Isticmaalka CSS Modules:**

CSS Modules waxay kuu oggolaaneysaa inaad u abuurto qaabab CSS oo madaxbannaan qayb kasta, adigoo ka fogaanaya isku dhacyada qaabka. Si aad u isticmaasho CSS Modules qayb, waxaad u baahan tahay inaad abuurto fayl ku dhammaada `.module.css`.

Tusaale ahaan, abuur fayl la yiraahdo `App.module.css`, oo ku dar qaababka CSS ee soo socda:

```css
.App {
  text-align: center;
}

.App h1 {
  color: blue;
}

.App button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: lightgreen;
  border: none;
  cursor: pointer;
}

Kadibna ku soo deji CSS Modules faylka src/App.js:

import React, { useState } from 'react';
import styles from './App.module.css'; // Soo deji CSS Modules

function App() {
  const [count, setCount] = useState(0);
 const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
     {/* Isticmaal shayga styles si aad u tixraacdo fasallada CSS */}
      

# Tiriyaha

      Tirada hadda: {count}

      +
      -
    
  );
}

export default App;

Isticmaalka faylka CSS caadiga ah:

Waxaad sidoo kale isticmaali kartaa faylka CSS caadiga ah si aad u qeexdo qaababka guud. Faylka src/index.css, waxaad ku qeexi kartaa qaababka guud.

Tusaale ahaan, ku dar qaabka CSS ee soo socda:

body {
  font-family: sans-serif;
}

Qaabkani wuxuu ku dabaqi doonaa dhammaan curiyaha body ee codsiga.

Talaabada xigta

Hambalyo, waxaad dhammaystirtay codsigaagii ugu horreeyay ee React! Marka xigta, waxaad baran kartaa wax badan oo ku saabsan React, sida:

• Isgaarsiinta qaybaha: Baro sida qaybaha kala duwan ay u wada xiriiri karaan.
• Maareynta foomamka: Baro sida loo abuuro loona maareeyo foomamka.
• Jidadka: Baro sida loo isticmaalo React Router si loo abuuro codsiyo bogag badan leh.
• Redux ama Context API: Baro sida loo maareeyo xaaladda codsiga.
• Hooks: Si qoto dheer u fahmo React Hooks, sida useEffect, useContext, iwm.

Xusuusnow, React waa farsamo u baahan ku celcelin iyo barasho joogto ah. Ku raaxayso barashadaada!