Mwongozo wa Kuanza React: Kujenga Kiolesura chako cha Kwanza cha Mtumiaji Kutoka Mwanzo

React ni maktaba ya JavaScript ya kujenga violesura vya mtumiaji. Imeundwa na kudumishwa na Facebook, na imekuwa mojawapo ya zana maarufu zaidi katika ukuzaji wa mbele. Mwongozo huu utakuongoza kutoka mwanzo, hatua kwa hatua, kuelewa dhana za msingi za React, na kujenga kiolesura rahisi cha mtumiaji.

Kwa nini uchague React?

React ina faida zifuatazo:

• Uundaji wa vipengele: React huvunja kiolesura cha mtumiaji katika vipengele huru, vinavyoweza kutumika tena. Hii inafanya msimbo kuwa rahisi kutunza na kuelewa.
• Tangazo: React hutumia mtindo wa upangaji wa matangazo, ambayo inamaanisha kuwa unahitaji tu kuelezea kile unachotaka kuwasilisha, na React itashughulikia sasisho na utoaji kiotomatiki.
• Ufanisi: React hutumia DOM pepe na algoriti mahiri ya diff, ambayo inaweza kusasisha kiolesura cha mtumiaji kwa ufanisi na kupunguza utoaji usio wa lazima.
• Usaidizi mkubwa wa jumuiya: React ina jumuiya kubwa na mfumo ikolojia tajiri, unaweza kupata idadi kubwa ya mafunzo, maktaba na zana za kukusaidia kuendeleza.
• Uwezo wa kuvuka jukwaa: React Native hukuruhusu kutumia React kuendeleza programu asili za simu (iOS na Android).

Maandalizi

Kabla ya kuanza, unahitaji kuhakikisha kuwa una zana zifuatazo zilizosakinishwa kwenye kompyuta yako:

• Node.js: Node.js ni mazingira ya utekelezaji wa JavaScript, yanayotumika kuendesha zana za ukuzaji za React. Unaweza kuipakua na kuiweka kutoka https://nodejs.org/.
• npm au yarn: npm (Node Package Manager) na yarn ni wasimamizi wa vifurushi vya JavaScript, wanaotumika kusakinisha na kudhibiti utegemezi wa React. Kawaida npm imesakinishwa pamoja na Node.js. yarn inaweza kusakinishwa kutoka https://yarnpkg.com/.

Unda programu yako ya kwanza ya React

Tutatumia create-react-app kuunda haraka mradi wa React.

1. Unda kwa kutumia npm:

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

2. Unda kwa kutumia yarn:

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

Baada ya kutekeleza amri zilizo hapo juu, create-react-app itaunda kiotomatiki saraka inayoitwa my-first-react-app, na kuanzisha mradi wa React katika saraka hiyo. Amri ya npm start au yarn start itazindua seva ya ukuzaji, na unaweza kutembelea http://localhost:3000 kwenye kivinjari chako ili kuona programu yako ya React.

Muundo wa saraka

Muundo wa saraka ya mradi ulioundwa na create-react-app ni kama ifuatavyo:

my-first-react-app/
├── node_modules/         # Maktaba ambazo mradi unategemea
├── public/               # Rasilimali tuli (kwa mfano, faili za HTML)
│   ├── index.html        # Faili ya HTML ya kuingilia ya programu
│   └── ...
├── src/                  # Msimbo chanzo wa React
│   ├── App.css           # Mtindo wa CSS wa kipengele cha App
│   ├── App.js            # Kipengele cha App
│   ├── App.test.js       # Faili ya majaribio ya kipengele cha App
│   ├── index.css         # Mtindo wa CSS wa kimataifa
│   ├── index.js          # Faili ya JavaScript ya kuingilia ya programu
│   ├── logo.svg          # Nembo ya React
│   └── ...
├── .gitignore            # Faili za kupuuza za Git
├── package.json          # Metadata na vitegemezi vya mradi
├── README.md             # Nyaraka za maelezo ya mradi
└── yarn.lock             # Faili ya kufunga toleo la vitegemezi (ikiwa unatumia yarn)

Uelewa wa Vipengele vya React

Programu ya React imeundwa na vipengele. Vipengele ni vitalu vya msimbo huru na vinavyoweza kutumika tena, vinavyotumika kutoa sehemu maalum za kiolesura cha mtumiaji.

Katika faili ya src/App.js, unaweza kuona kipengele chaguo-msingi cha App:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    
      
        
        
          Edit `src/App.js` and save to reload.
        

        [
          Learn React
        ](https://reactjs.org)
      
    
  );
}

export default App;

Maelezo ya Msimbo:

