مقدمه ای بر React

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

آغاز کار با ری‌اکت (Getting Started)

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

۱. کامپوننت‌ها (Components)

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

کامپوننت‌ها به دو نوع کلی تقسیم می‌شوند:

کامپوننت‌های تابعی (Functional Components): کامپوننت‌هایی که به‌صورت یک تابع تعریف می‌شوند و معمولاً برای نمایش عناصر ساده و یا اجرای منطق کم‌حجم مناسب‌اند.
کامپوننت‌های کلاسی (Class Components): این کامپوننت‌ها به‌صورت کلاس‌های ES6 تعریف می‌شوند و برای مدیریت وضعیت پیچیده و استفاده از lifecycle methods مفید هستند. با اینکه امروزه استفاده از کامپوننت‌های کلاسی کمتر رایج است و کامپوننت‌های تابعی به‌خاطر هوک‌ها (Hooks) ترجیح داده می‌شوند، اما همچنان باید با ساختار آن‌ها آشنا باشید.

مثال از یک کامپوننت ساده تابعی:

import React from 'react';

function Greeting() {
    return <h1>Hello, World!</h1>;
}

export default Greeting;

در این کد، کامپوننت Greeting یک عنصر <h1> را برمی‌گرداند که پیام “Hello, World!” را نمایش می‌دهد.

۲. JSX (JavaScript XML)

یکی از ویژگی‌های جذاب و قدرتمند در React، استفاده از JSX است که ترکیبی از زبان HTML و جاوااسکریپت است. JSX به توسعه‌دهندگان این امکان را می‌دهد که در کد جاوااسکریپت خود از تگ‌های HTML استفاده کنند، که این امر باعث می‌شود کد خواناتر و نوشتن رابط کاربری ساده‌تر شود.

نحوه کار JSX:

کد JSX در هنگام کامپایل به توابع جاوااسکریپت تبدیل می‌شود که به ایجاد و مدیریت DOM واقعی کمک می‌کنند.
JSX با HTML سازگاری زیادی دارد، اما تفاوت‌های کوچکی نیز وجود دارد؛ برای مثال، باید از className به‌جای class استفاده کرد.
مثال از JSX:

const element = <h1>Hello, React!</h1>;

در این مثال، element یک عنصر JSX است که به یک عنصر <h1> تبدیل می‌شود و عبارت “Hello, React!” را نمایش می‌دهد.

۳. عناصر پایه‌ای (Basic Elements)

React از انواع مختلف عناصر HTML مانند <div>, <h1>, <p>, و <button> پشتیبانی می‌کند که همگی برای ساخت رابط کاربری استفاده می‌شوند. این عناصر می‌توانند درون کامپوننت‌ها قرار گیرند و به راحتی با استفاده از JSX به‌عنوان بخشی از یک کامپوننت بزرگ‌تر مورد استفاده قرار گیرند.

۴. مثالی از ساختار کامپوننت در React

برای درک بهتر ساختار کلی یک کامپوننت React، به مثال زیر دقت کنید. این کد یک کامپوننت به نام App را ایجاد می‌کند که شامل دو کامپوننت فرزند (Header و Footer) است.

import React from 'react';

function App() {
    return (
        <div>
            <Header />
            <Content />
            <Footer />
        </div>
    );
}

function Header() {
    return <h1>Welcome to My First React App</h1>;
}

function Content() {
    return <p>This is the content of my app.</p>;
}

function Footer() {
    return <footer>Footer information goes here.</footer>;
}

export default App;

در این کد:

App به‌عنوان کامپوننت اصلی برنامه عمل می‌کند و شامل چندین کامپوننت فرزند است.
Header, Content و Footer هرکدام بخشی از رابط کاربری را نمایش می‌دهند.
ساختار کامپوننت‌ها مانند ساختار قطعات لگو است که به‌راحتی قابل اضافه کردن و مدیریت هستند.

