معرفی React.js به زبان ساده همراه با مثال عملی

در این مطلب از مجله رادیب سعی می‌کنیم به صورت جامع و کامل مفاهیم اصلی React.js را توضیح دهیم. در ادامه با استفاده از مثال‌های متعدد و کدهای نمونه، به بررسی موارد زیر می‌پردازیم

تا پایان این مقاله با مجله رادیب همراه باشید تا در مورد ری اکت اطلاعات بیشتری کسب کنید. 

• مقدمه‌ای بر React و نصب اولیه
• آشنایی با JSX
• کامپوننت‌های تابعی (Functional Components) و کلاس (Class Components)
• مفاهیم props و state
• استفاده از Hooks (مثل useState و useEffect)
• مدیریت رویدادها (Events)
• کار با لیست‌ها و فرم‌ها

---

۱. مقدمه و نصب اولیه

React یک کتابخانه‌ی متن‌باز جاوااسکریپت برای ساخت رابط‌های کاربری است که توسط فیسبوک توسعه یافته است. برای شروع کار با React، ابزار Create React App به شما کمک می‌کند تا به سرعت یک پروژه‌ی React را راه‌اندازی کنید.

نصب Create React App

ابتدا مطمئن شوید Node.js نصب شده باشد. سپس در ترمینال دستور زیر را اجرا کنید:

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

با اجرای این دستورات، یک پروژه‌ی جدید با ساختار استاندارد React ایجاد شده و در مرورگر به صورت خودکار باز می‌شود.

برای خرید سرور مجازی ابری ساعتی و اقتصادی از رادیب، کلیک کنید

---

۲. آشنایی با JSX

JSX یک سینتکس مخصوص در React است که به شما امکان می‌دهد کد HTML را در داخل جاوااسکریپت بنویسید. این سینتکس به کد شما خوانایی بیشتری می‌بخشد.

مثال ساده با JSX

// فایل: src/App.js

import React from 'react';

function App() {
  return (
    <div>
      <h1>سلام، به React خوش آمدید!</h1>
      <p>این یک مثال ساده از JSX است.</p>
    </div>
  );
}

export default App;

در این مثال، تابع App یک کامپوننت تابعی است که JSX را برمی‌گرداند.

---

۳. کامپوننت‌های تابعی (Functional Components) و کلاس (Class Components)

در React دو نوع کامپوننت اصلی وجود دارد:

1. کامپوننت‌های تابعی
2. کامپوننت‌های کلاس

۳.۱. کامپوننت تابعی

این نوع کامپوننت‌ها به صورت توابع ساده تعریف می‌شوند. با معرفی Hooks در نسخه‌های جدید React، استفاده از کامپوننت‌های تابعی رایج‌تر شده است.

// فایل: src/Welcome.js

import React from 'react';

function Welcome(props) {
  return <h2>سلام، {props.name}!</h2>;
}

export default Welcome;

۳.۲. کامپوننت کلاس

این نوع کامپوننت‌ها به صورت کلاس‌هایی تعریف می‌شوند که از React.Component ارث‌بری می‌کنند. این روش در گذشته رایج‌تر بود اما هم‌اکنون استفاده از کامپوننت‌های تابعی توصیه می‌شود.

خرید سرور مجازی با سرعت فوق العاده از رادیب، کلیک کنید

// فایل: src/WelcomeClass.js

import React, { Component } from 'react';

class WelcomeClass extends Component {
  render() {
    return <h2>سلام، {this.props.name}!</h2>;
  }
}

export default WelcomeClass;

---

۴. استفاده از props

props (مخفف properties) اطلاعاتی هستند که از والد به فرزند منتقل می‌شوند. این ویژگی به شما امکان می‌دهد کامپوننت‌های قابل استفاده مجدد بسازید.

مثال استفاده از props

// فایل: src/App.js

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

function App() {
  return (
    <div>
      <Welcome name="علی" />
      <Welcome name="سارا" />
      <Welcome name="رضا" />
    </div>
  );
}

export default App;

در این مثال، کامپوننت Welcome چندین بار با مقادیر مختلف برای prop name فراخوانی شده است.

---

۵. استفاده از state و Hook useState

state داده‌های داخلی کامپوننت است که ممکن است در طول زمان تغییر کند. در کامپوننت‌های تابعی از Hook به نام useState استفاده می‌کنیم.

مثال استفاده از useState

// فایل: src/Counter.js

import React, { useState } from 'react';

function Counter() {
  // مقدار اولیه state را 0 قرار می‌دهیم
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>شمارش: {count}</p>
      <button onClick={() => setCount(count + 1)}>افزایش شمارش</button>
      <button onClick={() => setCount(count - 1)}>کاهش شمارش</button>
    </div>
  );
}

export default Counter;

در این مثال، با استفاده از useState یک متغیر count تعریف شده که با دکمه‌ها افزایش یا کاهش می‌یابد.

---

۶. استفاده از useEffect برای مدیریت چرخه حیات کامپوننت

Hook useEffect به شما امکان می‌دهد عملکردهایی مشابه متدهای چرخه حیات (مانند componentDidMount و componentDidUpdate) را در کامپوننت‌های تابعی انجام دهید.

مثال استفاده از useEffect

// فایل: src/Timer.js

import React, { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  // معادل componentDidMount و componentDidUpdate
  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(prevSeconds => prevSeconds + 1);
    }, 1000);

    // تابع پاکسازی (مانند componentWillUnmount)
    return () => clearInterval(interval);
  }, []); // آرایه خالی یعنی فقط یکبار پس از mount اجرا می‌شود

  return (
    <div>
      <p>ثانیه: {seconds}</p>
    </div>
  );
}

export default Timer;

در این مثال، هر ثانیه شمارنده افزایش می‌یابد. آرایه‌ی خالی در useEffect باعث می‌شود که افکت فقط یک‌بار پس از mount اجرا شود.

---

۷. مدیریت رویدادها (Events)

در React، مدیریت رویدادها شبیه به جاوااسکریپت معمولی است، با این تفاوت که از سینتکس camelCase برای نام رویدادها استفاده می‌شود.

مثال مدیریت رویداد

// فایل: src/EventExample.js

import React from 'react';

function EventExample() {
  const handleClick = () => {
    alert('دکمه کلیک شد!');
  };

  return (
    <div>
      <button onClick={handleClick}>کلیک کن</button>
    </div>
  );
}

export default EventExample;

در این مثال، با کلیک بر روی دکمه، تابع handleClick اجرا شده و پیغامی نمایش داده می‌شود.

---

۸. کار با لیست‌ها و کلیدها (Lists and Keys)

هنگام نمایش لیست‌ها در React، باید از ویژگی key برای هر آیتم استفاده کنید تا React بتواند تغییرات را به صورت بهینه مدیریت کند.

مثال لیست‌ها

// فایل: src/TodoList.js

import React from 'react';

function TodoList(props) {
  // فرض کنید props.todos آرایه‌ای از todoهاست
  return (
    <ul>
      {props.todos.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

export default TodoList;

و در فایل اصلی:

// فایل: src/App.js

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

function App() {
  const todos = [
    { id: 1, text: 'یادگیری React' },
    { id: 2, text: 'تمرین JavaScript' },
    { id: 3, text: 'ساخت یک پروژه کوچک' }
  ];

  return (
    <div>
      <h1>لیست کارها</h1>
      <TodoList todos={todos} />
    </div>
  );
}

export default App;

در این مثال، هر آیتم لیست با یک key منحصربه‌فرد مشخص شده است.

---

۹. کار با فرم‌ها

در React، فرم‌ها معمولاً به صورت کنترل‌شده (Controlled Components) پیاده‌سازی می‌شوند، به این معنی که مقادیر ورودی توسط state کنترل می‌شوند.

مثال فرم ساده

// فایل: src/NameForm.js

import React, { useState } from 'react';

function NameForm() {
  const [name, setName] = useState('');

  const handleChange = (event) => {
    setName(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`نام وارد شده: ${name}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        نام:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      <button type="submit">ارسال</button>
    </form>
  );
}

export default NameForm;

در این مثال، مقدار ورودی در state ذخیره شده و با تغییر مقدار ورودی، state به‌روز می‌شود. هنگام ارسال فرم، از ارسال پیش‌فرض فرم جلوگیری می‌شود و مقدار ورودی نمایش داده می‌شود.

خرید هاست cPanel و دایرکت ادمین از رادیب، کلیک کنید

---

۱۰. جمع‌بندی

در این مطلب موارد زیر را پوشش دادیم:

• مقدمه و نصب: ایجاد یک پروژه‌ی React با Create React App
• JSX: نحوه استفاده از سینتکس ترکیبی HTML و جاوااسکریپت
• کامپوننت‌های تابعی و کلاس: تعریف کامپوننت‌ها به دو روش
• props: انتقال داده از والد به فرزند
• state و useState: مدیریت داده‌های داخلی کامپوننت
• useEffect: مدیریت چرخه حیات کامپوننت‌ها در کامپوننت‌های تابعی
• مدیریت رویدادها: مثال‌هایی از کلیک و سایر رویدادها
• لیست‌ها و کلیدها: نحوه نمایش آرایه‌ها در UI
• فرم‌ها: ایجاد فرم‌های کنترل‌شده

React به شما این امکان را می‌دهد که اپلیکیشن‌های مدرن، سریع و مقیاس‌پذیر بسازید. با استفاده از کامپوننت‌های کوچک و قابل استفاده مجدد، نگهداری کد و توسعه‌ی پروژه ساده‌تر می‌شود.

امیدوارم این آموزش به شما در درک بهتر React و شروع پروژه‌های خود کمک کرده باشد. در صورت داشتن هرگونه سوال یا نیاز به توضیحات بیشتر در بخش‌های خاص، خوشحال می‌شویم با کارشناسان ما در مای رادیب در ارتباط باشید.