خانه (Home)

این صفحه خانه (Home) آموزش React در UnderDevelops است. اینجا با آموزش ری اکت آشنا می شوی. React یک کتابخانه (Library) جاوااسکریپتی برای ساخت رابط کاربری است. مثل وقتی در بازی، منو و دکمه ها را می چینی.

آشنایی سریع با آموزش ری اکت

React برای ساخت رابط کاربری صفحه تکی استفاده می شود. صفحه تکی (Single Page Application) یعنی صفحه اصلی عوض نمی شود. فقط بخش های داخل صفحه تغییر می کنند. مثل وقتی در بازی، نقشه ثابت است اما پنجره ها عوض می شوند.

در React همه چیز دور کامپوننت (Component) می چرخد. کامپوننت یعنی تکه قابل استفاده مجدد رابط کاربری. مثلا یک دکمه، کارت خبر، یا فرم لاگین.

مثال Hello World در React

حالا یک مثال خیلی ساده می بینیم. این مثال یک کامپوننت Hello می سازد. بعد کامپوننت را روی صفحه نمایش می دهد. شبیه نوشتن جمله خوش آمد در تخته کلاس است.

import { createRoot } from 'react-dom/client';

function Hello() {
  return (
    <h1>Hello World!</h1>
  );
}

createRoot(
  document.getElementById('root')
).render(
  <Hello />
);

مشاهده در ادیتور

در این کد، تابع Hello یک کامپوننت است. داخل آن یک تگ h1 برمی گردد. createRoot ریشه برنامه React را می سازد. سپس متد render کامپوننت Hello را داخل المان با شناسه root نمایش می دهد.

تمرین ها و کوییز React

تقریبا هر فصل این آموزش با یک تمرین تمام می شود. تمرین به تو کمک می کند سطح فهم خودت را محک بزنی. در پایان هم یک کوییز React داری. کوییز مثل آزمون کوتاه مدرسه است.

برای تمرین می توانی به بخش React Exercises در W3Schools سر بزنی. همچنین کوییز React در بخش پرسش ها در دسترس است.

پیگیری پیشرفت در W3Schools

در منبع اصلی قابلیتی به نام My Learning وجود دارد. با ساخت حساب کاربری می توانی درس های تمام شده را ببینی. همچنین می توانی هدف روزانه برای خودت تنظیم کنی. ایجاد حساب رایگان است.

نکته: اگر دوست داشتی می توانی از طریق صفحه عضویت W3Schools ثبت نام کنی. اگر حوصله ثبت نام نداری، اشکالی ندارد و می توانی همین جا آموزش ها را دنبال کنی.

چه چیزهایی را باید قبل از React بلد باشی؟

قبل از شروع React بهتر است چند چیز را بلد باشی. اول HTML برای ساخت اسکلت صفحه. بعد CSS برای رنگ و چیدمان. و در نهایت JavaScript برای منطق و رفتار صفحه.

اگر در این بخش ها ضعف داری، اول آن ها را مرور کن. بعد به سراغ آموزش ری اکت در بخش مقدمه برو. سپس می توانی کار با JSX در React را ادامه بدهی.

جمع بندی سریع

• React کتابخانه ای برای ساخت رابط کاربری است.
• در آموزش ری اکت با کامپوننت های کوچک کار می کنی.
• مثال Hello World اولین قدم ساده تو است.
• تمرین ها و کوییزها سطح دانشت را محک می زنند.
• قبل از React، HTML، CSS و JavaScript را تقویت کن.