تمرین ری‌اکت برای مبتدیان: ساخت و ویرایش کامپوننت‌های پایه - آخرین آپدیت

سرفصل ها و درس ها

مقدمه Introduction

• چرا تمرین ساخت و ویرایش کامپوننت‌های پایه در ری‌اکت مهم است؟ Why practice building and modifying basic components in React?

• پیش‌نیازهای لازم What you should know

• تور محیط CoderPad CoderPad tour

1. درک ری‌اکت و JSX 1. Understanding React and JSX

• رندر کردن عناصر رابط کاربری با JSX Rendering UI elements with JSX

• راهکار: ساخت HelloComponent Solution: Create a HelloComponent

• کار با ری‌اکت Working with React

2. استفاده از کامپوننت‌ها و پراپ‌ها 2. Using Components and Props

• تعریف کامپوننت‌های تابعی Defining functional components

• راهکار: ساخت کارت کاربر Solution: Build a user card

• انتقال داده‌ها از طریق پراپ‌ها Passing data via props

3. مدیریت وضعیت با هوک‌ها (useState) 3. Managing State with Hooks (useState)

• مدیریت وضعیت کامپوننت با useState Managing a component state with useState

• راهکار: ساخت یک شمارنده Solution: Create a counter

4. مدیریت فرم‌ها و ورودی‌های کاربر 4. Handling Forms and User Input

• راهکار: ساخت فرم تماس Solution: Make a contact form

• اتصال ورودی‌های فرم به وضعیت (State) Connecting form inputs to state

• ارسال یک فرم ساده Submitting a simple form

5. افزودن مدیریت رویدادهای پایه 5. Adding Basic Event Handling

• راهکار: ساخت متن تغییرپذیر (Toggle Text) Solution: Create a toggle text

• استفاده از هندلرهای رویداد در کامپوننت‌های تابعی Using event handlers in functional components

6. رندر کردن لیست‌ها 6. Rendering Lists

• استفاده از map برای رندر آرایه‌های داده Using map to render arrays of data

• راهکار: نمایش لیستی از آیتم‌ها Solution: Display a list of items

7. کار با Styled Components 7. Working with Styled Components

• کار با Styled Components Working with styled components

• راهکار: تبدیل یک دکمه ساده به StyledButton Solution: Convert a basic button into a StyledButton

• تبدیل یک عنصر JSX ساده به یک کامپوننت استایل‌دهی شده Converting a plain JSX element into a styled component

جمع‌بندی Conclusion

• یادگیری بیشتر درباره ری‌اکت Learning more about React