• Follow Us On :

React Waa mid kamid JavaScript Libraries-ka ugu caansan oo loogu talagalay in lagu dhiso wajhadda hore ee web applications-ka, gaar ahaan single-page applications. waa mid awood baddan oo component based ah taas oo ka dhigaysa in loo isticmaalo websites-casriga ah. Marka Haddii aad dooneysid inaad noqoto React Developer Waxaa Jirta Wada aad u maraysid si aad u barato React, Bloggaan waxaa ku sharaxeynaa tallaabooyinka, xirfadaha iyo waxyaalaha aad u baahan tahay si aad u noqoto React Developer.

Become React Developer For FREE

React Course Full Course For FREE on Youtube:-

React Basics:- https://www.youtube.com/playlist?list=PLUmY9cusB7UvWh_PJ_1WDBrtePl7jg7hi

React Basic Projects:- https://youtube.com/playlist?list=PLUmY9cusB7UsbOXQEJjc18JFoLDcvd5zF&si=S7A-2CnbVQZ4_WKE

React js Full Course FREE at https://hirkaab.com

React Js

1. Aqoonta Ka Horeesa React Js

Inta aadan si toos ah u bilaabin React, waxaad u baahantahay inaad si fiican usoo fahanto 2ad oo ah Asaasiyaad Web Development.

  • HTML & CSS: React Ma badalaayo HTML iyo CSS balse waa uu isticmaalaa. Marka waa inaad bartaa HTML Elements, Layouts-ka sid Flexbox iyo Grid.

Course-ka HTML iyo CSS FREE: https://hirkaab.com/courses/html-and-css/

  • JavaScript: React Waxaa si aad ugu tiirsantahay Javascript sidaarrow functions, destructuring, async/await, modules, and promises. Inaad safiican u fahanto Mocduuyada Javascript waxa ay kuu suuragelinaysaa sidoo kale aad safiican u fahanto React.

Course-ka JavaScript: https://hirkaab.com/courses/javascript-course

2. Hel Waxyaalha Aad U Baahantahay

Ka hor inta aadan bilaabin React waxaa set up-kareysanaysaa tools aad u bahantahay uu kugu haboon.

  • Node.js & npm: React applications waa ku tiirsan Node.js, iyo npm (Node Package Manager) oo muhiim si loo installin-kareeyo libraries iyo dependencies.

Node js Website:- https://nodejs.org/en , NPM Website:- https://www.npmjs.com/

  • Code Editor: Waxaad u baahantahay sidaa caadiga ah meel aad code-kaaga aad ku qorto sidaa awgeeda waxaa isticmaalaysaa Visual Studio Code oo mid ugu caansan.

Visual Studio Code:- https://code.visualstudio.com/

Course-ka Visual Studio Code FREE:- https://code.visualstudio.com/

  • React Developer Tools: Waxaa Jira Tools aad u baahantahay Marka aad React Wax aad React isticmaalaysid Waxa ay isugu jiraan kuwo ah Software Visual Studio Code oo ah Extensions kuwo browser extensions ah.

React Developer Tools Qeybta Browser Extensions-ka oo ah Google Chrome iyo Mozilla Firefox.

Waxayaalaha uu kuu ogalaanayo inaad sameyso

  1. Component Tree: Waxaa uu kuu ogalaanayaa inaad aragto components sida lays kugu hagaajiyay iyo structure-kooda.
  2. Inspect Props and State: Waxaa ku arki Props iyo State-ka Component walba isla markaas. taasoo ka dhigaysaa inaad si fiican aad u la socoto aadna u celad bixiso App-kaaga.
  3. Component Re-Renders: Waa ku arki kartaa Components-ka dib loo renderkareeyay.
  4. Component Search: Waxaad ka raadin kartaa Component gaar ah taas oo ka dhigaysa inaad si fudud aad u arki karto dhamaan components-kaaga.

Sidaan Ula Soo Deg React Developer Tools

Marka la Joogo Chrome:

  • Waxaad aadaa Chrome Web Store.
  • Raadi React Developer Tools.
  • Ku dhufo Add to Chrome si uu usoo dego.
  • Marka la joogo Firefox:

Marka la Joogo FireFox:

  • Waxaad aadaa Mozilla Add-ons page.
  • Raadi React Developer Tools.
  • Ku dhufo Add to FireFox si uu usoo dego..

Marka aad soo degsato, Waa arkaysaa React tab Qeyta browser developer tools-ka (riix F12 si aad u furto developer tools).

3. Baro Asaasiyaadka React

Raac tilaabooyinkaan oo Baro React.

1. Baro JSX (JavaScript XML)

React Waxa ay isticmaashaa waza loo yaqaan JSX, taas oo kuu ogalaanayo inaad qorto Code HTML Camal ah oo ku dhexjro JavaScript. Fahan sida JSX ay u shaqeyso taas oo muhiim ah Sameynta React components.

Tusaale
const FirstElement = <h1>Hello, world!</h1>;

2. Baro Sameynta Components & Props

React Waa component-based, oo micnaheydu tahay wajhadda hore dhan waxaa lagu sameynayaa iyadoo la isticmaalayo Components. Waxaana Jira Labbo Nooc oo Components ah.

  • Functional Components.
  • Class Components.
Tusaalaha Class Component

import React, { Component } from 'react';

class Hirkaab extends Component {
  // Constructor to initialize state
  constructor(props) {
    super(props);
    this.state = {
      message: 'Hello from Hirkaab!',
    };
  }

  // Method to change state
  changeMessage = () => {
    this.setState({ message: 'State has been updated!' });
  };

  render() {
    return (
      <div>
        <h1>{this.state.message}</h1>
        <button onClick={this.changeMessage}>Change Message</button>
      </div>
    );
  }
}

export default Hirkaab;

Tusaalaha Functional Components.

import React, { useState } from 'react';

const Hirkaab = () => {
  // Declare state variable using the useState hook
  const [message, setMessage] = useState('Hello from Hirkaab!');

  // Function to change the message
  const changeMessage = () => {
    setMessage('State has been updated!');
  };

  return (
    <div>
      <h1>{message}</h1>
      <button onClick={changeMessage}>Change Message</button>
    </div>
  );
};

export default Hirkaab;

Props oo mid u ogalaanaya in components ay is dhaafsadaan data ayaa isaga ah mid muhiim.

  • Tusaale functional component oo leh props:
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

3. Baro State & Event Handling

State waxa ay u taagan tahay data isbadalaysa waqti oo xagamaynaysaa hab dhaqanka Components. React Waxaa uu isticmaalaa hooks sida useState() si loo maamulo states-ka(xaaladaha) functional components.

Tusaale UseState

import { useState } from 'react';

function TasbihCounter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You Clicked This Tasbih Counter {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

4. Baro Conditional Rendering & Lists

Marka la joogo React, waxaad samayn kartaa conditionals si aad u renderkareyso element iyo components. Sidoo kale waxaa soo muujinkartaa lists(Tixane) oo sheeyo ah adigoo isticmaalaya JavaScript’s map() function.

  • Tusaale conditional rendering ah:
function Greeting (props) {
  if (props.isLoggedIn) {
    return <h1>Welcome back Mohamed Dek!</h1>;
  }
  return <h1>Please sign up.</h1>;
}
  • Tusaale list rendering ah:
function ItemLists (props) {
  return (
    <ul>
      {props.items.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  );
}

5. Baro Mowducyada Advanced ah

Markii aad barato Asaasiyaadka, Waa Waqtigii aad kudaha usii geli lahayd Mocduucyada Advanced ah ee React.

a. Context API

b. React Router

  • Qaabka Loo Sameeyo React Router:
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contacts" component={Contacts} />
    </Router>
  );
}

c. Redux (Waa Mid Optional ah)

4. Samey Projects oo Practice-karey Wixii Aad Baratay

  • To-do list App
  • Calculator.
  • Quize App.
  • Recipe Finder.
  • Movie App
  • Blogging Platform.

Haddii aad intaas aad barato oo sameyso Projects kaas waad heli doontaa kalsooni kugu filan.

Waxaa rajaynaayaa inaad bloggaan aad wax baddan aad ka faa`iideen. marka wixii suaal ah qeybta comment-ka inoogu reeb.

Tags :

Mohamed Dek

I’m a passionate Web Designer, Web Developer, and Professional Graphic Designer, with over 2+ years of creative experience at Hirkaab. As the CEO & Founder of Hirkaab Academy, I’m dedicated to empowering young talents through modern design, web development, and digital creativity.

349 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *