اصول اولیه React
اصول اولیه React
Blog Article
**React** یک کتابخانهٔ جاوااسکریپت است که برای ساخت رابط‌های کاربری تعاملی (UI) استفاده می‌شود. این کتابخانه توسط **فیسبوک** توسعه داده شده و از زمان معرفی آن در سال 2013، به سرعت به یکی از محبوب‌ترین ابزارها برای توسعه وب تبدیل شد. در این مقاله، به بررسی اصول اولیه React خواهیم پرداخت تا با مفاهیم اساسی این کتابخانه آشنا شویم.
### **1. React چیست؟**
React یک کتابخانهٔ **Open Source** جاوااسکریپت است که به توسعه‌دهندگان کمک می‌کند **رابط‌های کاربری** پیچیده را با استفاده از **کامپوننت‌ها (Components)** ایجاد کنند. هر کامپوننت می‌تواند بخشی از UI را تشکیل دهد و این کامپوننت‌ها به صورت مستقل و قابل استفاده مجدد طراحی می‌شوند.
### **2. نصب و راه‌اندازی React**
برای شروع کار با React، می‌توانید از دو روش زیر استفاده کنید:
- **ایجاد پروژه با استفاده از Create React App:** ابزاری که فیسبوک برای ساده‌سازی فرآیند راه‌اندازی پروژه React ارائه داده است. با استفاده از دستور زیر می‌توانید یک پروژه جدید آموزش برنامه نویسی اصفهان ایجاد کنید:
```bash
npx create-react-app my-app
cd my-app
npm start
```
- **استفاده از CDN در HTML:** اگر قصد دارید بدون تنظیمات پیچیده React را امتحان کنید، می‌توانید از CDN استفاده کنید و فایل React را به صورت مستقیم در HTML قرار دهید.
### **3. JSX چیست؟**
**JSX** مخفف JavaScript XML است. در واقع، JSX یک **پسوند ترکیبی** از HTML و جاوااسکریپت است که به شما اجازه می‌دهد تا به‌راحتی کدهای HTML را در داخل جاوااسکریپت بنویسید.
مثال یک کد JSX:
```jsx
const element = <h1>Hello, World!</h1>;
```
این کد JSX در نهایت توسط React به کدهای جاوااسکریپت استاندارد تبدیل می‌شود.
### **4. کامپوننت‌ها (Components)**
کامپوننت‌ها مهم‌ترین بخش React هستند. هر کامپوننت می‌تواند بخشی از رابط کاربری را نمایش دهد و از داده‌های ورودی (Props) برای سفارشی‌سازی رفتار خود استفاده کند. کامپوننت‌ها به دو نوع تقسیم می‌شوند:
- **کامپوننت‌های تابعی (Functional Components):** کامپوننت‌هایی که به صورت تابع تعریف می‌شوند و از **hooks** مانند `useState` و `useEffect` استفاده می‌کنند.
مثال یک کامپوننت تابعی:
```jsx
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
```
- **کامپوننت‌های کلاسی (Class Components):** کامپوننت‌هایی که به صورت کلاس تعریف می‌شوند و از متد `render` برای نمایش UI استفاده می‌کنند.
مثال یک کامپوننت کلاسی:
```jsx
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
```
### **5. Props چیست؟**
**Props** (مخفف Properties) پارامترهایی هستند که به کامپوننت‌ها ارسال می‌شوند تا داده‌ها یا تنظیمات مختلف را به آن‌ها انتقال دهند. در واقع، Props به شما امکان می‌دهد که اطلاعات را بین کامپوننت‌ها به اشتراک بگذارید.
مثال استفاده از Props:
```jsx
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Ali" />;
```
در این مثال، مقدار `name` از طریق Props به کامپوننت `Welcome` ارسال شده و در داخل آن استفاده می‌شود.
### **6. State چیست؟**
**State** در React به عنوان یک منبع ذخیره اطلاعات داخلی کامپوننت‌ها استفاده می‌شود. State برخلاف Props، قابل تغییر است و می‌تواند در پاسخ به تعاملات کاربر به‌روزرسانی شود. کامپوننت‌های تابعی می‌توانند با استفاده از Hook `useState` از State استفاده کنند.
مثال استفاده از State:
```jsx
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>
);
}
```
### **7. Hooks در React**
**Hooks** ویژگی‌هایی هستند که از نسخه 16.8 به React اضافه شده‌اند و به شما امکان استفاده از state و دیگر ویژگی‌های React را در کامپوننت‌های تابعی می‌دهند. دو Hook مهم در React عبارتند از:
- `useState`: برای تعریف state در کامپوننت‌های تابعی
- `useEffect`: برای مدیریت عملیات جانبی (مانند دریافت داده از سرور)
### **8. مدیریت رویدادها (Event Handling)**
در React، مدیریت رویدادها به شکلی مشابه HTML استاندارد است، اما تفاوت‌هایی وجود دارد. برای مثال، رویدادها در React به جای `onclick` به صورت `onClick` و با استفاده از CamelCase تعریف می‌شوند.
مثال مدیریت رویدادها:
```jsx
function handleClick() {
alert('Button clicked!');
}
function App() {
return <button onClick={handleClick}>Click me</button>;
}
```
### **9. چرخه زندگی کامپوننت‌ها (Component Lifecycle)**
کامپوننت‌های کلاسی در React دارای **چرخه زندگی** هستند که شامل سه مرحله می‌شود:
- **Mounting:** زمانی که کامپوننت به DOM اضافه می‌شود.
- **Updating:** زمانی که state یا props کامپوننت تغییر می‌کند.
- **Unmounting:** زمانی که کامپوننت از DOM حذف می‌شود.
متدهای چرخه زندگی مانند `componentDidMount`, `componentDidUpdate`, و `componentWillUnmount` به شما امکان می‌دهند تا در زمان‌های مختلف به چرخه زندگی کامپوننت واکنش نشان دهید.
### **10. رندرینگ شرطی (Conditional Rendering)**
در React می‌توانید به صورت شرطی بخش‌هایی از UI را نمایش دهید. این کار معمولاً با استفاده از عبارات شرطی مانند `if` یا `ternary operator` انجام می‌شود.
مثال رندرینگ شرطی:
```jsx
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <h1>Welcome back!</h1>;
}
return <h1>Please sign up.</h1>;
}
```
### **نتیجه‌گیری**
React یک کتابخانه قدرتمند و پرکاربرد برای ساخت رابط‌های کاربری تعاملی است. با یادگیری مفاهیم اساسی مانند کامپوننت‌ها، Props، State و Hooks، می‌توانید شروع به ساخت پروژه‌های وب با استفاده از React کنید. این کتابخانه انعطاف‌پذیر به شما اجازه می‌دهد تا به سادگی پروژه‌های کوچک و بزرگ را مدیریت کنید و تجربه کاربری بهتری برای مخاطبان خود فراهم آورید.
### **سؤالات متداول**
**1. تفاوت React با دیگر فریم‌ورک‌های جاوااسکریپت چیست؟**
React بیشتر به عنوان یک کتابخانه برای ساخت رابط‌های کاربری تمرکز دارد و برخلاف فریم‌ورک‌هایی مانند Angular، تمامی امکانات را به صورت بسته‌ای ارائه نمی‌دهد.
**2. چرا باید از JSX استفاده کنیم؟**
JSX به شما این امکان را می‌دهد تا کدهای HTML را در جاوااسکریپت بنویسید و تجربه توسعه را ساده‌تر و خواناتر کنید.
**3. آیا می‌توانیم از React بدون JSX استفاده کنیم؟**
بله، اما JSX توسعه پروژه‌های React را ساده‌تر می‌کند و معمولاً استفاده از آن توصیه می‌شود.
**4. Hooks چیست و چه زمانی از آن‌ها استفاده کنیم؟**
Hooks امکانات جدیدی را برای مدیریت state و چرخه زندگی کامپوننت‌ها در کامپوننت‌های تابعی فراهم می‌کنند و استفاده از آن‌ها بعد از نسخه 16.8 توصیه می‌شود.
**5. آیا React فقط برای وب است؟**
خیر، با استفاده از **React Native** می‌توانید برنامه‌های موبایلی نیز بسازید.