آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

دوره آموزش Front End - به همراه ReactJs

پیشنیاز : دوره طراحی سایت
تاریخ شروع طول دوره ساعت برگزاری نام استاد هزینه (تومان) وضعیت
1400/09/19 60 ساعت جمعه ها ساعت 12:15 تا 16:15 (حضوری و آنلاین) مهندس محمدی 3,500,000 ثبت نام

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

آموزش Front-End همراه با ReactJS

  • چه کسانی مخاطب برنامه نویسی Front End هستند؟
  • بازار کار فرانت اند در ایران و خارج از ایران چگونه است ؟
  • فریم ورک یا کتابخانه React چیست و چرا باید از آن استفاده کنیم؟
  • پیش نیازهای دوره فرانت اند همراه با ری اکت شامل چیست؟
  • آیا دوره Front End پروژه محور است؟
  • سرفصل ها و روش تدریس دوره فرانت اند همراه با ری اکت چی می باشد؟
  • و ...

این سوالات اکثر کسانی هست که می خواهند وارد دنیای برنامه نویسی فرانت اند ، ری اکت شوند.


با دیدن این ویدئو از مهندس محمدی ، مدرس دوره های حرفه ای آموزشگاه تحلیل داده , به جواب تمام سوالات فوق می رسید.


همه چیز در مورد دوره فرانت اند


دوره آموزش Front End - به همراه ReactJs


با شرکت در دوره آموزش Front End به همراه آموزش ReactJs و یادگیری مفاهیم این دوره و پیاده سازی پروژه های تعریف شده به عنوان نمونه کار، شما می توانید به راحتی جذب بازار کار شوید. در طول دوره شما به همراه دیگر دانشجویان به تیم هایی تقسیم خواهید شد تا کار تیمی را تجربه کرده و با چالش های آن روبرو شوید.


در ضمن در این دوره پس از آموزش عملی GIT با چالشهای کار تیمی نیز آشنا میشوید.


وهمچنین با آموزش SASS در دوره فرانت اند قصد داریم به شما یاد دهیم که چگونه CSS های پویا تولید کنید.


در این دوره می آموزید تا چگونه از Task runner های حرفه ای مانند YARN استفاده کنید.


در دوره Front End یاد می گیرید چگونه با استفاده از کتابخانه های حرفه ای همانند AXIOS اقدام به برقراری ارتباط مبتنی بر AJAX بین Client و Server نمایید.


در ادامه دوره با کتابخانه NEXT.JS آشنا میشوید و می آموزید که چگونه سایتهای Single Page Application را SEO کنید.




پروژه هایی که در طول دوره پیاده سازی می شوند، عبارتند از :


1. پروژه فروشگاه خرید اینترنتی با استفاده از ReactJs
در این پروژه با استفاده از ReactJs, Redux, React-Router, Axios, Formik فرایند ثبت نام، لاگین، سرچ بین محصولات فروشگاه، سبد خرید، درگاه بانکی و پرداخت الکترونیکی، کیف پول و پروفایل کاربر را پیاده سازی خواهیم کرد.



2. پیاده سازی فرآیند لاگین و ثبت نام کاربران با استفاده از ReactJs





اهداف دوره آموزش Front End

  • در این دوره آموزشی شما با جنبه های حرفه ای زبان Java Script آشنا میشوید. از آنجا که امروزه با به عرصه آمدن زبان قدرتمند ECMA Script ، زبان جاوا اسکریپت بسیار بسیار قدرتمند شده است ، تسلط بر ECMA Script مهمترین نیاز برنامه نویسان در داخل و خارج از کشور می باشد.
  • آموزش گیت (Git) یکی از موارد مهمی است که در دوره Front End به آن پرداخته میشود.از آنجا که امروزه مقایسه پروژه ها گسترده تر از گذشته است و لازم است تا کارکردن بر روی پروژه ها بصورت تیمی انجام پذیرد،به این منظور کلیه برنامه نویسان می توانند با ابزار GIT اقدام به کار گروهی مشترک روی پروژه نمایند.در ضمن با توجه به شرایط پیش آمده کنونی و دور کار بودن تیم های تولید نرم افزار مدیریت Source Control امری بسیار مهم برای اکثر شرکتها میباشد.
  • دراین دوره شما به تسلط بر SASS می رسید.
    با توجه به بزرگ شدن پروژه های وب امروزی و نیاز به تغییرات فراوان در نمای سایت با استفاده از CSS
  • در این دوره آموزشی شما به تسلط بر مفاهیم و فراخوانی API می رسید.
    با توجه به اینکه امروزه پروژه ها به صورت Front End /Back End نوشته می شوند
    آموزش Web api
    دانستن تفاوت بین Front End و Back End وقابلیتها و وظایف هرکدام و همچین درک معماری این نوع پروژه ها یکی از اهداف این دوره می باشد.
  • آموزش فراخوانی API با استفاده از AXIOS
    با توجه به اهمیت فراخوانی WEB API ها در پروژه های امروزی ، با استفاده از کتابخانه AXIOS می توانید با حجم کم کد نویسی اقدام به فراخوانی WEB API ها کنید.این کتابخانه کلیه توابع POST,GET,PUT,DELETE را با پیاده سازی مبتی بر AJAX درون خود پیاده سازی نموده است که استفاده از آن موجب افزایش بهره وری در پروژه های Front End می باشد.
  • آموزش کار با ابزار PostMan جهت تست و فراخوانی API ها و بر ررسی JSON بازگشتی از آنها آموزش postman

    با توجه به اهمیت فراخوانی WEB API ها و تست آنها قبل از اقدام به برنامه نویسی مهم ترین موضوع تست
    صحت کارکرد API می باشد که معمولا توسط Post Man انجام می پذیرد.
    با استفاده از post man قبل از اقدام به برنامه نویس و اتلاف وقت و انرژی می آموزیم که api ها چه پارامترهایی در head دارند ، چه پارامترهایی در Body دارند،و بازگشتی خروجی و یا Exception های احتمالی آنها چیست.
  • در این دوره آموزشی ، آموزش جامع کامل و پروژه محوری بر React خواهیم
    مقایسه react و Angular

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

    با توجه به Component Base بودن React و دشواری زیاد در انتقال داده ها مابین کامپوننت ها وهمچنین دشواری نگهداری State ها در پروژه های مختلف از کتابخانه Redux به عنوان کتابخانه جهت مدیریت Sate های Component های React استفاده میکنیم.
  • آموزش Local Storage
    با توجه به حجم محدودCookie های مرورگر و با توجه به مخاطرات فراوان امنیتی استفاده از Cookie ها امروزه از Local Storage به عنوان یک منبع برای ذخیره سازی اطلاعات استفاده می شود


