راهنمای جامع برای توسعه دهندگان وب
React یک کتابخانه جاوا اسکریپت برای ساخت رابط کاربری (UI) است که توسط فیسبوک توسعه داده شده است. React بر پایه کامپوننت ها ساخته شده است، که قطعات قابل استفاده مجدد کد هستند که UI را تشکیل می دهند. یادگیری React به شما این امکان را می دهد که وب سایت ها و برنامه های وب تعاملی، سریع و کارآمد بسازید. همچنین، React یکی از محبوب ترین کتابخانه های فرانت اند است و یادگیری آن می تواند فرصت های شغلی زیادی را برای شما فراهم کند.
React به دلیل استفاده از Virtual DOM، سرعت و کارایی بالایی دارد. Virtual DOM یک کپی از DOM واقعی است که React تغییرات را ابتدا در آن اعمال می کند و سپس فقط تغییرات لازم را به DOM واقعی منتقل می کند. این کار باعث می شود که UI به روز رسانی بسیار سریع تر انجام شود.
برای شروع یادگیری React، شما باید با مفاهیم زیر آشنا باشید:
React بر پایه مفاهیم زیر استوار است:
برای شروع کار با React، شما باید محیط توسعه خود را راه اندازی کنید. بهترین راه برای این کار استفاده از Create React App است. Create React App یک ابزار خط فرمان است که یک پروژه React جدید را با تمام تنظیمات لازم به صورت خودکار ایجاد می کند.
npx create-react-app my-appcd my-appnpm startپس از اجرای دستور `npm start`، مرورگر شما به صورت خودکار باز می شود و شما صفحه پیش فرض React را مشاهده خواهید کرد.
در React، همه چیز یک کامپوننت است. یک کامپوننت می تواند یک دکمه، یک فرم، یک صفحه کامل و یا هر چیز دیگری باشد. برای ساخت یک کامپوننت، شما باید یک تابع جاوا اسکریپت ایجاد کنید که یک JSX را برگرداند.
به عنوان مثال، کامپوننت زیر یک پیام خوش آمد گویی را نمایش می دهد:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
در این مثال، `Welcome` یک کامپوننت تابعی است که یک prop به نام `name` را دریافت می کند و یک تگ `h1` را با پیام خوش آمد گویی برمی گرداند.
برای استفاده از این کامپوننت، شما می توانید آن را در JSX خود رندر کنید:
<Welcome name="Sara" />
این کد باعث می شود که پیام "Hello, Sara" در صفحه نمایش داده شود.
State یک شی جاوا اسکریپت است که اطلاعات داخلی یک کامپوننت را نگه می دارد. State می تواند تغییر کند و زمانی که State تغییر می کند، کامپوننت مجدداً رندر می شود.
برای مدیریت State در کامپوننت های تابعی، شما می توانید از Hook `useState` استفاده کنید. Hook `useState` یک آرایه را برمی گرداند که شامل State فعلی و یک تابع برای به روز رسانی State است.
به عنوان مثال، کامپوننت زیر یک شمارنده را نمایش می دهد که با کلیک بر روی یک دکمه افزایش می یابد:
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
در این مثال، `count` State فعلی است و `setCount` تابعی است که برای به روز رسانی State استفاده می شود. هنگامی که دکمه کلیک می شود، تابع `setCount` فراخوانی می شود و State به روز رسانی می شود. این باعث می شود که کامپوننت مجدداً رندر شود و مقدار جدید `count` نمایش داده شود.
Props اطلاعاتی هستند که از کامپوننت پدر به کامپوننت فرزند منتقل می شوند. Props نمی توانند توسط کامپوننت فرزند تغییر کنند.
در مثال `Welcome` که قبلاً دیدیم، `name` یک prop بود. کامپوننت پدر `Welcome` را با prop `name="Sara"` رندر کرد. کامپوننت `Welcome` از این prop برای نمایش پیام خوش آمد گویی استفاده کرد.
React به شما این امکان را می دهد که به راحتی با API ها ارتباط برقرار کنید و داده ها را از سرور دریافت و نمایش دهید. برای این کار، شما می توانید از متدهای `fetch` یا کتابخانه هایی مانند `axios` استفاده کنید.
به عنوان مثال، کد زیر داده ها را از یک API دریافت می کند و آنها را در یک لیست نمایش می دهد:
import React, { useState, useEffect } from 'react';
function PostList() {
const [posts, setPosts] = useState([]);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(data => setPosts(data));
}, []);
return (
<ul>
{posts.map(post => (
<li key={post.id}>{post.title}</li>
))}
</ul>
);
}
در این مثال، `useEffect` Hook برای فراخوانی API در هنگام بارگذاری کامپوننت استفاده می شود. `fetch` برای دریافت داده ها از API استفاده می شود. `setPosts` برای به روز رسانی State با داده های دریافتی استفاده می شود. سپس، `map` برای تکرار بر روی داده ها و نمایش آنها در یک لیست استفاده می شود.