• import React from 'react'; Inaagiza maktaba ya React.
• function App() { ... } Inafafanua kipengele cha kazi kinachoitwa App.
• return ( ... ) Inarudisha usemi wa JSX, unaoelezea kile kipengele kinapaswa kutoa.
• export default App; Inasafirisha kipengele cha App ili kiweze kutumika katika faili zingine.

JSX (JavaScript XML)

JSX ni kiendelezi cha sintaksia ya JavaScript ambayo hukuruhusu kuandika msimbo kama HTML katika msimbo wako wa JavaScript. Katika mfano hapo juu, ... ni usemi wa JSX. Msimbo wa JSX hubadilishwa kuwa msimbo wa kawaida wa JavaScript na Babel ili vivinjari viweze kuuelewa.

Kurekebisha Kipengele cha App

Wacha turekebishe kipengele cha App ili kuunda kaunta rahisi.

import React, { useState } from 'react';
import './App.css';

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

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

  return (
    
      

# Kaunta

      Hesabu ya sasa: {count}

      +
      -
    
  );
}

export default App;

Maelezo ya mabadiliko:

• import React, { useState } from 'react'; Inaagiza useState Hook. useState ni React Hook, inayotumika kuongeza hali katika vipengele vya kazi.
• const [count, setCount] = useState(0); Inatumia useState Hook kuunda kigezo cha hali kinachoitwa count, na kukiweka kuwa 0 mwanzoni. setCount ni kazi ya kusasisha hali ya count.
• const increment = () => { setCount(count + 1); }; Inafafanua kazi inayoitwa increment, inayotumika kuongeza hali ya count kwa 1.
• const decrement = () => { setCount(count - 1); }; Inafafanua kazi inayoitwa decrement, inayotumika kupunguza hali ya count kwa 1.
• Hesabu ya sasa: {count} Inaonyesha thamani ya hali ya count kwenye ukurasa. {count} ni usemi wa JSX, unaotumika kuingiza kigezo cha JavaScript katika msimbo wa JSX.
• + na - huunda vitufe viwili, kila kimoja kimefungwa kwa kazi za increment na decrement. onClick ni kishughulikiaji cha tukio, kinachotumika kutekeleza kazi maalum wakati kitufe kinabonyezwa.

Baada ya kuhifadhi faili ya src/App.js, kivinjari kitajisasisha kiotomatiki, na utaona kaunta rahisi. Kubonyeza kitufe cha "+" kutaongeza hesabu, na kubonyeza kitufe cha "-" kutapunguza hesabu.

Kutumia Mitindo ya CSS

Unaweza kutumia CSS kupamba programu yako ya React. create-react-app inasaidia CSS Modules na faili za kawaida za CSS.

Kutumia CSS Modules:

CSS Modules hukuruhusu kuunda mitindo ya CSS huru kwa kila kipengele, kuepuka migongano ya mitindo. Ili kutumia CSS Modules katika kipengele, unahitaji kuunda faili inayoishia na .module.css.

Kwa mfano, unda faili inayoitwa App.module.css, na uongeze mitindo ifuatayo ya CSS ndani yake:

.App {
  text-align: center;
}

.App h1 {
  color: blue;
}

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

Kisha ingiza CSS Modules katika faili ya src/App.js:

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

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

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

  return (
     {/* Tumia kitu cha styles kurejelea darasa za CSS */}
      

# Kaunta

      Hesabu ya sasa: {count}

      +
      -
    
  );
}

export default App;

Kutumia faili ya kawaida ya CSS:

Unaweza pia kutumia faili ya kawaida ya CSS kufafanua mitindo ya kimataifa. Katika faili ya src/index.css, unaweza kufafanua mitindo ya kimataifa.

Kwa mfano, ongeza mtindo ufuatao wa CSS:

body {
  font-family: sans-serif;
}

Mtindo huu utatumika kwa kipengele cha body cha programu nzima.

Hatua inayofuata

Hongera, umekamilisha programu yako ya kwanza ya React! Ifuatayo, unaweza kujifunza zaidi kuhusu React, kama vile:

• Mawasiliano ya vipengele: Jifunze jinsi ya kuruhusu vipengele tofauti kuwasiliana.
• Ushughulikiaji wa fomu: Jifunze jinsi ya kuunda na kushughulikia fomu.
• Uelekezaji: Jifunze jinsi ya kutumia React Router kuunda programu za kurasa nyingi.
• Redux au Context API: Jifunze jinsi ya kudhibiti hali ya programu.
• Hooks: Jifunze zaidi kuhusu React Hooks, kama vile useEffect, useContext, n.k.

Kumbuka, React ni teknolojia ambayo inahitaji mazoezi na kujifunza mara kwa mara. Nakutakia mafanikio katika masomo yako!