ری اکت و روش ساخت کامپوننت ساده

ری اکت یک کتابخانه جاوا اسکریپتی است که برای ساخت رابط کاربری با استفاده از کامپوننت‌ها مورد استفاده قرار می‌گیرد. ری اکت از JSX استفاده می‌کند که یک فرمت جاوا اسکریپت ساده است و باعث می‌شود کدنویسی با ری اکت آسان‌تر باشد. ری اکت در سال 2013 توسط تیم توسعه فیسبوک ساخته شده است و برای ساخت UI های پیچیده و ماژولار مناسب است.

روش کار با ری اکت

روش کار با ری اکت به این صورت است که شما باید کامپوننت‌هایی را بسازید که هر کدام یک قسمت از رابط کاربری را تشکیل می‌دهند. سپس شما می‌توانید این کامپوننت‌ها را با هم ترکیب کنید و با استفاده از وضعیت‌ها (states) و مشخصات (props) داده‌های مورد نیاز را به آن‌ها منتقل کنید.

ری اکت با استفاده از یک مکانیزم به نام VDOM (Virtual DOM) تغییرات را در حافظه موقت ذخیره می‌کند و سپس با DOM واقعی مقایسه می‌کند و فقط قسمت‌های لازم را بروزرسانی می‌کند. برای شروع به کار با ری اکت شما می‌توانید از چندین روش استفاده کنید.

یک روش ساده این است که فایل‌های ری اکت و Babel را به صورت CDN در صفحه وب خود بارگذاری کنید. Babel یک ابزار است که کدهای جاوا اسکریپت جدید و پیشرفته را به کدهای قابل فهم برای مرورگر تبدیل می‌کند.

یک روش دیگر استفاده از create-react-app است که یک ابزار خط فرمان است که گردش کار لازم برای توسعه اپلیکیشن‌های ری اکت را برای شما فراهم می‌کند. چندین سرویس آنلاین نظیر CodeSandbox و Codepen نیز وجود دارند که به شما اجازه می‌دهند بدون نصب هرگونه چیز در سمت سرور، با ری اکت آشنا شوید.

روش ساخت کامپوننت ساده

برای ساخت یک کامپوننت ساده در ری اکت شما می‌توانید از دو روش استفاده کنید. یک روش این است که یک کلاس را از کلاس Component که در کتابخانه react وجود دارد، extend کنید و متد render را برای برگرداندن JSX مورد نظر تعریف کنید. مثلاً:

“`javascript

import React, { Component } from ‘react’;

class Hello extends Component {

render() {

return <h1>Hello, world!</h1>;

}

}

“`

روش دیگر این است که یک تابع جاوا اسکریپتی تعریف کنید که JSX مورد نظر را برگرداند. مثلاً:

“`javascript

import React from ‘react’;

function Hello() {

return <h1>Hello, world!</h1>;

}

“`

در هر دو روش شما باید کتابخانه react را import کنید و نام کامپوننت را با حروف بزرگ شروع کنید. همچنین باید کامپوننت را export کنید تا بتوانید در جای دیگر از آن استفاده کنید.

تفاوت اصلی بین روش‌های مختلف ساخت کامپوننت در ری اکت این است که کامپوننت‌های کلاسی می‌توانند state و lifecycle methods داشته باشند، در حالی که کامپوننت‌های تابعی فقط یک تابع هستند که props را دریافت می‌کنند و JSX را برمی‌گردانند. با این حال، از نسخه 16.8 ری اکت به بعد، با استفاده از Hooks می‌توان state و lifecycle methods را در کامپوننت‌های تابعی نیز به کار برد.

بنابراین، اکثر موارد می‌توان از کامپوننت‌های تابعی استفاده کرد و فقط زمانی که نیاز به استفاده از features خاصی مانند error boundaries یا context باشد، از کامپوننت‌های کلاسی استفاده کرد. منبع

ترکیب کامپوننت

برای ترکیب کامپوننت‌ها در ری اکت شما می‌توانید از یک کامپوننت به عنوان یک المنت در خروجی کامپوننت دیگر استفاده کنید. برای مثال، اگر شما دو کامپوننت به نام Welcome و App داشته باشید، می‌توانید کامپوننت Welcome را در کامپوننت App فراخوانی کنید:

“`javascript

function Welcome(props) {

return <h1>Hello, {props.name}</h1>;

}

function App() {

return (

<div>

<Welcome name=”Ali” />

<Welcome name=”Reza” />

<Welcome name=”Sara” />

</div>

);

}

“`

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

نمایش لیست کامپوننت‌ها

برای نمایش یک لیست از کامپوننت‌ها در ری اکت شما می‌توانید از متد map استفاده کنید. متد map یک آرایه را گرفته و برای هر عنصر آن یک تابع را اجرا می‌کند و خروجی را در یک آرایه جدید قرار می‌دهد. برای مثال، اگر شما یک آرایه از اشخاص را در state داشته باشید، می‌توانید با استفاده از map برای هر شخص یک کامپوننت Person را بسازید و آن را در یک المنت div قرار دهید:

“`javascript

function App() {

const [persons, setPersons] = useState([

{ name: “Ali”, age: 25 },

{ name: “Reza”, age: 30 },

{ name: “Sara”, age: 28 },

]);

return (

<div className=”App”>

<h1>Hi, I’m a React App</h1>

<div>

{persons.map((person) => {

return <Person name={person.name} age={person.age} />;

})}

</div>

</div>

);

}

“`

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