در این دوره جامع و به‌روز، شما با اصول کلیدی و فنون حرفه‌ای کتابخانه React آشنا خواهید شد. این دوره که توسط لینکدین اویلِرنینگ تهیه شده است، مناسب توسعه‌دهندگان فرانت‌اند، مهندسان وب و هر کسی است که می‌خواهد مهارت‌های خود را در ساخت رابط‌های کاربری پویا تقویت کند. در طول تقریباً ۵ ساعت آموزش ویدئویی، مباحث از پایه تا پیشرفته پوشش داده شده و مثال‌های عملی به شما کمک می‌کنند تا آموخته‌ها را در پروژه‌های واقعی پیاده‌سازی کنید.

• ساختار و فلسفه JSX و تفاوت آن با HTML معمولی.
• ایجاد و مدیریت کامپوننتهای تابعی و کلاس‌محور.
• کار با Hooks اصلی مانند useState، useEffect و useContext.
• فراخوانی APIها و مدیریت داده با استفاده از fetch و کتابخانه‌های جانبی.
• مسیردهی در برنامه‌های یک‌صفحه‌ای با React Router.
• بهینه‌سازی کارایی با memoization و lazy loading.
• آشنایی با مدیریت وضعیت پیشرفته با Context API و معرفی کلی REDUX.
• استفاده از ابزارهای توسعه مانند React DevTools و نکات دیباگینگ.

• قابلیت ساخت برنامه‌های مقیاس‌پذیر و نگهداری‌پذیر.
• افزایش چشمگیر سرعت توسعه با استفاده از کامپوننت‌های قابل استفاده مجدد.
• درک عمیق از چرخه حیات کامپوننت‌ها و بهبود کارایی اپلیکیشن.
• توانایی همگام‌سازی با جدیدترین ورژن‌های React و رویکردهای مدرن.
• افزایش قابلیت رقابت در بازار کار و دریافت پروژه‌های بزرگ‌تر.
• کسب گواهینامه پایان دوره از لینکدین (LinkedIn Learning Certificate).

• آشنایی مقدماتی با HTML و CSS.
• تسلط نسبی بر JavaScript ES6+ (مانند arrow functions، destructuring).
• آشنایی ساده با محیط خط فرمان و نصب بسته‌های npm.
• داشتن یک ویرایشگر متن مانند VSCode یا WebStorm.

• مقدمه و راه‌اندازی محیط
  • نصب Node.js و npm
  • ایجاد پروژه با Create React App
  • ساختار پوشه‌ها و فایل‌ها
• JSX و کامپوننت‌ها
  • نحوه نوشتن JSX
  • کامپوننت‌های تابعی vs کلاس‌محور
  • propها و state ساده
• Hooks در React
  • useState برای مدیریت state محلی
  • useEffect برای عملیات جانبی
  • useContext برای به‌اشتراک‌گذاری داده
• مسیر‌دهی و ناوبری
  • نصب و پیکربندی React Router
  • مسیردهی پویا و پارامترها
  • مسیرهای محافظت‌شده (Protected Routes)
• مدیریت درخواست‌های HTTP
  • فچ داده با fetch و axios
  • نمایش لودینگ و مدیریت خطا
  • نکات بهینه‌سازی درخواست‌ها
• بهینه‌سازی و نکات پیشرفته
  • React.memo و useMemo
  • کد اسپلیتینگ (Code Splitting)
  • استفاده از Suspense و Lazy
• آشنایی با REDUX (مقدمه)
  • مفاهیم Store، Action و Reducer
  • اتصال کامپوننت‌ها با connect
  • معرفی Toolkit برای کاهش پیچیدگی

در بخش مثال‌های عملی، چند پروژه کوچک اما کاربردی را با هم پیاده‌سازی می‌کنیم:

• ToDo App ساده: مدیریت لیست وظایف با ایجاد، ویرایش و حذف آیتم‌ها.
• Weather Dashboard: دریافت وضعیت آب و هوا از یک API و نمایش اطلاعات به صورت نموداری.
• محصولات فروشگاهی: لیست‌سازی محصولات با قابلیت فیلتر و مرتب‌سازی.

کد نمونه برای استفاده از useState و useEffect در ToDo App:

function TodoList() {
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState("");

  useEffect(() => {
    const saved = localStorage.getItem("tasks");
    if (saved) setTasks(JSON.parse(saved));
  }, []);

  useEffect(() => {
    localStorage.setItem("tasks", JSON.stringify(tasks));
  }, [tasks]);

  const addTask = () => {
    if (newTask.trim()) {
      setTasks([...tasks, { id: Date.now(), title: newTask }]);
      setNewTask("");
    }
  };

  return (
    <div>
      <input
        value={newTask}
        onChange={e => setNewTask(e.target.value)}
        placeholder="کار جدید..."
      />
      <button onClick={addTask}>افزودن</button>
      <ul>
        {tasks.map(t => <li key={t.id}>{t.title}</li>)}
      </ul>
    </div>
  );
}
  

این مثال نشان می‌دهد چگونه با localStorage و هوک‌ها می‌توانید یک اپلیکیشن ساده با قابلیت ذخیره‌سازی داده‌های کاربر بسازید.