Components in React: Creating and Using Components

 

Qaybaha (Components) ee React: Abuurista iyo Isticmaalka Qaybaha

React.js waa maktabad awood leh oo JavaScript ah oo u oggolaanaysa horumariyeyaasha inay dhisaan interfaces isticmaale oo firfircoon oo ka jawaabaya. Mid ka mid ah fikradaha ugu muhiimsan ee React waa isticmaalka qaybaha (components). Qaybaha waa dhismaha aasaasiga ah ee barnaamijka React, waxaana muhiim ah in la fahmo sida loo abuuro loona isticmaalo si kasta oo horumariye React ah.

Components in React: Creating and Using Components

Waa Maxay Qayb (Component)?

Qayb ku jirta React waa xeer la isticmaali karo marar badan oo matalaya qayb ka mid ah interface-ka isticmaale (UI). Waxay noqon kartaa mid fudud sida batoon ama mid adag sida foom dhan. Qaybaha waxay kuu oggolaanayaan inaad ku kala jebiso UI-gaaga qaybo yaryar oo la maamuli karo, taasoo ka dhigaysa koodkaaga mid habaysan oo sahlan in la ilaaliyo.

Waxaa jira laba nooc oo qaybo ah oo ku jira React:

1. Qaybo shaqeynaya (Functional Components): Kuwani waa shaqooyinka fudud ee JavaScript-ka ee soo celinaya JSX (JavaScript XML), taasoo ah kordhinta naxwaha JavaScript. Qaybaha shaqeynaya ma maareeyaan xaaladdooda laakiin waxay isticmaali karaan hooks si ay u maareeyaan xaaladda.
2. Qaybo fasal ah (Class Components): Kuwani waa fasalo ES6 ah oo ka dhaxla React.Component oo maareyn kara xaaladdooda. Si kastaba ha noqotee, tan iyo markii la soo bandhigay hooks, qaybaha shaqeynaya ayaa hadda si weyn loo isticmaalaa.

Abuurista Qayb

Aan ku bilaabno abuurista qayb shaqeynaysa oo fudud. Ka soo qaad inaad rabto inaad abuurto qayb soo bandhigaysa fariin salaam ah. Waa sidaan u sameyn karto:

javascript

import React from 'react';

function Greeting() {
    return (
        <div>
            <h1>Asalaamu Caleykum, Adduunyo!</h1>
        </div>
    );
}

export default Greeting;

Tusaalahan kore, Greeting waa qayb shaqeynaysa oo soo celinaysa div oo leh h1 kaas oo wata qoraal ah "Asalaamu Caleykum, Adduunyo!". Qaybtan hadda waxaa loo isticmaali karaa meelo kale oo ka mid ah barnaamijkaaga React.

Isticmaalka Qaybaha

Markaad abuurto qayb, waxaad isticmaali kartaa meelo kale oo ka mid ah qaybaha kale. Tusaale ahaan, waxaad ku isticmaali kartaa qaybta Greeting gudaha qayb kale sidaan:

javascript

import React from 'react';
import Greeting from './Greeting';

function App() {
    return (
        <div>
            <Greeting />
        </div>
    );
}

export default App;

Halkan, qaybta Greeting waa la soo dejinayaa ka dibna waxaa loo isticmaalayaa gudaha qaybta App. Marka qaybta App la soo bandhigo, waxay ku jiri doontaa qaybta Greeting.

Props: U Gudbinta Xogta Qaybaha

Qaybaha sidoo kale waxay aqbalaan waxyaabo la yiraahdo props (oo ah gundhigyo). Props waxay kuu oggolaanayaan inaad xog ka soo gudbiso qaybta waalidka (parent component) ilaa qaybta ilmaha (child component). Waa kuwan tusaale:

javascript

function Greeting(props) {
    return (
        <div>
            <h1>Asalaamu Caleykum, {props.name}!</h1>
        </div>
    );
}

Hadda, markaad isticmaasho qaybta Greeting, waxaad u gudbin kartaa gundhigga name sidaan:

javascript

function App() {
    return (
        <div>
            <Greeting name="Cumar" />
            <Greeting name="Xaliimo" />
        </div>
    );
}

Tusaalahan, qaybta Greeting waxay soo bandhigi doontaa "Asalaamu Caleykum, Cumar!" iyo "Asalaamu Caleykum, Xaliimo!" iyadoo ku xiran qiimaha prop ee loo gudbiyey.

Xaaladda (State) ee Qaybaha Fasalka

In kasta oo qaybaha shaqeynaya si weyn loo isticmaalo, waa muhiim inaad fahanto sida xaaladdu u shaqeyso ee qaybaha fasalka, maadaama laga yaabo inaad la kulanto xeer hore ama kiisyo gaar ah. Waa kuwan tusaale:

javascript

import React, { Component } from 'react';

class Counter extends Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        };
    }

    increment = () => {
        this.setState({ count: this.state.count + 1 });
    }

    render() {
        return (
            <div>
                <h1>Tirada: {this.state.count}</h1>
                <button onClick={this.increment}>Kordhi</button>
            </div>
        );
    }
}

export default Counter;

Qaybtan Counter, waxaan u isticmaaleynaa state si aan ula soconno qiimaha tirada, habka increment wuxuu cusbooneysiinayaa xaaladda marka batoonka la gujiyo.

Gunaanad

Qaybaha React waa lama huraan si loo dhiso barnaamijyo la balaadhin karo oo la ilaaliyo. Markaad UI-gaaga u kala jabiso qaybo yaryar, waxaad abuuri kartaa kayd koodh oo habaysan. Haddii aad isticmaalayso qaybaha shaqeynaya ama kuwa fasalka ah, fahamka sida loo abuuro loona isticmaalo si hufan waa furaha inaad ku barato React.