React.js چیست؟ راهنمای شروع به کار با کامپوننت‌ها و هوک‌ها (Hooks)

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

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

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

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

React چیست؟

React.js یا به اختصار React یک کتابخانه‌ی جاوااسکریپت برای ساخت رابط‌های کاربری (UI) است. هر برنامه‌ی وبی که با React ساخته می‌شود از مجموعه‌ای از کامپوننت‌های قابل‌استفاده‌ی مجدد تشکیل شده است. برای مثال می‌توانیم یک کامپوننت جداگانه برای نوار ناوبری (Navigation Bar)، یک کامپوننت برای فوتر، و دیگری برای محتوای اصلی داشته باشیم. در بخش مربوط به کار با کامپوننت‌ها این موضوع را بهتر درک خواهید کرد.

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

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

JSX در React

در بیشتر مواقع، سینتکسی که برای ساخت اپلیکیشن‌های React استفاده می‌شود JSX (JavaScript XML) نام دارد. JSX یک افزونه‌ی سینتکس برای جاوااسکریپت است که به ما اجازه می‌دهد منطق جاوااسکریپت و منطق رابط کاربری را به شکلی منسجم و یکپارچه ترکیب کنیم.

با استفاده از JSX دیگر نیازی به دستکاری مستقیم DOM از طریق متدهایی مثل document.getElementById یا querySelector نداریم. این موضوع توسعه‌ی اپلیکیشن‌های React را ساده‌تر و سریع‌تر می‌کند.

البته استفاده از JSX اجباری نیست، اما تجربه‌ی توسعه را بسیار روان‌تر می‌سازد.

نمونه کد JSX در React

function App() {
    const greetings = "Hello World";
    return (
        <div className="App">
            <h1>{greetings}</h1>
        </div>
    );
}

در کد بالا، یک کامپوننت تابعی (Functional Component) به نام App ساخته‌ایم که یک متن ساده را در مرورگر رندر می‌کند. پیش از بخش return یک متغیر تعریف کرده‌ایم و سپس آن را با استفاده از آکولادها {} داخل مارکاپ قرار داده‌ایم.

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

چرا React؟

بسیاری از توسعه‌دهندگان و سازمان‌ها React را به‌عنوان کتابخانه‌ی اصلی خود انتخاب کرده‌اند. دلایل این انتخاب عبارت‌اند از:

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

چه کسانی از React استفاده می‌کنند؟

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

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

موارد استفاده از React

به طور کلی، React برای ساخت رابط کاربری (Frontend) اپلیکیشن‌های وب استفاده می‌شود. این کتابخانه با رندر سریع صفحات و بهبود کارایی شناخته می‌شود و می‌تواند در ساخت هر محصولی که روی وب اجرا می‌شود به کار رود.

برخی نمونه‌های رایج استفاده از React عبارت‌اند از:

• اپلیکیشن‌های پخش موسیقی
• شبکه‌های اجتماعی
• اپلیکیشن‌های گفت‌وگوی آنی (Real-time Chat)
• اپلیکیشن‌های وب فول‌استک (Full-stack)
• فروشگاه‌های اینترنتی (E-commerce)
• اپلیکیشن‌های نمایش وضعیت آب‌وهوا
• اپلیکیشن‌های مدیریت وظایف (To-do List)

ویژگی‌های React

React مجموعه‌ای از قابلیت‌های قدرتمند دارد که آن را به یکی از محبوب‌ترین گزینه‌ها برای توسعه‌دهندگان تبدیل کرده است. برخی از مهم‌ترین ویژگی‌های آن عبارت‌اند از:

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

مزایا و معایب React

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

مزایای React

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

معایب React

• چالش برای مبتدیان: کسانی که درک عمیقی از جاوااسکریپت (به‌ویژه ES6) ندارند، ممکن است یادگیری React را دشوار بیابند.
• نبود برخی قابلیت‌های پایه: React به‌صورت پیش‌فرض امکاناتی مثل مدیریت وضعیت سراسری (State Management) یا مسیریابی (Routing) را ندارد. برای این موارد باید کتابخانه‌های جانبی نصب و یاد گرفته شوند.

نصب React

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

برای بررسی، کافی است در ترمینال دستور زیر را اجرا کنید:

node -v

اگر همه‌چیز درست پیش رفته باشد، نسخه‌ی Node.js نصب‌شده روی سیستم نمایش داده می‌شود.

ایجاد پروژه React

حالا برای نصب React مراحل زیر را دنبال کنید:

1. یک پوشه بسازید یا به مسیری بروید که می‌خواهید پروژه‌ی React در آن قرار گیرد.
2. دستور زیر را در ترمینال اجرا کنید:

npx create-react-app react-kit

این دستور یک پروژه‌ی React در پوشه‌ای به نام react-kit ایجاد می‌کند.

اجرای پروژه

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

npm run start

این دستور سرور توسعه‌ی شما را راه‌اندازی می‌کند. پس از چند لحظه، صفحه‌ی پیش‌فرض React روی آدرس localhost:3000 در مرورگر نمایش داده می‌شود. اگر تا این مرحله پیش آمده‌اید، اولین پروژه‌ی React خود را با موفقیت نصب کرده‌اید.

ساختار پوشه‌ها

• پوشه‌ی public: شامل فایل index.html است که کدهای شما در آن تزریق شده و به مرورگر ارائه می‌شود.
• پوشه‌ی src: محل قرارگیری منطق، استایل‌ها و مارکاپ پروژه است. فایل اصلی این پوشه، App.js، به‌عنوان کامپوننت ریشه عمل می‌کند.

کافی است فایل App.js را باز کنید، تغییراتی در آن بدهید و ذخیره کنید؛ تغییرات به‌صورت خودکار در مرورگر نمایش داده خواهند شد.

کامپوننت‌ها در React

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

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

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

در بیشتر موارد، کامپوننت‌ها ترکیبی از کد HTML و مقادیر پویا (Dynamic Values) هستند که با جاوااسکریپت ساخته می‌شوند. ساخت کامپوننت‌ها شبیه تعریف تابع در جاوااسکریپت است.

ایجاد یک کامپوننت کلاسی در React

نمونه‌ی زیر یک کامپوننت کلاسی ساده را نشان می‌دهد:

class Student extends React.Component {
    constructor() {
        super();
        this.state = { language: "JavaScript" };
    }
    render() {
        return <p>I am learning {this.state.language}</p>;
    }
}

در این مثال:

• یک متغیر state به نام language تعریف کرده‌ایم که مقدار آن "JavaScript" است.
• سپس این مقدار را در مارکاپ داخل تگ <p> استفاده کرده‌ایم.

این نمونه نشان می‌دهد که چگونه می‌توانیم منطق جاوااسکریپت و کد HTML را بدون نیاز به متدهای مستقیم DOM ترکیب کنیم.

زمانی که این کامپوننت در مرورگر رندر شود، خروجی زیر نمایش داده خواهد شد:

I am learning JavaScript

ایجاد یک کامپوننت تابعی در React

در این بخش همان مثالی که در قسمت قبل با کامپوننت کلاسی ساختیم را این بار با یک کامپوننت تابعی (Functional Component) بازسازی می‌کنیم.

نمونه کد:

function Student() {
    const language = "JavaScript";
    return (
        <div>
            <p>I am learning { language }</p>
        </div>
    );
}

در این مثال:

• نام کامپوننت همچنان Student است. توجه داشته باشید که نام کامپوننت‌ها باید همیشه با حرف بزرگ شروع شوند.
• یک متغیر به نام language تعریف کرده‌ایم و مقدار آن را داخل مارکاپ با استفاده از آکولادها {} قرار داده‌ایم.
• همانند بخش قبل، بدون نیاز به متدهای DOM در جاوااسکریپت، مقدار متغیر را در خروجی نمایش داده‌ایم.

این کامپوننت نیز متغیر language را رندر می‌کند و در مرورگر عبارت زیر نمایش داده خواهد شد:

I am learning JavaScript

در ادامه‌ی آموزش، برای مدیریت وضعیت (State) در کامپوننت‌های تابعی از هوک useState استفاده خواهیم کرد تا بتوانیم متغیرهای پویا و قابل‌تغییر ایجاد کنیم.

مدیریت رویدادها در React

رویدادها در React بسیار شبیه به رویدادهای HTML هستند؛ تنها تفاوت این است که در React نام رویدادها با camelCase نوشته می‌شوند. برای مثال:

• در HTML به این شیوه: onclick > در React به این شیوه: onClick
• در HTML به این شیوه: onchange > در React به این شیوه: onChange

نکته‌ی دیگر این است که هنگام ارسال یک رویداد به‌عنوان ویژگی (attribute) در JSX، باید از آکولادها {} استفاده کنیم، نه از کوتیشن " ". برای نمونه:

onClick={changeName}

به جای:

onClick="changeName"

نمونه کد مدیریت رویداد در React

import { useState } from "react";

function App() {
    const [name, setName] = useState("John");

    const changeName = () => {
        setName("James");
    };

    return (
        <div className="App">
            <p>His name is {name}</p>
            <button onClick={changeName}>Click me</button>
        </div>
    );
}

export default App;

در این مثال:

• یک state به نام name تعریف کرده‌ایم که مقدار اولیه‌ی آن "John" است.
• تابعی به نام changeName ساخته‌ایم که مقدار state را به "James" تغییر می‌دهد.
• یک دکمه داریم که با رویداد onClick این تابع را فراخوانی می‌کند.

نکات مهم

• نام تابع یا متغیر در JSX باید داخل آکولاد قرار گیرد، نه کوتیشن.
• به جای ویژگی class در HTML، در React از className استفاده می‌کنیم، چون class یک کلمه‌ی رزرو شده در جاوااسکریپت است.
• در انتهای فایل، کامپوننت را با export default خروجی گرفته‌ایم تا بتوانیم آن را در سایر کامپوننت‌ها ایمپورت کنیم.

کار با State در React

برای مدیریت وضعیت (State) در اپلیکیشن‌های React، از هوکی به نام useState استفاده می‌کنیم. هوک‌ها به ما اجازه می‌دهند بدون نیاز به نوشتن کامپوننت‌های کلاسی، به قابلیت‌های اضافی React دسترسی داشته باشیم.

با استفاده از هوک‌ها می‌توانیم وضعیت کامپوننت را مدیریت کنیم و حتی زمانی که متغیرهای state برای اولین بار رندر می‌شوند یا تغییر می‌کنند، رفتارهای خاصی را اجرا کنیم.

اگر در یک کامپوننت تابعی از useState استفاده نکنیم، تغییرات اعمال‌شده روی متغیرهای state در DOM منعکس نمی‌شوند و وضعیت بدون تغییر باقی می‌ماند.

نمونه کد استفاده از useState

import { useState } from "react";

function App() {
    const [name, setName] = useState("John");

    const changeName = () => {
        setName("James");
    };

    return (
        <div className="App">
            <p>His name is {name}</p>
            <button onClick={changeName}>Click me</button>
        </div>
    );
}

export default App;

توضیح کد

• ابتدا هوک useState را از React ایمپورت کرده‌ایم.
• یک متغیر state به نام name و یک تابع به نام setName ساخته‌ایم. مقدار اولیه‌ی name در هوک useState برابر "John" است.
• تابع changeName با استفاده از setName مقدار متغیر name را به "James" تغییر می‌دهد.
• در مارکاپ، وقتی دکمه کلیک شود، مقدار "John" به "James" تغییر می‌کند و این تغییر به‌طور خودکار در مرورگر نمایش داده می‌شود.

کار با هوک‌ها در React

در بخش قبلی دیدیم که چگونه می‌توانیم با استفاده از useState وضعیت (State) اپلیکیشن را مدیریت کنیم. حالا نوبت به یکی دیگر از هوک‌های پرکاربرد یعنی useEffect می‌رسد.

هوک useEffect به ما امکان می‌دهد هر بار که تغییراتی در state رخ می‌دهد، یک اثر (Effect) اجرا کنیم. به‌طور پیش‌فرض، این هوک در اولین رندر کامپوننت و سپس هر بار که state به‌روزرسانی می‌شود اجرا خواهد شد. همچنین می‌توانیم آن را طوری پیکربندی کنیم که فقط به تغییرات یک متغیر خاص واکنش نشان دهد.

نمونه کد استفاده از useEffect

import { useState, useEffect } from "react";

function App() {
    const [day, setDay] = useState(1);

    useEffect(() => {
        console.log(`You are in day ${day} of the year`);
    });

    return (
        <div>
            <button onClick={() => setDay(day + 1)}>Click to increase day</button>
        </div>
    );
}

export default App;

توضیح کد