۵. نمودار ساختار کامپوننت‌ها

در صورت نیاز می‌توانید از یک نمودار ساده برای نمایش سلسله‌مراتب کامپوننت‌ها استفاده کنید. به عنوان مثال:

App
├── Header
├── Content
└── Footer

این ساختار نشان می‌دهد که کامپوننت App شامل سه کامپوننت فرزند است که هرکدام وظیفه خاصی در برنامه دارند. استفاده از ساختار سلسله‌مراتبی در React، به کدنویسی منظم و خواناتر کمک می‌کند.

چرا React؟

React به یکی از محبوب‌ترین کتابخانه‌های جاوااسکریپت تبدیل شده است، زیرا ویژگی‌های منحصر به فردی ارائه می‌دهد که آن را برای توسعه‌دهندگان بسیار جذاب کرده است. این بخش به مرور مزایا و کاربردهای عملی React می‌پردازد که باعث شده است بسیاری از برنامه‌نویسان در پروژه‌های بزرگ و کوچک خود از این کتابخانه استفاده کنند.

۱. مزایای کلیدی React

الف) سرعت (Performance)

یکی از مهم‌ترین ویژگی‌های React، سرعت بالا و بهینه‌سازی‌های داخلی است که این کتابخانه ارائه می‌دهد. React از Virtual DOM استفاده می‌کند که یک نسخه‌ی مجازی از DOM واقعی است. به این صورت که وقتی تغییری در رابط کاربری رخ می‌دهد، React ابتدا این تغییرات را در Virtual DOM اعمال می‌کند، سپس تفاوت‌ها را با DOM واقعی مقایسه کرده و فقط بخش‌های تغییر یافته را به‌روزرسانی می‌کند. این روش موجب کاهش بار مرورگر و افزایش سرعت بارگذاری صفحات می‌شود.

ب) انعطاف‌پذیری (Flexibility)

React تنها بر روی لایه‌ی نمایشی (UI) تمرکز دارد و همین امر آن را به یک ابزار بسیار انعطاف‌پذیر تبدیل کرده است. شما می‌توانید React را با سایر کتابخانه‌ها و فریم‌ورک‌ها مانند Redux برای مدیریت وضعیت، React Router برای مسیریابی، و حتی Next.js برای ساخت برنامه‌های سمت سرور (Server-Side Rendering) ترکیب کنید. این انعطاف‌پذیری به توسعه‌دهندگان امکان می‌دهد که از React به‌عنوان بخشی از یک سیستم بزرگ‌تر استفاده کنند.

ج) قابلیت استفاده‌ی مجدد کامپوننت‌ها (Reusable Components)

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

د) جامعه بزرگ و پشتیبانی قوی (Large Community and Strong Support)

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

۲. کاربردهای عملی React در پروژه‌های جاوااسکریپت

الف) توسعه رابط‌های کاربری پیچیده و پویا

React برای توسعه‌ی رابط‌های کاربری پیچیده و پویا ایده‌آل است. به عنوان مثال، در یک پلتفرم اجتماعی مانند فیسبوک، نیاز است که محتوای زیادی به‌صورت پویا به‌روزرسانی شود. React این امکان را به توسعه‌دهندگان می‌دهد تا با مدیریت صحیح وضعیت (State) و استفاده از Virtual DOM، این تغییرات را بدون کاهش سرعت اعمال کنند.

ب) مدیریت موثر وضعیت (State Management)

در برنامه‌های بزرگ و پیچیده، مدیریت وضعیت یکی از چالش‌های اصلی است. React این مشکل را با کمک State و ابزارهایی مانند Redux یا Context API حل می‌کند. این ویژگی به توسعه‌دهندگان امکان می‌دهد که به‌سادگی وضعیت برنامه را مدیریت کرده و به‌روزرسانی کنند، بدون اینکه ساختار کامپوننت‌ها یا سلسله‌مراتب برنامه دچار مشکل شود.

