آموزش یک سایت تجارت الکترونیک سفارشی در React + JavaScript Basics بسازید

Build a Custom E-Commerce Site in React + JavaScript Basics

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: یک سایت تجارت الکترونیک کاملا سفارشی با دسته بندی محصولات، سبد خرید و صفحه پرداخت در React بسازید.

آنچه یاد خواهید گرفت

  • مقدمه ای بر مدل شیء سند (DOM)
  • مبانی جاوا اسکریپت
  • عملیات محاسباتی جاوا اسکریپت
  • کار با آرایه ها، توابع و حلقه ها در جاوا اسکریپت
  • متغیرها، رویدادها و اشیاء جاوا اسکریپت
  • جاوا اسکریپت دستی - ایجاد یک گالری عکس و تغییر رنگ پس زمینه
  • مبانی React
  • چگونه یک پروژه React موجود را داربست کنیم
  • معرفی سرور JSON
  • طراحی یک فروشگاه تجارت الکترونیک در React و ایجاد دسته‌های فروشگاه
  • مقدمه ای بر Fetch API و React Router
  • مفهوم "Context" در React
  • ساخت ویژگی جستجو در React
  • اعتبار سنجی فرم ها در React

این دوره شما را گام به گام در فرآیند ساخت یک ماشین حساب کاملا کاربردی در React راهنمایی می کند. React که با نام React JS نیز شناخته می‌شود، یک کتابخانه قدرتمند جاوا اسکریپت است که برای ساخت رابط‌های کاربری سفارشی و تعاملی با استفاده از اجزای UI استفاده می‌شود. برخی از شناخته شده‌ترین نمونه‌های سازمان‌هایی که از React برای قسمت جلویی خود استفاده می‌کنند عبارتند از Netflix، Facebook و Airbnb. React که توسط متا به همراه جامعه ای از توسعه دهندگان مستقل توسعه و نگهداری می شود، رایگان و منبع باز باقی می ماند. React یک کتابخانه مبتنی بر کامپوننت است که به طور کامل بر اساس جاوا اسکریپت ساخته شده است، که آن را برای طراحی رابط های کاربری پیچیده عالی می کند. با React، توسعه‌دهندگان می‌توانند مؤلفه‌های کپسوله‌شده‌ای بسازند که به‌طور مؤثر وضعیت خود را مدیریت کرده و به‌روزرسانی‌های رابط کاربری را به‌طور خاص در هنگام تغییر داده‌ها ارائه کنند. برای مثال، به ویژگی به‌روزرسانی خودکار محتوا که در فید توییتر یا دکمه لایک فیس‌بوک می‌بینید، فکر کنید. در اینجا وضعیت مؤلفه UI در صفحه تغییر می کند، بدون نیاز به بازخوانی دستی هنگام به روز رسانی داده ها. این تنها یک ویژگی کوچک و در عین حال قدرتمند React است.

از طریق یک پروژه عملی کامل، این دوره به شما تمام اصول اساسی React را که برای تبدیل شدن به یک توسعه دهنده ماهر React باید بدانید، به شما آموزش می دهد. ما درست از اصول اولیه شروع می کنیم، از جمله ابزارهای مورد نیاز برای شروع. از آنجا به JSX، کامپوننت‌های کاربردی، ابزارها، تماس‌های برگشتی و رویدادهای مختلف OnClick می‌پردازیم. در این مرحله، ماشین حساب یک نمایش بصری کامل همراه با عملیات حسابی کاربردی خواهد داشت. سپس دانش‌آموزان به انتقال پارامترها در توابع Callback، با استفاده از React State Hook و اشکال‌زدایی می‌پردازند.

علاوه بر ماژول عملی React، ما همچنین یک مرور کلی از جاوا اسکریپت را برای کسانی که نیاز به تجدید نظر دارند ارائه می‌کنیم. . در اینجا ما با معرفی دانش آموزان با مدل شیء سند (DOM) شروع می کنیم که ساختار منطقی اسناد HTML را تعریف می کند. از آنجا به جاوا اسکریپت می‌رویم تا روش‌های مختلفی را نشان دهیم که در آن عناصر DOM می‌توانند برای افزودن تعامل به اجزای استاتیک دستکاری شوند. ما درست از اصول اولیه شروع می کنیم، که شامل جاوا اسکریپت و خروجی داده می شود. از آنجا به اعلان متغیر، عملیات حسابی، اولویت عملگر، انواع داده ها و اشیا می رویم. پس از پوشاندن پایه ها، با استفاده از آرایه ها، بیانیه های شرطی، عملگرهای مقایسه جاوا اسکریپت، بولی ها و حلقه ها به سمت عملیات پیچیده تر می رویم. در اینجا دانش آموزان یاد خواهند گرفت که قدرت واقعی جاوا اسکریپت را برای ارائه نتایج متفاوت بر اساس تعامل کاربر آزاد کنند. ما استفاده از توابع را برای مدیریت کارآمد وظایف تکراری و رویدادهای جاوا اسکریپت برای مدیریت خروجی بر اساس کنش‌ها و رویدادها بررسی خواهیم کرد. این بخش با یک پروژه عملی به پایان می رسد که در آن دانش آموزان دانش خود را برای ایجاد یک گالری عکس مبتنی بر وب و تغییر رنگ پس زمینه پیاده سازی می کنند.


