ری اکت چیست؟ دلیل استفاده از آن و روش کار

ری اکت (React) معروف ترین و محبوب ترین کتابخانه جاوا اسکریپت برای ایجاد رابط کاربری (UI) است که با استفاده از روش جدیدی برای ارائه وب سایت ها، پاسخ بسیار خوبی به ورودی کاربر می دهد.

اجزای این ابزار توسط تیم توسعه دهنده فیس بوک ساخته شده اند. ری اکت در سال ۲۰۱۳ به عنوان ابزار متن باز جاوا اسکریپت راه اندازی شد و در حال حاضر از رقبای اصلی خود یعنی Angular و Bootstrap که هر دو کتابخانه های پر فروش جاوا در زمان خودشان بوده اند، پیشی گرفته است.

جاوا اسکریپت چیست؟ (کاربردها و تفاوت با جاوا)

در این مطلب ما قصد داریم به طور کامل توضیح بدهیم که ری اکت چیست و چطور به شما به عنوان یک توسعه دهنده کمک می کند؟

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

ری اکت توسط صدها صدها شرکت بزرگ در سراسر جهان از جمله ایر بی ان بی (Airbnb)، نتفلیکس (Netflix)، ای بی (eBay)، واتساپ (WhatsApp)، فیس بوک (Facebook)، امریکن اکسپرس (American Express) و اینستاگرام (Instagram) مورد استفاده قرار گرفته است. همین مساله ثابت می کند ری اکت نسبت به رقبایش مزایایی دارد که آن را به یک کتابخانه بی رقیب تبدیل کرده است.

برخی از دلایل استفاده از ری اکت شامل موارد زیر می شوند:

۱- سهولت در استفاده

ری اکت یک کتابخانه GUI متن باز جاوا اسکریپت است که روی یک هدف خاص یعنی تکمیل وظایف رابط کاربری (UI) به طور کارآمد تمرکز دارد. ری اکت را می توان در الگوی طراحی MVC ( مخفف Model-View-Controller) در دسته View طبقه بندی کرد.

درک و فهم اصول ری اکت برای شما به عنوان یک توسعه دهنده کار آسانیست. حتی در عرض چند روز می توانید با استفاده از ری اکت توسعه برنامه های مبتنی بر وب را شروع کنید. برای اینکه بیشتر با ری اکت آشنا شوید می توانید از آموزش های مربوط به آن نیز استفاده کنید.

۲- پشتیبانی از قابلیت استفاده مجدد از کامپوننت ها

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

۳- قابلیت نوشتن راحت تر کامپوننت

نوشتن کامپوننت یا اجزای ری اکت نسبت به رقبایش آسان تر است چون از پسوند اختیاری JSX برای جاوا اسکریپت استفاده می کند که به شما امکان می دهد HTML را با جاوا اسکریپت ترکیب کنید.

JSX ترکیبی عالی از جاوا اسکریپت و HTML است و کل روند نوشتن ساختار وب سایت را واضح می کند. علاوه بر این، این پسوند ارائه چندین عملکرد دیگر را هم بسیار آسانتر می کند. با اینکه ممکن است JSX محبوب ترین پسوند نباشد؛ اما ثابت شده در توسعه اجزای خاص یا برنامه های با حجم بالا کارآمد است.

۴- عملکرد بهتر با Virtual DOM

React روند DOM (نشان دهنده رابط کاربری وب سایت) را به طور کارآمدی به روز می کند. همانطور که می دانید این روند ممکن است باعث توقف خیلی از اپلیکیشن های تحت وب شود. خوشبختانه ری اکت از Virtual DOM استفاده می کند و بنابراین جلوی چنین مشکلی را می گیرد.

این ابزار به شما امکان می دهد Virtual DOM بسازید و از آنها در حافظه میزبانی می کند. در نتیجه هر بار که تغییری در DOM واقعی ایجاد می شود، Virtual DOM نیز بلافاصله تغییر می کند. این سیستم به طور مداوم مانع از بروزرسانی دائمی DOM می شود؛ در نتیجه سرعت برنامه شما قطع نمی شود.

۵- ارتباط خوب با سئو (SEO)

ری اکت به شما امکان می دهد تا رابط کاربری ایجاد کنید که در موتورهای جستجوی مختلف قابل دسترسی است. این ویژگی یکی از مزیت های بزرگ ری اکت به شمار می رود، چون همه فریم ورک یا چارچوب های جاوا اسکریپت مناسب سئو نیستند.

علاوه بر این، از آنجایی که ری اکت روند برنامه شما را تسریع می کند می تواند نتایج سئو را هم به نفع شما تغییر بدهد. از این گذشته، سرعت وب شما نقش بسزایی در بهینه سازی سئو دارد.

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

ری اکت چگونه کار می کند؟

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

1. React.createElement(“div”, { className: “red” }, “Children Text”);
2. React.createElement(MyCounter, { count: 3 + 5 });

همانطور که احتمالا می‌دانید، سینتکس جاوا در کد HTML بالا بسیار شبیه به اجزای XML است؛ اما ری اکت بجای استفاده از کلاس سنتی DOM، از نام‌کلاس استفاده می‌کند.

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

بعلاوه، مقادیر و اصطلاحات عددی باید در داخل آکولاد نوشته شود.

مثال بالا، سینتکس موجود در ری اکت را به خوبی نشان می‌دهد، چراکه این ابزار از پسوند JSX استفاده کرده‌است. در واقع، این ترکیبی از HTML و جاوا اسکریپت است.

در اینجا با استفاده از JSX مثال دیگری از ری اکت نوشته ‌شده است:

1. Children Text

   ;

2. ;

3. var GameScores = {player1: 2,player2: 5};

5. Scores

6. ;

برای تجزیه و شکستن آن، در اینجا چند نکته در مورد برچسب HTML بالا آورده شده است:

*  نمایانگر تناقضی به نام «شمارش» است که عبارت عددی را به عنوان مقدار آن نشان می‌دهد.

* GameScores یک موضوع تحت‌اللفظی است که دارای دو جفت ارزش-خاصیتی است.

* بلوک و توده‌ای از XML است که در صفحه ارائه می‌شود.

* scores={GameScores}: ویژگی امتیازها از موضوع GameScores مقداری ارزش دریافت می‌کند که قبلاً تعریف شده بود.

به جای جاوا اسکریپت استاندارد (JS)، بیشتر قسمت های ری اکت با استفاده از JSX (JavaScript XML) نوشته شده است. با این حال، باید توجه داشته باشید که تنها هدف از این کار ایجاد سهولت در ساخت اجزای ری اکت است.

شما می توانید اجزای ری اکت را با جاوا اسکریپت استاندارد درست کنید، اما بدون شک نتیجه این کار آشفته و بی نظم خواهد بود.

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

این مفاهیم و روش کار به زبان ساده رو بلد باش!

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

۱. پیش‌نیازها

قبل از شروع کار با React، باید با مفاهیم زیر آشنا باشید:

• HTML و CSS: برای ساخت ساختار و استایل‌دهی به صفحات وب.

• 

  طراحی رابط کاربری UI UX رو قورت بده! بدون کلاس، سرعت 2 برابر، ماندگاری 3 برابر، پولسازی عالی با طراحی جذاب اپلیکیشن، نرم افزار وبسایت... دانلود:

  جاوااسکریپت (ES6+): آشنایی با مفاهیمی مانند توابع arrow، کلاس‌ها، ماژول‌ها و ... .

• Node.js و npm: برای نصب و مدیریت پکیج‌ها.

۲. نصب React

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

مراحل نصب:

1. نصب Node.js: اگر Node.js را نصب ندارید، از وب‌سایت رسمی Node.js آن را دانلود و نصب کنید.

2. ایجاد پروژه جدید:

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

     npx create-react-app my-app

   • این دستور یک پروژه جدید با نام my-app ایجاد می‌کند.

3. اجرای پروژه:

   • به پوشه پروژه بروید:

     cd my-app

   • سپس پروژه را اجرا کنید:

     npm start

   • اگر همه چیز درست باشد، پروژه در مرورگر شما باز می‌شود (معمولاً در آدرس http://localhost:3000).

۳. ساختار یک پروژه React

پس از ایجاد پروژه، ساختار فایل‌ها به صورت زیر خواهد بود:

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

• public/index.html: فایل HTML اصلی که React به آن متصل می‌شود.

• src/index.js: نقطه ورودی برنامه که کامپوننت اصلی (App) را به DOM متصل می‌کند.

• src/App.js: کامپوننت اصلی که می‌توانید آن را ویرایش کنید.

۴. مفاهیم اصلی React

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

کامپوننت‌ها بلوک‌های سازنده رابط کاربری در React هستند. هر کامپوننت می‌تواند یک بخش از UI را مدیریت کند.

• کامپوننت تابعی (Functional Component):

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

• کامپوننت کلاسی (Class Component):

  class Welcome extends React.Component {
    render() {
      return <h1>Hello, {this.props.name}</h1>;
    }
  }

۲. JSX

JSX یک syntax شبیه به HTML است که در React استفاده می‌شود. این syntax به شما امکان می‌دهد HTML و جاوااسکریپت را با هم ترکیب کنید. مثال:

• const element = <h1>Hello, world!</h1>;

۳. Props (ویژگی‌ها)

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

• function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
  }
  
  function App() {
    return (
      <div>
        <Welcome name="Alice" />
        <Welcome name="Bob" />
      </div>
    );
  }

۴. State (حالت)

State داده‌هایی هستند که داخل یک کامپوننت مدیریت می‌شوند و می‌توانند در طول زمان تغییر کنند. مثال (با استفاده از هوک‌ها):

• import React, { useState } from 'react';
  
  function Counter() {
    const [count, setCount] = useState(0);
  
    return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>
          Click me
        </button>
      </div>
    );
  }

۵. هوک‌ها (Hooks)

هوک‌ها توابعی هستند که به شما امکان می‌دهند از state و سایر ویژگی‌های React در کامپوننت‌های تابعی استفاده کنید.

• useState: برای مدیریت state.

• useEffect: برای اجرای کدهای جانبی (مانند دریافت داده از API).

۵. کار با API در React

برای دریافت داده از یک API، می‌توانید از fetch یا کتابخانه‌هایی مانند axios استفاده کنید. مثال با fetch:

• import React, { useEffect, useState } from 'react';
  
  function App() {
    const [data, setData] = useState([]);
  
    useEffect(() => {
      fetch('https://jsonplaceholder.typicode.com/posts')
        .then(response => response.json())
        .then(data => setData(data));
    }, []);
  
    return (
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    );
  }

۶. مدیریت رویدادها (Event Handling)

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

• function Button() {
    function handleClick() {
      alert('Button clicked!');
    }
  
    return (
      <button onClick={handleClick}>
        Click me
      </button>
    );
  }

۷. مسیریابی (Routing)

برای ایجاد مسیریابی در React، می‌توانید از کتابخانه React Router استفاده کنید. نصب:

• npm install react-router-dom

مثال:

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/about" component={About} />
        <Route path="/" component={Home} />
      </Switch>
    </Router>
  );
}

انتشار پروژه

برای انتشار پروژه React، می‌توانید از دستور زیر استفاده کنید:

npm run build

این دستور یک پوشه build ایجاد می‌کند که شامل فایل‌های بهینه‌شده برای انتشار است.

آموزش های کاربردی برنامه نویسی جاوا اسکریپت

جمع بندی

امیدواریم که مطلب امروز ما توانسته باشد درک درستی از ری اکت و نحوه کار آن به شما بدهد. برای جمع بندی موارد گفته شده چند نکته مهم را دوباره خاطر نشان می کنیم:

۱- ری اکت در ابتدا توسط فیس بوک معرفی شد.

۲- بسیاری از برندها و شرکت های بزرگ در سراسر جهان از ری اکت استفاده می کنند.

۳- ری اکت به عنوان یک کتابخانه متن باز جاوا اسکریپت عمل می کند؛ اما می توان آن را یک فریم ورک یا چارچوب هم در نظر گرفت.

۴- این چارچوب نمی تواند به تنهایی کار کند؛ بنابراین شما به عناصر اضافی هم برای اهداف مختلفی مانند مسیریابی، مدیریت و غیره نیاز خواهید داشت.

۵- ری اکت از DOM مجازی برای بهینه سازی بهتر صفحه شما استفاده می کند.

۶- استفاده از ری اکت آسان و متناسب با سئو است.

۷- ری اکت از قابلیت استفاده مجدد از کامپوننت پشتیبانی می کند.

۸- ری اکت از پسوند JSX استفاده می کند که اساساً ترکیبی عالی از HTML و جاوا اسکریپت است.

۹- ری اکت از JSX فقط برای سهولت در نوشتن استفاده می کند نه به این دلیل که عملکرد بهتری داشته باشد.

آموزش صفر تا صد برنامه نویسی جاوا اسکریپت (فیلم فارسی+ جزوه pdf)