ج) بهینه‌سازی عملکرد و کاهش بار سرور

React به‌خاطر ویژگی‌هایی مانند Server-Side Rendering (SSR) و کد اسپلایتینگ (Code Splitting) به‌راحتی قابل بهینه‌سازی است. برای مثال، با استفاده از Next.js می‌توان بخش‌های مختلف یک برنامه را به‌صورت جداگانه و تنها در صورت نیاز بارگذاری کرد. این تکنیک‌ها باعث بهبود عملکرد و کاهش بار سرور می‌شوند، که به‌ویژه در برنامه‌های پیچیده و تجاری بسیار موثر است.

د) پروژه‌های عملی و بهینه‌سازی در JavaScript

React در پروژه‌های مختلفی از جمله وب‌اپلیکیشن‌ها، داشبوردهای مدیریتی، وب‌سایت‌های فروشگاهی، و حتی اپلیکیشن‌های موبایل کاربرد دارد. استفاده از React Native که نسخه موبایلی React است، به توسعه‌دهندگان این امکان را می‌دهد که کدهای جاوااسکریپت خود را به‌صورت کاملاً بومی (Native) در پلتفرم‌های موبایل به‌کار ببرند. React در هر پروژه‌ای که به کارایی بالا و رابط کاربری پویا نیاز دارد، به‌خوبی عمل می‌کند و به توسعه‌دهندگان ابزارهای لازم برای پروژه‌های عملی و بهینه‌سازی در JavaScript را می‌دهد.React به دلیل سرعت بالا، انعطاف‌پذیری، ساختار کامپوننت‌محور و جامعه بزرگ، یکی از بهترین گزینه‌ها برای توسعه‌ی برنامه‌های تحت وب است. با React می‌توانید رابط‌های کاربری پیچیده، سریع و کاربرپسند ایجاد کنید و از بهترین تکنیک‌های بهینه‌سازی جاوااسکریپت بهره‌مند شوید.

نصب و استفاده (Installation and Setup)

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

۱. نصب با استفاده از Create React App

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

مراحل نصب

۱. نصب Node.js:

ابتدا باید Node.js و npm (مدیر بسته‌های Node.js) را بر روی سیستم خود نصب کنید. Node.js یک محیط اجرایی جاوااسکریپت است که به شما امکان می‌دهد از npm برای نصب بسته‌ها و کتابخانه‌ها استفاده کنید.
می‌توانید Node.js را از سایت رسمی Node.js دانلود و نصب کنید.

۲. ایجاد پروژه جدید با Create React App:

پس از نصب Node.js، یک ترمینال یا خط فرمان باز کنید.

دستور زیر را وارد کنید تا Create React App به‌طور سراسری نصب شود (اختیاری):

npm install -g create-react-app

سپس، برای ایجاد پروژه جدید، از دستور زیر استفاده کنید و نام دلخواه برای پروژه خود وارد کنید. به‌عنوان مثال، اگر نام پروژه را my-app قرار دهیم:

npx create-react-app my-app

دستور npx به شما امکان می‌دهد که از Create React App بدون نصب سراسری استفاده کنید. این دستور به‌طور خودکار ابزار را دانلود کرده و پروژه‌ی جدید را در پوشه‌ای به نام my-app ایجاد می‌کند.

۳. ورود به پوشه پروژه و اجرای آن:

پس از نصب و ایجاد پروژه، به پوشه‌ی پروژه بروید و پروژه را اجرا کنید:

cd my-app
npm start

با اجرای دستور npm start، سرور محلی شروع به کار می‌کند و برنامه React شما در مرورگر به‌صورت خودکار باز می‌شود. به‌طور پیش‌فرض، آدرس لوکال‌هاست http://localhost:3000 برای مشاهده پروژه استفاده می‌شود.

۲. ساختار پروژه در React

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

