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

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

پیشنیاز : آشنایی با HTML CSS و منطق و مقدمات برنامه نویسی
تاریخ شروع طول دوره ساعت برگزاری نام استاد هزینه (تومان) وضعیت
1400/02/17 74 ساعت چهارشنبه ها ساعت 18:30 تا 20:30 و جمعه ها ساعت 12 تا 16(حضوری و آنلاین) با آموزشگاه تماس بگیرید. 2,300,000 ثبت نام

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

عنوان فیلم:

آموزش Front-End

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


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


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



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

  • تسلط دانشجویان بر جنبه های حرفه ای جاوا اسکریپت و پیاده سازی پروژه های پیشرفته جاوا اسکریپت در قالب شی گرا
  • پیاده سازی انواع پروژه های مورد نیاز و مطرح برای بازار کار در داخل و خارج از ایران که باعث می شود دانشجو پس از پایان دوره با حداقل چالش ها در بازار کار مواجه شود
  • ارائه آموزش بر اساس آخرین تکنولوژی های روز دنیا بصورت عملی و پروژه محور
  • آموزش ReactJs همراه با تمامی ساختارهای آن بصورت پروژه محور
  • آموزش حرفه ای پویا سازی CSS ها ( SASS ) و ( SCSS )


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


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



2. پروژه پنل ادمین فروشگاه با استفاده از ReactJs
در این پروژه با استفاده از Material UI و کتابخانه های دیگر صفحات لاگین و ثبت نام ، لیست محصولات فروشگاه، ثبت محصول، پیگیری سفارشات و مدیریت کاربران را پیاده سازی خواهیم کرد.



3. پروژه قالب صفحه اصلی وب سایت شیپور با استفاده از ReactJs
در این پروژه با استفاده از HTML5, Css3, Sass و ReactJS قالب صفحه اصلی وب سایت شیپور را پیاده سازی خواهیم کرد.



4. پروژه ToDo List با استفاده از ReactJs
در این پروژه با استفاده از ReactJs , Redux, HTML5, Css3 یک ToDo list را با قابلیت فیلتر و undo/do پیاده سازی خواهیم کرد.



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



6. پیاده سازی یک شمارنده با قابلیت شمارش خودکار و ریست



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


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

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

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


2. آموزش مفاهیم استایل دهی پیشرفته به صفحات وب

در مسیر آموزش FrontEnd استایل دهی تاثیر بسیار مهمی در نتیجه کار ما خواهد داشت. آموزش استایل دهی پیشرفته بخش مهمی از این دوره است. در زمینه استایل دهی پیشرفته، CSS Preprocessor نقش مهمی را بازی می کند. پیش پردازنده های CSS زبان های اسکریپت نویسی هستند که قابلیت های پیش فرض CSS را توسعه می دهند. پیش پردازنده ها این امکان را فراهم می کنند که در کد CSS، منطقی همچون متغیرها، وراثت، توابع، عملگرهای ریاضی، انتخابگر تو در تو و mixins است. پیش پردازنده های CSS باعث می شوند که کارهای تکراری بصورت خودکار انجام شوند، تعداد خطاها کاهش یابند، قطعه کدهایی با قابلیت استفاده مجدد ایجاد شوند و سازگاری backward ضمین شود.

  • آموزش نکات حرفه ایی HTML5, CSS3 و مفاهیم استایل دهی به صفحات وب
  • پروژه پیاده سازی قالب صفحه اصلی وب سایت شیپور
  • آموزش CSS Preprocessor
  1. آموزش انواع Preprocessor ها نظیر LESS و SASS و SCSS و PostCss
  2. آموزش کار با متغیر ها در SASS
  3. آموزش کار با @
  4. آموزشRules and Directives در SASS
  5. آموزش کار با Control Directives & Expressions در SASS
  6. آموزش کار با Mixin Directives در SASS
  7. آموزش کار با Extend در SASS
  8. آموزش کار با Nesting در SASS
  • آموزش استفاده از BEM در پروژه بصورت کاربردی
  • پروژه پیاده سازی قالب صفحه سرچ وب سایت شیپور


3. آموزش جاوا اسکریپت پیشرفته (ES6)

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

  • آموزش ECMAScript 6 و تفاوت های آن با JavaScript
  • آموزش Var در JavaScript
  • آموزش Let در JavaScript
  • آموزش Const در JavaScript
  • قواعد نامگذاری متغیرها در JavaScript
  • آموزش کار با String در JavaScript
  • آموزش کار با Object در JavaScript
  • آموزش کار با Array در JavaScript
  • آموزش چند تابع کاربردی برای کار با Array در JavaScript
  1. آموزش استفاده از Push, Pop, Shift, unShift, Slice, Concat
  2. آموزش استفاده از Map در Array
  3. آموزش استفاده از Filter در Array
  4. آموزش استفاده از Find, FindIndex در Array
  5. آموزش استفاده از Sort در Array
  6. آموزش استفاده از Join, Split در Array
  • آموزش چند تابع کاربردی برای کار با Object در JavaScript
  1. آموزش استفاده از Object.keys
  2. آموزش استفاده از Object.values
  3. آموزش استفاده از Object.entries
  4. آموزش استفاده از for...in
  • آموزش پیشرفته توابع در ES6
  1. آموزش تعریف Function در ES6
  2. آموزش Arrow Functions در ES6
  • آموزش Destructuring در JavaScript
  • آموزش Default در JavaScript
  • آموزش Spread در JavaScript
  • مرور کار با کلاس ها (Classes) در JavaScript
  • آموزش مفهوم Dom در JavaScript


4. آموزش مقدماتی مبانی Git

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

  • Git Repositoryچیست؟
  • Remote Repositories چیست؟
  • آموزش دستورات رایج و پرکاربرد Git
  1. آموزش دستور git init
  2. آموزش دستور git status
  3. آموزش دستور git add
  4. آموزش دستور git commit
  5. آموزش دستور git reset
  6. آموزش دستور git log
  7. آموزش دستور git push
  8. آموزش دستور git clone
  • آموزش مفاهیم branch و استفاده از آن


5. آموزش ReactJs

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

  • ReactJs چیست؟
  • ReactJs چگونه کار میکند؟
  • آموزش مفاهیم اصلی ReactJs
  1. آموزش کار با Component در ReactJs
  2. آموزش کار با Virtual Dom در Reactjs
  3. آموزش Jsx در Reactjs
  4. آموزش State در Reactjs
  5. آموزش Props در Reactjs
  • آموزش راه اندازی محیط و نصب ابزارهای لازم جهت کار با react
  • آموزش راه اندازی محیط توسعه و پکیج create-react-app
  • آموزش ساختار پوشه ها و فایل های پروژه
  • آموزش JSX و محدودیت های آن
  1. Nested Elements
  2. Attributes
  3. JavaScript Expressions
  4. Styling
  • آموزش ساخت یک کامپوننت ساده و واقعی
  • آموزش درک مفهوم state و کار با آن
  • تغییر state به شکل immutable
  • نمایش خروجی پویا و درک props
  • Event Handlers (تعریف رویدادها و کار با آن در ری اکت)
  • قواعد نامگذاری در ReactJs
  • روش صحیح نمایش شرطی عناصر + لیست ها در react
  • استفاده از توابع، شرط‌ها و آبجکت‌ها در JSX
  • معرفی و کار با Component
  • چرخه زندگی کامپوننت ها
  • آموزش انواع کامپوننت ها stateless و stateful
  • استفاده از propType
  • پروژه تبدیل کردن صفحه استاتیک اچ تی ام ال و سی اس اس به جی اس ایکس
  • استفاده از Ref ها (ارجاع) در react
  • نمایش Modal در ReactJs
  • Hook چیست و چرا باید از آن ها استفاده کنیم
  1. قواعد استفاده از Hook در ReactJs
  2. کار با useState hook در ReactJs
  3. کار با useEffect hook در ReactJs
  4. کار با useState hook در ReactJs
  5. کار با useRef hook در ReactJs
  6. کار با useCallback hook در ReactJs
  7. کار با useMemo hook در ReactJs


6. آموزش Axios و Fetch

در برنامه های React اغلب نیازمند بازیابی دیتا از APIهای خارجی هستیم تا بتوان در صفحات وب نشان داد. یکی از روش های ساخت این قابلیت، بکارگیری Fetch API در جاوا اسکریپت است. Fetch توانایی کامل برای بازیابی دیتاهای خارجی را داراست، اما برخی محدودیت ها را نیز بهمراه دارد. روش معمول تر برای انجام این عملیات، بکارگیری کتابخانه Axios است. Axios برای بررسی درخواست ها و پاسخ ها ی http طراحی شد. از آنجا که این کتابخانه در مقایسه با Fetch، مجموعه بزرگتری از ویژگی ها را داراست و مرورگرهای قدیمی را نیز پشتیبانی می کند، بیشتر از Fetch مورد استفاده قرار می گیرد. Axios متودهایی همچون get() وset() را بکار می گیرد که این متودها درخواست های GET و POST در http برای بازیابی یا ساخت منابع را اجرا می کنند. تمامی این موارد در دوره آموزش فرانت اند به تفصیل شرح داده می شوند.

  • ارسال درخواست Get در Axios
  • ارسال درخواست Post در Axios
  • ارسال درخواست Put در Axios
  • ارسال درخواست Delete در Axios
  • نمایش لیست دریافتی از سرور
  • نمایش loading هنگام ارسال درخواست
  • پیاده سازی فرم لاگین و ثبت نام
  • مدیریت خطا و اعلام آن به کاربر
  • آموزش مفهوم Promise
  • async/await
  • پروژه سبد خرید کاربر


7. آموزش LocalStorage و کار با آن در ReactJs

یکی از موارد مهم در آموزش فرانت اند بحث LocalStorage است. Local Storage نوعی از ذخیره سازی در فضا وب است که برای سایت ها و برنامه های تحت وب جاوا اسکریپت این امکان را فراهم می کند که داده های خود را بدون وجود محدودیت زمانی در مرورگر ذخیره و بازیابی کنند. این مسئله به این معناست که داده های ذخیره شده در مرورگر، حتی پس از بسته شدن مرورگر نیز وجود خواهند داشت.

  • localStorage چیست؟
  • مشاهده LocalStorage در مرورگر کاربر
  • ذخیره یک مقدار در LocalStorage
  • خواندن یک مقدار از LocalStorage
  • ذخیره Array , Object در LocalStorage


8. آموزش Reduxو فلسفه Flux

استفاده از Redux مدیریت حالت برنامه برای شما راحت تر می شود، بعبارت دیگر در مدیریت داده هایی که به نمایش می گذارید و همینطور چگونگی واکنش به فعالیت کاربران به شما کمک می کند. آموزش Redux به شما کمک می کند برنامه هایی بنویسید که در محیط های مختلف (Client, Server, native) اجرا شوند و تست آنها آسان باشد. علاه بر این، امکان live code editing combined with a time traveling debugger را برای شما فراهم می کند. Redux را می توان همراه React یا هر کتابخانه دیگری برای View مورد استفاده قرار داد. Redux کم حجم است و مجموعه قدرتمندی از سیستم ها را شامل می شود.
Flux الگویی برای مدیریت جریان داده ها در یک برنامه React است. همانطور که مشاهده می شود، روش ترجیحی برای کار با کامپوننت های React ، عبور داده ها از یک کامپوننت والد به کامپوننت های زیر مجموعه آن است. الگو Flux این مدل را تبدیل به روش پیش فرض برای مدیریت داده ها می کند. الگو Flux دارای سه نقش مجزا برای کار با داده هاست که این سه نقش عبارتند از : Dispatcher, Stores, Views (our Components). رویکرد اصلی در آموزش Flux این است که جریان داده در یک جهت است و بطور کامل در stores نگهداری می شود. بعبارت دیگر، تنها یک منبع از دیتاهای واقعی وجود دارد و این دیتاها تنها بوسیله عملیات trigger بروز رسانی می شوند. این عملیات مسئول فراخوانی dispatcher است، در حالی که stores می تواند نسبت به تغییرات واکنش نشان دهد و در نتیجه داده های خود را بروز رسانی کند. زمانی که عملیات trigger برای dispatch انجام و store نیز بروزرسانی می شود، تغییری که ممکن است در پایان در view مجدد رندر شود، حذف می شود.

  • Redux چیست و چرا باید از آن استفاده کنیم؟
  • آموزش کار با ساختار قسمت های تشکیل دهنده Redux
  • آموزش مفهوم Flux و اهمیت آن
  • آموزش استفاده از کتابخانه Redux, React-redux
  • آموزش مفهوم Immutability و اهمیت آن
  • Reducer چیست و چگونگی تعریف آن در Redux
  • Action چیست و چگونگی تعریف آن در Redux
  • Middleware چیست؟
  • ابزار Redux Devtools
  • redux-thunk
  • پیاده سازی پروژه To do List با قابلیت undo, reset, filter با استفاده از Redux
  • پیاده سازی پروژه سبد خرید با استفاده از Redux


9. آموزش کار با Route در ReactJs

بسیاری از وبسایت های مدرن از یک صفحه واحد تشکیل شده اند و تنها بدلیل وجود کامپوننت هایی که شبیه صفحات جداگانه رندر می شوند، اینگونه به نظر می رسد که این وبسایت ها دارای چندین صفحه هستند. این وبسایت ها اغلب تحت عنوان برنامه های تک صفحه ای (SPAs) شناخته می شوند. اگر بخواهیم بصورت دقیق تر بیان کنیم، آنچه که React Router انجام می دهد رندر کامپوننت های ضروری برای نمایش بر اساس route مورد استفاده در URL است ( / برای home page و /about برای about page و ... ).

  • React Router (آموزش مفهوم روت در ری اکت برای ساخت برنامه هایی با چندین صفحه)
  • URL Parameters (پاس دادن پارامتر به وسیله یوآرال)
  • Switch Component (کامپوننت سوئیچ در ری اکت روتر و استفاده آن برای داشتن چندین صفحه در برنامه)
  • 404 Page (تعریف صفحه ۴۰۴ برای برنامه)
  • Scroll to Top (تعریف لینک بازگشت به بالای صفحه)
  • Navigation Link (آموزش لینک ها)
  • Project: Authentication (تعریف یک پروژه اعتبار سنجی با استفاده از روترها در ری اکت)
  • Redirect using react router (فرستادن کاربر به یک صفحه خاص با استفاده از کتابخانه ری اکت روتر)
  • React Context API (آموزش کانتکست و کاربردهای آن در ری اکت)
  • Use context to store login status (پروژه استفاده از کانتکست برای ذخیره اطلاعات کاربر بعد از لاگین)


10. کار با Form در ReactJs

  • پیاده سازی فرم لاگین و ثبت نام
  • آموزش کتابخانه Formik
  • پیاده سازی فرم ثبت کالا با استفاده از Formik
  • هندل کردن خطا با استفاده از Formik
  • اعتبارسنجی فرم ها در سمت مرورگر کاربر


11. آموزش کار با GoogleMap در ReactJs



12. آموزش مفاهیم Server Side Rendering و استفاده از کتابخانه NextJs

Server Side Rendering (SSR) یک روش معمول برای رندر کردن یک برنامه تک صفحه ای سمت کاربر بر روی سرور است که پس از رندر کردن یک صفحه بصورت کامل، آن را به سمت کاربر می فرستد؛ سرویس های جاوا اسکریپت در سمت کاربر کنترل را بدست گرفته و امکان راه اندازی فریمورک SPA را فراهم می کند.



13. آموزش بهینه سازی پروژه (Performance optimization for react)



14. آموزش قرار دادن پروژه در فضای وب (Deploying react projects)



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


پیاده سازی فروشگاه خرید اینترنتی به همراه پنل ادمین فروشگاه


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

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

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

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

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

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

پاسخ مدیر

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

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

مدت زمان

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

پاسخ مدیر

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

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

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

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

پاسخ مدیر

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

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

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