• ابتدا هوک‌های useState و useEffect را از React ایمپورت کرده‌ایم.
• یک state به نام day با مقدار اولیه‌ی 1 ساخته‌ایم.
• درون useEffect یک پیام به کنسول لاگ می‌شود که مقدار فعلی day را نمایش می‌دهد.
• هر بار که دکمه کلیک شود، مقدار day یک واحد افزایش می‌یابد و این تغییر باعث اجرای دوباره‌ی useEffect می‌شود.

به این ترتیب، هر بار که state تغییر کند، می‌توانیم یک اثر جانبی (Side Effect) مثل لاگ کردن، فراخوانی API یا تغییر DOM اجرا کنیم.

کار با Props در React

Props یا همان Properties به ما اجازه می‌دهند داده‌ها را از یک کامپوننت به کامپوننت دیگر منتقل کنیم. این قابلیت باعث می‌شود جریان داده در اپلیکیشن پویا و قابل‌مدیریت باشد.

مثال اولیه بدون Props

App.js:

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

Bio.js:

function Bio() {
    return (
        <div>
            <p>My name is John</p>
            <p>I am a JavaScript developer</p>
        </div>
    );
}
export default Bio;

سپس کامپوننت Bio را در App ایمپورت و استفاده می‌کنیم:

import Bio from "./Bio";

function App() {
    return (
        <div className="App">
            <Bio />
        </div>
    );
}
export default App;

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

استفاده از Props برای داده‌های پویا

برای حل این مشکل، کامپوننت Bio را تغییر می‌دهیم:

function Bio({ name, language }) {
    return (
        <div>
            <p>My name is { name }</p>
            <p>I am a { language } developer</p>
        </div>
    );
}
export default Bio;

در اینجا:

• پارامترهای name و language را به‌صورت destructuring دریافت کرده‌ایم.
• این مقادیر به‌صورت پویا در مارکاپ نمایش داده می‌شوند.

حالا در کامپوننت App می‌توانیم مقادیر Props را ارسال کنیم:

import Bio from "./Bio";

function App() {
    return (
        <div className="App">
            <Bio name="James" language="Python" />
        </div>
    );
}
export default App;

نتیجه

هر مقداری که به‌عنوان ویژگی (attribute) در تگ Bio قرار دهیم، در مرورگر نمایش داده خواهد شد. این ویژگی برای مواقعی که می‌خواهیم یک کامپوننت را در بخش‌های مختلف اپلیکیشن استفاده کنیم اما با داده‌های متفاوت، بسیار کاربردی است.

یادگیری بیشتر درباره‌ی React

این آموزش، دانش پایه‌ای لازم برای شروع ساخت اپلیکیشن‌های وب با React را در اختیار شما قرار داد؛ اما همه‌ی آنچه باید درباره‌ی React بدانید همین نیست. برای ساخت یک اپلیکیشن کارآمد، هنوز قابلیت‌های دیگری لازم است، مانند:

• مسیریابی (Routing) در اپلیکیشن‌هایی که بیش از یک صفحه دارند.
• مدیریت وضعیت سراسری (State Management) با ابزارهایی مانند Redux.

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

جمع‌بندی

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

نکات کلیدی که مرور کردیم:

• React یک کتابخانه‌ی جاوااسکریپت برای ساخت رابط‌های کاربری پویا و مقیاس‌پذیر است.
• استفاده از کامپوننت‌های قابل‌استفاده‌ی مجدد باعث کاهش کدهای تکراری و افزایش کارایی می‌شود.
• هوک‌ها مانند useState و useEffect ابزارهای قدرتمندی برای مدیریت وضعیت و اعمال رفتارهای جانبی در کامپوننت‌های تابعی هستند.
• با Props می‌توان داده‌ها را بین کامپوننت‌ها منتقل کرد و جریان داده را پویا و قابل‌مدیریت ساخت.
• React به دلیل جامعه‌ی فعال، منابع آموزشی گسترده و فرصت‌های شغلی فراوان، یکی از بهترین گزینه‌ها برای توسعه‌دهندگان فرانت‌اند محسوب می‌شود.

در نهایت، React تنها نقطه‌ی شروع است. برای ساخت اپلیکیشن‌های کامل‌تر باید به سراغ ابزارهای جانبی مانند React Router برای مسیریابی و Redux برای مدیریت وضعیت سراسری بروید.

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