my-app/
├── node_modules/
├── public/
│   ├── index.html
└── src/
    ├── App.js
    ├── index.js

public/: شامل فایل‌های استاتیک مانند index.html که نقطه ورود برنامه است.
src/: شامل فایل‌های اصلی جاوااسکریپت مانند App.js و index.js است. این فایل‌ها حاوی کدهای اصلی React و کامپوننت‌ها هستند.

۳. تنظیمات پیش‌فرض و سفارشی‌سازی‌ها

Create React App با تنظیمات پیش‌فرض و بهینه برای شروع یک پروژه ساده ایجاد می‌شود. این تنظیمات شامل پیش‌پیکربندی‌هایی برای استفاده از JSX، ES6 و ابزارهایی مانند Webpack برای مدیریت بسته‌ها است. اگر نیاز به سفارشی‌سازی‌های بیشتری دارید، می‌توانید از ابزارهای اضافی استفاده کرده یا پیکربندی را شخصی‌سازی کنید.

۴. نمونه کد یک پروژه اولیه در React

پس از ایجاد پروژه و اجرای آن، فایل App.js حاوی کدی مشابه زیر خواهد بود. این کد یک کامپوننت ساده را نمایش می‌دهد که پیام “Hello, React!” را نشان می‌دهد.

// src/App.js

import React from 'react';

function App() {
    return (
        <div className="App">
            <h1>Hello, React!</h1>
            <p>Welcome to your first React app.</p>
        </div>
    );
}

export default App;

کد فوق: کامپوننت App با استفاده از JSX یک عنصر <h1> و یک <p> را برمی‌گرداند که پیام خوش‌آمدگویی به برنامه را نمایش می‌دهد.

۵. نصب و راه‌اندازی سریع با روش‌های دیگر

علاوه بر Create React App، می‌توانید از روش‌های دیگری نیز برای نصب و راه‌اندازی React استفاده کنید:

با استفاده از CDN: برای اضافه کردن سریع React به یک فایل HTML می‌توانید از لینک‌های CDN استفاده کنید. این روش برای پروژه‌های آزمایشی و کوچک مناسب است.

<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

تنظیم دستی با Webpack و Babel: اگر نیاز به کنترل دقیق‌تر بر روی تنظیمات پروژه دارید، می‌توانید به‌صورت دستی Webpack و Babel را پیکربندی کنید. این روش برای پروژه‌های پیشرفته‌تر و نیازمند بهینه‌سازی بیشتر مناسب است.استفاده از Create React App سریع‌ترین و ساده‌ترین روش برای شروع کار با React است و یک محیط آماده برای توسعه رابط کاربری فراهم می‌کند. با استفاده از آن، بدون نگرانی از تنظیمات پیچیده می‌توانید مستقیماً بر روی پروژه خود تمرکز کنید و با ساختار و عملکرد اولیه‌ی React آشنا شوید.

آغاز سریع (Quick Start)

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

۱. ایجاد یک پروژه اولیه با React

در این مثال، از Create React App برای راه‌اندازی پروژه استفاده می‌کنیم که ساده‌ترین روش برای شروع کار با React است. مراحل راه‌اندازی پروژه اولیه به شرح زیر است:

نصب و ایجاد پروژه: ابتدا از دستور زیر برای ایجاد پروژه جدید استفاده کنید (فرض بر این است که Node.js نصب شده است):

npx create-react-app quick-start-app

این دستور یک پروژه‌ی React جدید در پوشه‌ای به نام quick-start-app ایجاد می‌کند و همه‌ی تنظیمات موردنیاز را برایتان آماده می‌کند.

اجرای پروژه: پس از ایجاد پروژه، به پوشه‌ی آن بروید و سرور محلی را اجرا کنید:

cd quick-start-app
npm start

پس از اجرا، پروژه‌ی شما در مرورگر در آدرس http://localhost:3000 باز می‌شود و یک صفحه خوش‌آمدگویی ساده از React نمایش داده می‌شود.

