ریکت چیست؟ | بررسی فریمورک React JS به زبان ساده

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

ریکت چیست؟

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

فیلم آموزش مقدماتی کتابخانه ReactJS در جاوا اسکریپت در فرادرس

کلیک کنید

پیش از شروع به کار با ریکت باید برخی موارد مهم را روی سیستم خود نصب کنیم. ابتدا باید Node.js را روی سیستم خود نصب داشته باشیم. برای دانلود آن به این نشانی (+) بروید. توجه کنید که باید فایل دانلودی را بسته به سیستم عامل خود انتخاب کنید.

پس از نصب Node باید یک پکیج به نام create-react-app روی سیستم خود نصب کنید که کد قالبی مورد نیاز برای اپلیکیشن ریکت را در اختیار شما قرار می‌دهد. ما این کد قالبی را طوری ویرایش می‌کنیم که خروجی مطلوب را برای اپلیکیشن خود به دست آوریم. برای نصب پکیج create-react-app از دستور زیر استفاده می‌کنیم:

npm install -g create-react-app

پس از نصب پکیج create-react-app باید یک پروژه ریکت با استفاده از دستورهای زیر ایجاد کنیم:

create-react-app my-app

cd my-app/
npm start

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

اینک نگاهی به فایل‌هایی که ایجاد شده‌اند می‌اندازیم. فایل‌های موجود باید به صورت زیر باشند:

my-app/
  README.md
  node_modules/
  package.json
  .gitignore
  public/
    favicon.ico
    index.html
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

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

مهم‌ترین مؤلفه هر اپلیکیشن ریکت، کامپوننت‌ها هستند. کامپوننت‌ها مواردی هستند که در یک اپلیکیشن ریکت نمایش می‌یابند. دو نوع کامپوننت در ریکت مورد استفاده قرار می‌گیرند که در ادامه آن‌ها را شرح می دهیم.

• کامپوننت تابعی (Functional) یا کامپوننت بی‌حالت (Stateless) – کامپوننت تابعی به کامپوننتی گفته می‌شود که شامل یک تابع ساده جاوا اسکریپت است و props را به عنوان آرگومان گرفته و یک عنصر React را بازگشت می‌دهد. منظور از عنصر ریکت، یک HTML ساده است که در چارچوب ریکت آن را JSX می‌نامیم. این نوع از کامپوننت‌ها به نام کامپوننت‌های بی‌حالت نیز شناخته می‌شوند، زیرا امکان تغییر دادن حالت متغیر مورد استفاده در کامپوننت تابعی وجود ندارد. به بیان ساده شما نمی‌توانید با اپلیکیشن تعامل پیدا کنید.
• کامپوننت کلاسی یا کامپوننت باحالت (Stateful) – کامپوننت کلاسی یک روش با امکانات بیشتر برای تعریف یک کامپوننت ریکت محسوب می‌شود. کامپوننت کلاسی در واقع به عنوان یک کامپوننت تابعی عمل می‌کند که props را می‌گیرد و می‌تواند حالت متغیرها را نیز کنترل کرده و یک کامپوننت باحالت بسازد. کامپوننت‌های کلاسی یک تابع رندر در درون خود دارند که یک عنصر React را مشابه کامپوننت تابعی بازگشت می‌دهد. در صورت استفاده از کامپوننت کلاسی، می‌توانیم با اپلیکیشن تعامل پیدا کنیم.

بررسی یک مثال عملی

در ادامه با ساخت یک اپلیکیشن ساده به نام Hello-World با طرز این کامپوننت‌ها بیشتر آشنا می‌شویم. ابتدا یک پوشه به نام components درون پوشه src ایجاد می‌کنیم و سپس دو فایل درون این پوشه components می‌سازیم که Functional.js و Class.js نام دارند.

فیلم آموزش پروژه محور ری اکت جی اس – ساخت To-Do List حرفه ای با React.js در فرادرس

کلیک کنید

محتوای فایل Functional.js به صورت زیر است:

1import React from 'react'
2function Functional() {
3return (
4  <div>
5    <h1>Hello World</h1>
6  </div>
7 )
8}
9export default Functional

محتوای فایل Class.js نیز چنین است:

1import React, { Component } from 'react'
2class Class extends Component {
3render() {
4  return (
5    <div>
6      <h1>Hello World</h1>
7    </div>
8    )
9  }
10}
11export default Class

برای نمایش کامپوننت‌ها در اپلیکیشن باید فایل App.js را نیز ویرایش کنیم. محتوای فایل App.js پس از ویرایش به صورت زیر درمی‌آید:

1import React from 'react';
2import logo from './logo.svg';
3import './App.css';
4import Functional from './components/Functional';
5import Class from './components/Class';
6function App() {
7  return (
8    <div className="App">
9      <Functional />
10      <Class />
11    </div>
12  );
13}
14export default App;

پس از این تغییرها، وب‌اپلیکیشن ما به صورت زیر درمی‌آید:

عبارت نخست Hello World از سوی یک کامپوننت تابعی و عبارت دوم از سوی کامپوننت کلاسی تولید شده است. ما می‌توانیم از کامپوننت‌های تابعی و کلاسی که در فایل App.js ایمپورت شده‌اند، به هر روشی که دوست داریم، استفاده مجدد بکنیم. به این ترتیب با یکی از مهم‌ترین مشخصه‌های ریکت که قابلیت استفاده مجدد از کامپوننت‌ها است آشنا می‌شویم. برای مثال اگر بخواهیم چند عبارت Hello World داشته باشیم، می‌توانیم تگ‌های <Functional /> یا <Class /> را به هر تعداد که دوست داریم به فایل خود اضافه کنیم.

Props یعنی چه؟

Props یک کلیدواژه خاص است که ریکت برای ارسال داده‌ها از یک کامپوننت به کامپوننت دیگر مورد استفاده قرار می‌دهد. این مفهوم را نیز با معرفی یک مثال از کاربرد Props در کامپوننت‌ها بیشتر بررسی می‌کنیم. به این منظور باید تغییراتی در فایل‌های App.js ،Class.js و Functional.js به صورت زیر ایجاد کنیم:

فایل Functional.js

1import React from 'react'
2function Functional(props) {
3  return (
4    <div>
5      <h1>Hello {props.name}</h1>
6    </div>
7  )
8}
9export default Functional

فایل Class.js

1import React, { Component } from 'react'
2class Class extends Component {
3  render() {
4    return (
5      <div>
6        <h1>Hello {this.props.name}</h1>
7      </div>
8    )
9  }
10}
11export default Class

فایل App.js

1import React from 'react';
2import logo from './logo.svg';
3import './App.css';
4import Functional from './components/Functional';
5import Class from './components/Class';
6function App() {
7  return (
8    <div className="App">
9      <Functional name="Sam"/>
10      <Class name="Mary"/>
11    </div>
12  );
13}
14export default App;

در فایل App.js فوق می‌بینید که تگ <Functional /> یک prop به نام name دارد که مقدار آن Sam است و تگ <Class /> نیز یک prop دیگر به نام name دارد که شامل مقداری به صورت Mary است.

در فایل‌های Functional.js و Class.js نیز می‌بینیم که name هاردکد نشده است، اما با استفاده از کلیدواژه prop در ریکت فراخوانی می‌شود. در اینجا prop به نام name از کامپوننت App به کامپوننت‌های تابعی و کلاسی ارسال می‌شود که در پوشه components قرار دارند. همچنین توجه کنید که کامپوننت کلاسی از کلیدواژه this برای فراخوانی props استفاده می‌کند.

منظور از حالت (State) و متد چیست؟

ریکت یک شیء داخلی به نام state دارد. این شیء جایی است که مقادیر مشخصه‌های مورد استفاده در کامپوننت در آنجا ذخیره می‌شوند. هر زمان که شیء state تغییر یابد، کامپوننت مجدداً رندر می‌شود. تغییر state از سوی متدها (methods) و یک تابع به نام ()this.setState مدیریت می‌شود.

فیلم آموزش کتابخانه Redux در جاوا اسکریپت JS برای مدیریت وضعیت برنامه ها در فرادرس

کلیک کنید

در ادامه با ایجاد یک کامپوننت رکت مفهوم اشیای «حالت» (state) ‌و متدها را بررسی می‌کنیم. در این بخش یک کامپوننت ریکت ایجاد می‌کنیم که یک دکمه (button) دارد و تعداد دفعاتی که روی این دکمه کلیک می‌شود را رندر خواهد کرد. به این منظور یک فایل دیگر در پوشه components به نام Counter.js ایجاد می‌کنیم. همچنین باید اشاره کنیم که کامپوننت Counter.js باید یک کامپوننت کلاسی باشد، ‌زیرا از شیء state در آن استفاده می‌کنیم. محتوای این فایل به صورت زیر است:

1import React, { Component } from 'react'
2export class Counter extends Component {
3  constructor(props) {
4    super(props)
5    this.state = {
6      counter: 0
7    }
8  }
9  handleClick = (event) => {
10    let state_counter = this.state.counter
11    state_counter = state_counter + 1
12    this.setState({
13      counter: state_counter
14    })
15  }
16  render() {
17    return (
18      <div>
19        <p>{this.state.counter}</p>
20        <button onClick={this.handleClick}>Click Me!</button>
21      </div>
22    )
23  }
24}
25export default Counter

محتوای فایل App.js نیز به صورت زیر است:

1import React from 'react';
2import logo from './logo.svg';
3import './App.css';
4import Functional from './components/Functional';
5import Class from './components/Class';
6import Counter from './components/Counter';
7function App() {
8  return (
9    <div className="App">
10      <Functional name="Sam"/>
11      <Class name="Mary"/>
12      <Counter />
13    </div>
14  );
15}
16export default App;

در فایل Counter.js می‌بینیم که یک «سازنده» (constructor) اعلان شده است که در آن یک حالت «اولیه» (initial) از شمارنده به صورت 0 تعریف شده است. این دکمه در رویداد onClick که یک تابع به نام handleClick تعریف کرده است، ارسال می‌شود. این امر نشان می‌دهد که وقتی دکمه کلیک شود، تابع handleClick فراخوانی و هر چیزی که در تابع مشخص شده باشد، اجرا می‌شود. همچنین توجه کنید که تابع با کلیدواژه this مرتبط است و ضمناً یک تابع arrow است. اگر می‌خواهید یک تابع را به صورت تابع arrow اعلان کنید، باید فراخوانی تابع را در سازنده به تعریف تابع اتصال دهید.