آموزش راهنمای کامل React.js (نسخه جدید 19) (Inc. Next.js 14) - آخرین آپدیت

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

شروع به کار Getting Started

• به دوره آموزشی React.js خوش آمدید Welcome to React.js course

• React چیست و چرا React را به جاوا اسکریپت ترجیح دهیم (js خالص) What is React and why to prefer React over JavaScript (pure js)

نصب نرم افزار/React، jsx، React fragments Software/React Installation, jsx, React fragments

• دانلود و نصب ویرایشگر VsCode VsCode editor download and installation

• نصب Reactjs Reactjs installation

• Folder Structure و برنامه Hello world Folder Structure and Hello world program

• معرفی jsx Intro to jsx

• ارائه چندین عنصر Rendering multiple elements

• React Fragment React Fragment

• چالش Jsx Jsx Challenge

ویژگی های Js، عبارات، وارد کردن فایل های css Js attributes, expressions, importing css files

• عبارات جاوا اسکریپت در React.js JavaScript Expressions in React.js

• چالش نمایش تاریخ و زمان Challenge of Display date and Time

• ویژگی های jsx jsx Attributes

• یک ظاهر طراحی CSS و وارد کردن فایل ها CSS styling and importing files

• اضافه کردن فونت های گوگل در پروژه Adding google fonts in project

• CSS داخلی و درون خطی Internal and inline CSS

• چالش سلام پویا Challenge of Dynamic Greeting

کامپوننت ها، لوازم، آرایه ها، نقشه آرایه و خیلی چیزهای دیگر Components, props, arrays, array maping and much more

• React Components React Components

• چالش برای تبدیل کد به اجزای جداگانه Challenge for code to separate components conversion

• واردات و صادرات در واکنش importing and exporting in react

• چالش ایجاد ماشین حساب Challenge to Create a Calculator

• Props (Netflix Series 1) Props (Netflix Series 1)

• آرایه ها (Netflix Series 2) Arrays (Netflix Series 2)

• نقشه برداری آرایه (Netflix Series 3) Array mapping (Netflix Series 3)

اگر-دیگر شرایط، اپراتور سه تایی، قلاب و شیرجه عمیق if-else condition, ternary-operator, hooks and Deep dive

• اگر-دیگر شرایط if-else Condition

• اپراتور سه تایی Ternary Operator

• از قلاب های حالت استفاده کنید useState Hooks

• با کلیک بر روی دکمه زمان را به چالش بکشید Challenge to get Time by clicking on Button

• نمایش زمان بر روی صفحه نمایش Displaying time on screen

• ReactApp را در ترمینال اجرا کنید Run ReactApp in Terminal

• مدیریت رویداد Event Handling

مقدمه ای بر Material UI Library Intro to Material UI Library

• نمادهای رابط کاربری مواد Material UI Icons

• اجزای رابط کاربری مواد Material UI Components

• افزایش و کاهش مقادیر عددی increasing and decreasing numeric values

Context Api، useEffect، React Router، نصب بوت استرپ Context Api, useEffect, React Router, Bootstrap installation

• Context-Api Context-Api

• useEffect useEffect

• روتر واکنش React Router

• نصب بوت استرپ در React App Installing Bootstrap in React App

بازی تیک تاک پا Tic-Tac-Toe Game

• شروع بازی تیک تاک پا Starting Tic-Tac-Toe Game

رسیدگی با فرم ها Handling with Forms

• نحوه استفاده از فرم ها How to use forms

• فرم ورود Login Form

• رسیدگی به حالت های ورودی پیچیده Handling Complex input states

• چالش برای ورودی های متعدد Challenge for multiple inputs

• عملگر یا سه نقطه را پخش کنید Spread operator OR three dots

• صدها خط را به کد مختصر تبدیل کنید Turn hundreds of lines to brief code

برنامه Todo-List Todo-List App

• برنامه Todo-list Todo-list Application

ایجاد یک وب سایت تک صفحه ای، ابزار توسعه دهندگان Creating a single page website, Developers tool

• یک برنامه وب ایجاد کنید Create a web application

• React Developers Tool React Developers Tool

پروژه-مدیریت-برنامه Project-Management-App

• توسعه برنامه مدیریت پروژه Developing Project-management App

استقرار React Application Deploying React Application

• برنامه React را اجرا کنید Deploy React App

معرفی Next.js Introduction to Next.js

• Next.js چیست What is Next.js

• پیش نیازهای شروع NextJs Prerequisites to Start NextJs

کار با NextJs Working with NextJs

• نصب NextJs NextJs Installation

• ساختار پوشه Folder Structure

• کد چگونه کار می کند How does the code work

• پیمایش بین اجزا Navigating between components

• سازماندهی پروژه و اجزای سفارشی Organizing Project and Custom Components

• مسیریابی مبتنی بر فایل تودرتو Nested File based Routing

• مسیریابی پویا Dynamic Routing

• CSS جهانی Global CSS

• CSS مبتنی بر مؤلفه Component based CSS

• کار با کامپوننت تصویر Working with Image Component

ایجاد وب اپلیکیشن در NextJs Creating a web Application in NextJs

• یک وب اپلیکیشن املاک و مستغلات ایجاد کنید Create a Real-Estate Web Application

• پایان دوره React End of React course