۲. ساختار پروژه و ویرایش اولین کامپوننت

اکنون که پروژه اجرا شده است، به سراغ پوشه src بروید، که شامل فایل‌های اصلی جاوااسکریپت پروژه است. فایل App.js در این پوشه به‌عنوان کامپوننت اصلی برنامه‌ی شما عمل می‌کند و جایی است که می‌توانید اولین تغییرات را اعمال کنید.

ایجاد یک صفحه ساده با مفاهیم پایه‌ای React
برای نمایش یک صفحه ساده که برخی از مفاهیم پایه‌ای React مانند کامپوننت‌ها، JSX، و State را نشان می‌دهد، فایل App.js را باز کرده و کد زیر را جایگزین کنید:

// src/App.js

import React, { useState } from 'react';

function App() {
    // تعریف state برای شمارشگر ساده
    const [count, setCount] = useState(0);

    // تابعی برای افزایش شمارشگر
    const increment = () => {
        setCount(count + 1);
    };

    // تابعی برای کاهش شمارشگر
    const decrement = () => {
        setCount(count - 1);
    };

    return (
        <div style={{ textAlign: 'center', marginTop: '50px' }}>
            <h1>Welcome to My React App</h1>
            <p>This is a simple counter application built with React.</p>
            <h2>Count: {count}</h2>
            <button onClick={increment}>Increase</button>
            <button onClick={decrement}>Decrease</button>
        </div>
    );
}

export default App;

توضیح کد
این کد یک برنامه شمارشگر ساده را پیاده‌سازی می‌کند که برخی از مفاهیم اصلی React را نشان می‌دهد:

State: ما از useState برای تعریف state استفاده کرده‌ایم که مقدار شمارش را در خود نگه می‌دارد. count به‌عنوان مقدار فعلی شمارشگر و setCount به‌عنوان تابعی برای تغییر مقدار آن استفاده می‌شود.

توابع برای تغییر State:

increment: این تابع با کلیک روی دکمه «Increase» فراخوانی می‌شود و مقدار شمارشگر را یک واحد افزایش می‌دهد.
decrement: این تابع با کلیک روی دکمه «Decrease» فراخوانی می‌شود و مقدار شمارشگر را یک واحد کاهش می‌دهد.
نمایش کامپوننت‌ها با JSX: در بخش return، از JSX استفاده شده تا رابط کاربری برنامه را ایجاد کنیم. این رابط شامل عنوان، توضیحات، مقدار شمارشگر و دو دکمه برای تغییر مقدار آن است.

نمایش خروجی در مرورگر
پس از ذخیره‌ی تغییرات، مرورگر به‌صورت خودکار صفحه‌ی جدید را به‌روزرسانی می‌کند و شما می‌توانید برنامه شمارشگر خود را ببینید. با کلیک بر روی دکمه‌ها، مقدار شمارشگر به‌روزرسانی می‌شود و به شما امکان می‌دهد که با مفاهیم State و رویدادهای React آشنا شوید.

۳. مفاهیم پایه‌ای نمایش داده شده در مثال

این مثال به‌طور خلاصه برخی از مفاهیم کلیدی React را پوشش می‌دهد:

استفاده از State: با استفاده از useState، می‌توانید داده‌هایی را در کامپوننت ذخیره کرده و به‌صورت پویا آن‌ها را به‌روزرسانی کنید.
مدیریت رویدادها: با استفاده از دکمه‌ها و تخصیص توابع increment و decrement به رویداد onClick، می‌توانید تعاملات ساده‌ای ایجاد کنید.
JSX: استفاده از JSX به شما اجازه می‌دهد که کدهای HTML و جاوااسکریپت را ترکیب کنید و یک رابط کاربری واضح و خوانا ایجاد کنید.
این پروژه ساده به شما کمک می‌کند تا مفاهیم اولیه React مانند state، رویدادها و JSX را در عمل ببینید. این اولین قدم در استفاده از React برای ساخت رابط‌های کاربری تعاملی است و شما را برای ایجاد پروژه‌های پیچیده‌تر آماده می‌کند.

نظریه و مفاهیم پشت  React

React یک کتابخانه‌ی قدرتمند است که براساس مفاهیم و نظریه‌های منحصربه‌فردی ساخته شده است. درک این مفاهیم به شما کمک می‌کند تا بدانید React چگونه کار می‌کند و چرا در ساخت رابط‌های کاربری تعاملی و سریع، به یکی از بهترین انتخاب‌ها تبدیل شده است. در این بخش، به توضیح برخی از مفاهیم کلیدی React مانند Virtual DOM، State، Props، و Lifecycle Methods می‌پردازیم.

۱. Virtual DOM

DOM (Document Object Model ساختاری است که مرورگر از آن برای نمایش و مدیریت محتوا استفاده می‌کند. هر بار که تغییری در DOM واقعی ایجاد می‌شود، مرورگر باید صفحه را دوباره رندر کند که ممکن است باعث کندی و تأخیر شود. Virtual DOM یک نسخه‌ی مجازی از DOM واقعی است که در حافظه قرار دارد و توسط React مدیریت می‌شود.

React با استفاده از Virtual DOM تغییرات را ابتدا در این نسخه مجازی اعمال می‌کند و سپس تنها تغییرات ضروری را به DOM واقعی منتقل می‌کند. این تکنیک باعث افزایش سرعت و کارایی برنامه‌ها می‌شود.

تفاوت بین DOM واقعی و Virtual DOM:

DOM واقعی: هر تغییر کوچک در DOM واقعی باعث رندر مجدد و بارگذاری کامل صفحه می‌شود.
Virtual DOM: React تغییرات را در Virtual DOM اعمال می‌کند و سپس تفاوت‌ها را با DOM واقعی مقایسه می‌کند. فقط بخش‌هایی که تغییر کرده‌اند به‌روزرسانی می‌شوند، که این باعث افزایش سرعت برنامه می‌شود.

۲. State

State حالتی از داده‌ها است که توسط کامپوننت مدیریت می‌شود و به‌مرور زمان می‌تواند تغییر کند. State یکی از مفاهیم کلیدی React است که به شما اجازه می‌دهد تا اطلاعات را در داخل کامپوننت ذخیره کنید و براساس تغییرات آن، رابط کاربری را به‌روزرسانی کنید.

مثال ساده از State:

import React, { useState } from 'react';

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

    return (
        <div>
            <h2>Count: {count}</h2>
            <button onClick={() => setCount(count + 1)}>Increase</button>
        </div>
    );
}

export default Counter;

در این مثال، count و setCount نشان‌دهنده state هستند که در داخل کامپوننت Counter تعریف شده‌اند. هر بار که کاربر بر روی دکمه کلیک می‌کند، مقدار count تغییر می‌کند و رابط کاربری به‌روزرسانی می‌شود.

۳. Props

Props (مخفف Properties) راهی است برای انتقال داده‌ها از یک کامپوننت به کامپوننت دیگر. برخلاف State که مخصوص هر کامپوننت است، Props توسط کامپوننت پدر به فرزند ارسال می‌شود و قابل تغییر نیست. Props به شما اجازه می‌دهد که اطلاعاتی را از کامپوننت‌های والد به کامپوننت‌های فرزند منتقل کنید و از این طریق، رابط‌های کاربری را با انعطاف بیشتری بسازید.

مثال ساده از استفاده Props:

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

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

export default App;

در این مثال، کامپوننت Greeting یک prop به نام name دریافت می‌کند که توسط کامپوننت App مقداردهی شده است. این ویژگی به ما امکان می‌دهد که محتوای هر کامپوننت را به‌صورت پویا تغییر دهیم.