سرفصل دوره آموزش FrontEnd بهمراه آموزش ReactJs


آموزش مفاهیم فرانت اند به همراه نصب ابزارهای لازم

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

  • آموزش ساختار صفحات وب
  • آموزش تفاوت single page website vs multi page website در طراحی صفحات وب
  • آموزش مفاهیم backend vs frontend در طراحی صفحات وب
  • آموزش Restful API در طراحی صفحات وب
  • نصب VSCode و پلاگین های لازم
  • آموزش ابزارهای مدیریت پکیج و نصب آنها (Node, Yarn, Npm)
  • آموزش ابزار کنترل ورژن Git و نصب آن
  • نصب postMan و استفاده از آن


مباحث جاوا اسکریپت پیشرفته (ECMA Script) در دوره آموزش فرانت اند

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

ES6 ورژن 6 از زبان برنامه نویسی اسکریپت ECMA است. اسکریپت ECMA نام استانداردی برای جاوا اسکریپت است و ورژن 6 ورژنی بالاتر از ورژن 5 است. این یک پیشرفت چشمگیر در زبان جاوا اسکریپت است که ویژگی های بسیار بیشتری را شامل می شود و می تواند باعث آسانتر شدن توسعه نرم افزارهای در ابعاد بزرگ شود.

آموزش اکما اسکریپت - تعریف متغییرها در ECMAScript

  • آموزش Const در ECMA Script
  • آموزش Let در ECMA Script
  • آموزش var در ECMA Script
  • آموزش Arrow function ها در ECMA Script
  • آموزش سیستم های ماژولار در اکما اسکریپت
  • آموزش کاربردی import و export در es6
  • آموزش عملگر اسپرید در اکما اسکریپت (Spread operator)
  • آموزش عملگر رست در اکما Rest Operator
  • آشنایی با jsbin online editor
  • آموزش عملی کار با visual studio code
  • Extension برتر ویژوال استودیو کد برای توسعه‌دهندگان Front End
  • آموزش آرایه ها در ES6
  • آموزش بهره مندی از رشته های چند خطی (Multi Line Strings) در es6
  • آموزش کاربردی Global scope در جاوا اسکریپت
  • آموزش Local Scope در جاوا اسکریپت
  • آموزش Place Holder ها در ECMA Script
  • آموزش انواع حلقه تکرار در جاوا اسکریپت پیشرفته
  • آموزش For…of در جاوا اسکریپت
  • آموزش for…in در جاوا اسکریپت
  • مفهوم Destructuring در جاوا اسکریپت
  • آموزش Code runner در visual studio code

آموزش ReactJs