این دوره برای چه کسانی است:

  • دانشجویان علاقه مند به یادگیری مبانی جاوا اسکریپت
  • دانشجویان علاقه مند به یادگیری اصول کتابخانه ReactJS
  • دانشجویان علاقه مند به ساخت اجزای رابط کاربری تعاملی با استفاده از React
  • دانشجویان علاقه مند به یادگیری نحوه ساخت یک سایت تجارت الکترونیک کاملا سفارشی در React

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

مقدمه ای بر مدل شیء سند (DOM) Introduction to the Document Object Model (DOM)

  • معرفی DOM DOM Introduction

  • دستکاری DOM DOM Manipulation

مرور کلی جاوا اسکریپت JavaScript Overview

  • مقدمه Introduction

  • قرار دادن JS JS Placement

  • جاوا اسکریپت خارجی External JavaScript

  • خروجی جاوا اسکریپت JavaScript Output

  • JavaScript InnerHTML JavaScript InnerHTML

  • کامنت گذاری جاوا اسکریپت JavaScript Commenting

  • ثابت جاوا اسکریپت JavaScript Constants

  • معرفی متغیرهای جاوا اسکریپت JavaScript Variables Introduction

  • اپراتور جاوا اسکریپت JavaScript Assignment Operator

  • عملیات محاسباتی جاوا اسکریپت JavaScript Arithmetic Operations

  • عملیات محاسباتی جاوا اسکریپت ادامه دارد JavaScript Arithmetic Operations Continued

  • اولویت اپراتور جاوا اسکریپت JavaScript Operator Precedence

  • انواع داده جاوا اسکریپت JavaScript Data Types

  • اشیاء جاوا اسکریپت JavaScript Objects

  • خروجی شی جاوا اسکریپت JavaScript Object Output

  • رشته های جاوا اسکریپت JavaScript Strings

  • طول رشته جاوا اسکریپت JavaScript String Length

  • کاراکترهای ویژه جاوا اسکریپت JavaScript Special Characters

  • اعداد تصادفی جاوا اسکریپت JavaScript Random Numbers

  • تابع حداقل و حداکثر جاوا اسکریپت JavaScript Min and Max Function

  • تابع دور ریاضی جاوا اسکریپت JavaScript Math Round Function

  • آرایه های جاوا اسکریپت JavaScript Arrays

  • ویژگی های آرایه جاوا اسکریپت JavaScript Array Attributes

  • آرایه های جاوا اسکریپت - Pop - Push - Shift - Unshift JavaScript Arrays - Pop - Push - Shift - Unshift

  • جاوا اسکریپت تغییر و حذف عناصر JavaScript Changing and Deleting Elements

  • جاوا اسکریپت پیوند یک آرایه JavaScript Splicing an Array

  • جاوا اسکریپت مرتب سازی یک آرایه JavaScript Sorting an Array

  • پیوستن آرایه های جاوا اسکریپت JavaScript Joining Arrays

  • عبارات شرطی جاوا اسکریپت JavaScript Conditional Statements

  • مقایسه جاوا اسکریپت JavaScript Comparisons

  • بولین های جاوا اسکریپت JavaScript Booleans

  • جاوا اسکریپت برای حلقه ها JavaScript For Loops

  • JavaScript For-In Loop JavaScript For-In Loop

  • JavaScript while Loops JavaScript While Loops

  • حلقه جاوا اسکریپت Do-While JavaScript Do-While Loop

  • جاوا اسکریپت شکسته و ادامه دهید JavaScript Break and Continue

  • توابع جاوا اسکریپت JavaScript Functions

  • رویدادهای جاوا اسکریپت JavaScript Events

  • JavaScript Project 1 - BG Color Changer JavaScript Project 1 - BG Color Changer

  • پروژه جاوا اسکریپت 2 - گالری عکس JavaScript Project 2 - Photo Gallery

  • پروژه جاوا اسکریپت 2 - تکمیل JavaScript Project 2 - Completion

مقدمه ای برای React Intro to React

  • مهارت های مورد نیاز Skills Required

  • React چیست؟ What is React?

  • سلام واکنش Hello React

  • ابزار مورد نیاز Tools Needed

  • قلم کد Code Pen

  • معرفی JSX Intro to JSX

React Project - یک فروشگاه تجارت الکترونیک بسازید React Project - Build an E-Commerce Store

  • بررسی اجمالی پروژه Project Overview

  • داربست پروژه Scaffolding the Project

  • معرفی سرور JSON Intro to JSON Server

  • واکشی API Fetch API

  • سبک دادن به فروشگاه Styling the Store

  • ارائه دسته بندی ها Rendering the Categories

  • اتصال محصولات Binding the Products

  • تماس Fetch API را مجدداً تنظیم کنید Refactor the Fetch API call

  • مقابله با خطاها در Fetch API Dealing with errors in Fetch API

  • تماس Fetch API را مرتب کنید Tidy the Fetch API call

  • سبک دادن به لیست محصولات Styling the Product List

  • نصب روتر React Installing React Router

  • رفع اخطار کلیدی Fixing the Key Warning

  • روتر واکنش - صفحه جزئیات React Router - Detail Page

  • Fetch API - دریافت محصول بر اساس شناسه Fetch API - Get Product By Id

  • توضیحات محصول Product Description

  • مقدمه ای بر اجزای سبک Intro to Styled Components

  • اجزای سبک - توضیحات محصول Styled Components - Product Description

  • تنظیم خطرناک HTML (آره واقعا) Dangerously Set HTML (yeah really)

  • Refactor دسته ها Refactor the Categories

  • Layout را اصلاح کنید Refactor the Layout

  • صفحه اصلی را بازسازی کنید Refactor the Home Page

  • معرفی Context در React Intro to Context in React

  • UseContext Hook و UseReducer Hook در React UseContext Hook and UseReducer Hook in React

  • طرح بندی سبد Basket Layout

  • اجرای سبد Implementing the Basket

  • پیاده سازی آیکون های سبد Implementing Basket Icons

  • اجرای سبد کل Implementing Basket Total

  • اتمام پرداخت Finishing the Checkout

  • پرداخت - رفع وضعیت Checkout - Fixing the State

  • اجرای تایید سفارش Implementing the Order Confirmation

  • معرفی Local Storage Intro to Local Storage

  • پیاده سازی نتایج جستجو Implementing Search Results

  • جستجوی بهتر با Debouncing Better Searching with Debouncing

  • اعتبار سنجی فرم ها در React - قسمت 1 Validating Forms in React - Part 1

  • اعتبار سنجی فرم ها در React - قسمت 2 Validating Forms in React - Part 2

  • اعتبار سنجی فرم ها در React - قسمت 3 Validating Forms in React - Part 3

  • اعتبار سنجی فرم ها در React - قسمت 4 Validating Forms in React - Part 4

  • خلاصه ی پروژه Project Summary

نمایش نظرات

آموزش یک سایت تجارت الکترونیک سفارشی در React + JavaScript Basics بسازید
جزییات دوره
88
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
3,003
4.7 از 5
ندارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

YouAccel Training YouAccel Training

شروع به یادگیری کنید و مهارت های مورد نیاز خود را کسب کنید! بیانیه ماموریت: برای تسهیل یک محیط جامع یادگیری آنلاین برای دانشجویان. درباره شرکت YouAccel یک ارائه دهنده پیشرو در آموزش آنلاین است ، دوره هایی را در صنایع مختلف از IT و توسعه گرفته تا تجارت ، بازاریابی ، طراحی و بهره وری ارائه می دهد. تجربه آموزش الکترونیکی ارائه شده توسط YouAccel پویا است. هر دوره در High Definition با تکالیف ، آزمونها و امتحانات مربوطه که به صورت الکترونیکی تحویل و درجه بندی می شوند ، پخش می شود. کلیه دوره های YouAccel توسط مربیان دارای گواهینامه تدریس می شود که دارای چندین سال سابقه کار در زمینه ای هستند که برای آنها آموزش می دهند. این دوره ها را می توان با سرعت شخصی برگزار کرد و در چندین سطح از جمله مبتدی ، متوسط و پیشرفته ارائه می شود. دوره های آنلاین همچنین برای راحتی بیشتر با هر دستگاه تلفن همراه سازگار هستند. با استفاده از این تجربه به یک سطح جدید شخصی ، ارتباط زنده با مربیان از طریق کنسول پیام رسانی آنلاین Udemy در دسترس است. کلیه دوره ها دارای گواهی پایان دوره هستند و محدودیت سنی اعمال نمی شود.