۴. Life Cycle Methods

هر کامپوننت در React دارای یک چرخه حیات (Life Cycle) است که مراحل مختلفی از ایجاد، به‌روزرسانی و از بین رفتن کامپوننت را شامل می‌شود. در کامپوننت‌های کلاسی، این مراحل با متدهایی به نام Lifecycle Methods مدیریت می‌شوند. Lifecycle Methods به شما اجازه می‌دهند که کدی را در زمان‌های خاصی از حیات کامپوننت اجرا کنید.

مراحل اصلی Life Cycle:
Mounting: زمانی که کامپوننت در DOM قرار می‌گیرد. متد componentDidMount پس از اولین رندر شدن فراخوانی می‌شود.
Updating: زمانی که State یا Props تغییر می‌کند و کامپوننت نیاز به رندر مجدد دارد. متد componentDidUpdate پس از هر به‌روزرسانی فراخوانی می‌شود.
Unmounting: زمانی که کامپوننت از DOM حذف می‌شود. متد componentWillUnmount قبل از حذف کامپوننت از DOM فراخوانی می‌شود.
مثال از کامپوننت کلاسی که از Lifecycle Methods استفاده می‌کند:

import React, { Component } from 'react';

class Clock extends Component {
    constructor(props) {
        super(props);
        this.state = { time: new Date() };
    }

    componentDidMount() {
        this.timerID = setInterval(() => this.tick(), 1000);
    }

    componentWillUnmount() {
        clearInterval(this.timerID);
    }

    tick() {
        this.setState({ time: new Date() });
    }

    render() {
        return <h2>The time is {this.state.time.toLocaleTimeString()}</h2>;
    }
}

export default Clock;

در این مثال:

componentDidMount پس از اولین رندر شدن کامپوننت فراخوانی می‌شود و یک تایمر ایجاد می‌کند که هر ثانیه تابع tick را اجرا می‌کند.
componentWillUnmount قبل از حذف کامپوننت از DOM فراخوانی می‌شود و تایمر را پاک می‌کند تا از مشکلات حافظه جلوگیری شود.
React براساس مفاهیم قدرتمندی مانند Virtual DOM، State، Props، و Lifecycle Methods ساخته شده است که به توسعه‌دهندگان کمک می‌کنند تا رابط‌های کاربری سریع و قابل‌مدیریت ایجاد کنند. درک این مفاهیم به شما این امکان را می‌دهد که از React به شکل بهینه‌تری استفاده کنید و برنامه‌هایی تعاملی و کاربرپسند بسازید.

نتیجه‌گیری

React با ارائه‌ی رویکردی مدرن و بهینه برای توسعه رابط‌های کاربری، به یکی از محبوب‌ترین کتابخانه‌های جاوااسکریپت تبدیل شده است. در این مقاله، به بررسی مفاهیم اساسی React از جمله Virtual DOM، State، Props و Lifecycle Methods پرداختیم و دیدیم که چگونه این مفاهیم به بهبود کارایی، انعطاف‌پذیری و خوانایی کدها کمک می‌کنند. با ساختار کامپوننت‌محور و توانایی استفاده از Virtual DOM، React به شما امکان می‌دهد که رابط‌های کاربری سریع و تعاملی بسازید و تجربه‌ای بهینه برای کاربران خود فراهم کنید.

از طرف دیگر، React با ابزارها و کتابخانه‌های همراه مانند Redux، React Router، و Next.js قابلیت‌های بیشتری برای توسعه و مدیریت برنامه‌های پیچیده ارائه می‌دهد. این کتابخانه در پروژه‌های کوچک تا بزرگ مقیاس‌پذیر است و با پشتیبانی گسترده‌ی جامعه توسعه‌دهندگان و منابع آموزشی بسیار، می‌تواند یادگیری و استفاده از آن را برای شما آسان کند.

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