از جمله مواردی که در دوره آموزش Front End بصورت گسترده به آن پرداخته می شود، ReactJs است. React کتابخانه ای از جاوا اسکریپت است که برای ساخت رابط های کاربری سریع و تعاملی در برنامه های تحت وب و موبایل مورد استفاده قرار می گیرد. React کتابخانه ای متن باز و بر پایه کامپوننت است که تنها مسئول لایه View در برنامه است. در معماری MVC (Model View Controller)، هدف از لایه view، بررسی چطور دیده شدن برنامه است. آموزش جاوا اسکریپت
از آنجا که بکارگیری React باعث ساخت آسان برنامه های دینامیک، بهبود عملکرد، ساخت کامپوننت هایی با قابلیت استفاده مجدد و پیروی از جریان غیرجهت دار داده ها می شود و می توان آن را هم برای ساخت برنامه های تحت وب و هم برنامه های موبایل بکار گرفت و دارای ابزار اختصاصی برای debugging است، انتخاب بهتری نسبت به فریمورک های دیگر همچون Angular.js است. علاوه بر این، یادگیری React آسان است.

  • ReactJs چیست؟
  • ReactJs چگونه کار میکند؟
  • آموزش مفاهیم اصلی ReactJs
  • ساخت پروژه جدید react js
  • بررسی Folder structure در create-react-app
  • آموزش JSX برای ReactJS
  • آشنایی با component driven development
  • ساخت custom component ها
  • استفاده از css و scss در پروژه های react
  • استفاده از dynamic data
  • استفاده از expression ها در JSX
  • مفاهیم Props passing و Props drilling
  • استفاده از java script normal در کامپوننت ها
  • مدیریت JSX ها
  • کار با Event handler ها در React
  • کار با State ها و props ها
  • مدیریت submit
  • استفاده از binding در React
  • کار با کامپوننت های stateless و Stateful
  • کار با list ها
  • آشنایی به key
  • کار با media Query در react
  • استفاده از css module
  • آشنایی با خطاهای react و مدیریت آنها
  • آشنایی با ابزار dev tools جهت debugging
  • آشنایی با wrapper component ها
  • آشنایی با portal
  • کار با Ref
  • Side effect چیست و چگونه می توان از آن استفاده کرد

آموزش Hook در React

React Hook که پس از انتشار نسخه‌ی 16.8 به ری‌اکت اضافه شده‌است، به شما این امکان را میدهد که بدون نوشتن کلاس، قابلیت نگهداری State را در برنامه های خود داشته باشید.همگی میدانیم در موضوع توسعه سریع اپلیکیشن ها برنامه نویسی تابعی از سرعت و کارایی خوبی برخوردار است ، اما یکی از ایرادات این روش برنامه نویسی ، حفظ وضعیت در اجرای متوالی توابع می باشد با استفاده از React Hook می توانید ، بدون تبدیل توابع به کلاس، وضعیت متغییرها را حفظ نمایید.

  • مدیریت State ها با استفاده از hook
  • دسترسی به State های قبلی
  • ارتباط useState و object ها
  • ارتباط useState و آرایه ها
  • کاربرد useEffect
  • دریافت داده ها با استفاده از useEffect
  • استفاده از useContext
  • کاربرد UseReducer
  • مقایسه useState و useReducer
  • بررسی useCallback
  • بررسی useMemo
  • بررسی useRef
  • Hook های سفارشی

مفهوم context جهت به اشتراک گذاشتن داده ها به صورت سراسری (global) بین کامپوننت های با ساختار درختی (tree child) برای قسمت هایی مانند اعتبارسنجی کاربران (user authentication)، مدیریت theme و چندزبانه بودن اپلیکیشن، طراحی شده و قابل استفاده می باشد.

آموزش React context و context Api در React

  • کار با Context با استفاده از hook
  • آشنایی با Context Provider ها
  • Class based component ها
  • Function based component ها
  • تفاوت Class Component و Functional Component در React.js
  • ارسال و دریافت اطلاعات به Server های backend و ارتباط با Rest api
  • کار با متد های http مثل get و post و...
  • مدیریت خطاهای http

آموزش formik در React

Formik یک مجموعه ای از کامپوننت های React وهمچنین Hook می باشد که با استفاده از آن می توانید مدیریت فرمهای React را به آسانی انجام دهید.


برخی از امکانات FormLik عبارتند از:

  • خواندن مقادیر خارج از Form State
  • خواندن مقادیر درون Form State
  • اعتبارسنجی و مدیریت خطاها و پیام های خطا
  • ارسال فرم

آموزش Front End, آموزش طراحی سایت, آموزش فرانت اند, آموزش SASS, آموزش HTml5, آموزش Ajax

فیلم های آموزشی مرتبط با این دوره

آموزش Css بخش اول
آموزش Css بخش دوم
آموزش CSS3
اعتبار سنجی در جاوا اسکریپت
HTML DOM در جاوا اسکریپت
آموزش BOM در جاوا اسکریپت
مباحث ReactJS
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال
کاربر میهمان1399/05/16

کلاس عالی، حال عالی

سلام من در دوره شرکت کردم دوره بسیار عالی و جذابی هست ممنون

پاسخ مدیر

درود کاربر عزیز , از اینکه آموزشگاه تحلیل داده را انتخاب کردید و به ما اطمیانان داشتید متشکریم.

حدیثه افشاری1399/04/31

مدت زمان

مدت زمات اتمام دوره چقدر هست؟؟

پاسخ مدیر

سلام کاربر عزیز... مدت دوره 84 ساعت است.

کاربر میهمان1398/10/04

خريد پكيج اموزشي دوره front end

براي من كه ساكن شهرستان هستم و شاغل هستم سخته بتونم بيام تهران هرهفته..امكانش هست پكيج اموزشيو خريداري كنم؟

پاسخ مدیر

سلام کاریر عزیز دوره فرانت اند آموزشگاه تحلیل داده کاملترین دوره در کل ایران هست و حتما باید حضوری یا آنلاین در این دوره شرکت کنید.

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .