آموزش منطق و مقدمات برنامه نویسی به همراه الگوریتم و فلوچارت آموزش منطق و مقدمات برنامه نویسی به همراه الگوریتم و فلوچارت
021-88146330
021-88146323
0

سبد خرید شما خالی است!

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

با مجوز رسمی از سازمان فنی و حرفه‌ای کشور

ورود / ثبت‌نام

ورود کاربر جدید هستید؟ ثبت نام کنید

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

دوره آموزش Front End - به همراه ReactJs
ثبت نام دوره
نوع دوره شهریه نام استاد مدت زمان تاریخ شروع زمان برگزاری پیشنیاز وضعیت دوره
حضوری یا آنلاین 8,000,000 تومان شایان خلج 80 ساعت 1403/07/27 جمعه 12 تا 17 دوره طراحی سایت
درحال ثبت نام

مخاطبین دوره Front End به همراه ReactJS

  1. توسعه‌دهندگان باتجربه وب: کسانی که به دنبال ارتقای مهارت‌های خود و یادگیری تکنیک‌های پیشرفته برای توسعه برنامه‌های پیچیده و حرفه‌ای‌تر وب هستند.
  2. طراحان رابط کاربری (UI/UX): افرادی که می‌خواهند با تسلط بر ReactJs، طرح‌های زیبا و کاربرپسند خود را به صورت داینامیک و تعاملی پیاده‌سازی کنند.
  3. کارآفرینان و مدیران استارتاپ‌ها: افرادی که می‌خواهند محصولات نوآورانه و کارآمد خود را با استفاده از جدیدترین تکنولوژی‌های وب توسعه دهند و به بازار عرضه کنند.
  4. دانشجویان و فارغ‌التحصیلان علوم کامپیوتر: : کسانی که به دنبال پروژه‌های عملی و کاربردی در حوزه توسعه وب هستند تا بتوانند پس از فارغ‌التحصیلی به سرعت وارد بازار کار شوند.
  5. توسعه‌دهندگان بک‌اند: برنامه‌نویسانی که قصد دارند توانایی‌های خود را در زمینه فرانت‌اند گسترش دهند و به توسعه‌دهندگان فول‌استک تبدیل شوند.
  6. علاقه‌مندان به تکنولوژی‌های جدید: افرادی که مشتاق یادگیری و آشنایی با ابزارها و فریم‌ورک‌های مدرن توسعه وب مانند ReactJs هستند.
  7. مدیران پروژه‌های فناوری اطلاعات:مدیرانی که نیاز به درک بهتر از فرآیندهای توسعه فرانت‌اند و ابزارهای مدرن دارند تا بتوانند پروژه‌ها را به صورت مؤثر مدیریت کنند.
  8. برنامه‌نویسان جاوااسکریپت: افرادی که می‌خواهند از مهارت‌های جاوااسکریپت خود بهره‌برداری کرده و با یادگیری ReactJs به توسعه‌دهندگان حرفه‌ای تبدیل شوند.
  9. فریلنسرها: افرادی که به دنبال پروژه‌های فرانت‌اند بیشتر و با کیفیت بالاتر هستند و می‌خواهند در بازار رقابتی فریلنسری برتری داشته باشند.
  10. توسعه‌دهندگان اپلیکیشن‌های موبایل: : کسانی که می‌خواهند با استفاده از React Native، مهارت‌های خود را به توسعه اپلیکیشن‌های موبایل گسترش دهند.
  11. طراحان گرافیک: افرادی که می‌خواهند با یادگیری ReactJs، توانایی‌های خود را در زمینه توسعه وب گسترش داده و پروژه‌های جامع‌تری انجام دهند.
  12. افرادی که به دنبال تغییر مسیر شغلی هستند: کسانی که به دنبال تغییر شغل خود به حوزه توسعه وب هستند و می‌خواهند با یادگیری ReactJs در این مسیر جدید موفق شوند.
  13. توسعه‌دهندگان علاقه‌مند به SPA: افرادی که به ساخت اپلیکیشن‌های تک‌صفحه‌ای (Single Page Applications) با استفاده از ReactJs علاقه‌مند هستند.
  14. افرادی که به دنبال درآمد بالاتر هستند: کسانی که می‌خواهند با یادگیری تکنولوژی‌های پیشرفته، به فرصت‌های شغلی بهتر و درآمد بالاتر دست یابند.

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

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

  • آشنایی با مفاهیم پایه و نصب ابزارهای ضروری: شروع با مبانی فرانت‌اند و نصب ابزارهای لازم برای توسعه وب، از جمله ویرایشگرهای کد، ابزارهای خط فرمان و مرورگرهای توسعه‌دهنده.
  • تسلط بر جاوا اسکریپت پیشرفته (ECMAScript): یادگیری مفاهیم پیشرفته جاوا اسکریپت، از جمله ویژگی‌های جدید در نسخه‌های اخیر ECMAScript، که پایه و اساس توسعه فرانت‌اند مدرن را تشکیل می‌دهند.
  • آموزش جامع ReactJs: از مبانی اولیه تا مفاهیم پیشرفته، شرکت‌کنندگان به صورت کامل با ReactJs آشنا می‌شوند و یاد می‌گیرند چگونه از این کتابخانه قدرتمند برای ساخت برنامه‌های وب استفاده کنند.
  • کار با Hooks در React: **: استفاده حرفه‌ای از Hook‌ها برای مدیریت وضعیت و اثرات جانبی در برنامه‌های React، که باعث ساده‌تر و قابل فهم‌تر شدن کدها می‌شود.
  • آموزش Next.js: ایجاد برنامه‌های وب سریع و بهینه با فریم‌ورک Next.js، از جمله ویژگی‌های SSR (Server-Side Rendering) و SSG (Static Site Generation) که برای بهبود سئو و سرعت بارگذاری صفحات اهمیت دارد.
  • استفاده از react router 6 : مسیریابی پیشرفته در برنامه‌های تک صفحه‌ای با استفاده از react router 6، که امکان مدیریت مسیرها و ناوبری در برنامه‌های وب را فراهم می‌کند.
  • مدیریت وضعیت با Redux: مدیریت پیچیده وضعیت برنامه با Redux، و آشنایی با مفاهیم و الگوهای رایج در این کتابخانه، که به بهبود ساختار و نگهداری کد کمک می‌کند.
  • ساخت فرم‌های حرفه‌ای با Formik: ساخت و مدیریت فرم‌های حرفه‌ای با Formik، از جمله اعتبارسنجی و مدیریت وضعیت فرم‌ها، که تجربه کاربری بهتری را فراهم می‌کند.
  • Debugging در React: شناسایی و رفع باگ‌ها در کدهای React با استفاده از ابزارها و تکنیک‌های دیباگینگ، که به بهبود کیفیت کد و کاهش خطاها کمک می‌کند.
  • مدیریت Side Effects در React: مدیریت اثرات جانبی با استفاده از Hooks و کتابخانه‌های مناسب، مانند useEffect، که به کنترل بهتر رفتار برنامه کمک می‌کند.
  • برنامه‌نویسی Async: تسلط بر برنامه‌نویسی غیرهمزمان و مدیریت درخواست‌ها با استفاده از توابع async و await، که امکان ارتباط مؤثرتر با سرورها و API‌ها را فراهم می‌کند.
  • ارتباط با Rest API و Back End: استفاده از AXIOS برای برقراری ارتباط با سرورها و فراخوانی API‌های مختلف، که به توسعه‌دهندگان اجازه می‌دهد داده‌های دینامیک را مدیریت کنند.
  • نسخه‌بندی و مدیریت کد با Git: آموزش گیت از مبانی اولیه تا مفاهیم پیشرفته مانند branching و merging، که برای مدیریت پروژه‌های تیمی ضروری است.
  • تسلط بر SASS: طراحی و مدیریت CSS‌های پیشرفته با SASS، از جمله مفاهیم متغیرها، mixin‌ها و توابع، که به بهینه‌سازی و نگهداری بهتر کدهای CSS کمک می‌کند.
  • کار با Local Storage: ذخیره و مدیریت داده‌ها در حافظه محلی مرورگر، که برای ایجاد تجربه کاربری بهتر و مدیریت داده‌ها در سمت کلاینت استفاده می‌شود.
  • پروژه فروشگاه اینترنتی: ساخت یک فروشگاه آنلاین با ReactJs، Redux، React-Router، Axios و Formik. در این پروژه، فرآیندهایی مانند ثبت‌نام و لاگین کاربران، جستجوی محصولات، مدیریت سبد خرید، پرداخت الکترونیکی و ایجاد کیف پول و پروفایل کاربر پیاده‌سازی می‌شوند.
  • پیاده‌سازی فرآیند لاگین و ثبت‌نام کاربران: ایجاد سیستم احراز هویت با استفاده از ReactJs و ارتباط آن با سرورهای Back End برای مدیریت کاربران.

سرفصل دوره آموزش 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 یک کتابخانه متن‌باز جاوا اسکریپت است که برای ساخت رابط‌های کاربری سریع و تعاملی در برنامه‌های تحت وب و موبایل استفاده می‌شود. این کتابخانه، بر پایه کامپوننت طراحی شده و تنها مسئولیت لایه View را در معماری MVC (Model View Controller) بر عهده دارد. هدف از لایه View، نمایش و چگونگی دیده شدن برنامه است. استفاده از React امکان ساخت رابط‌های کاربری پویا و کاربرپسند را با سهولت بیشتری فراهم می‌کند و این امر به دلیل ویژگی‌های منحصر به فرد آن نظیر مجازی‌سازی DOM و مدیریت کارآمد وضعیت کامپوننت‌ها است.

استفاده از React به توسعه‌دهندگان این امکان را می‌دهد که برنامه‌های دینامیک و با عملکرد بالا ایجاد کنند. ساخت کامپوننت‌های قابل استفاده مجدد و پیروی از جریان یک‌طرفه داده‌ها، از مزایای اصلی این کتابخانه محسوب می‌شود که منجر به ساده‌تر شدن مدیریت وضعیت و افزایش قابلیت نگهداری کد می‌شود. همچنین، React را می‌توان برای توسعه برنامه‌های تحت وب و با استفاده از React Native برای ساخت برنامه‌های موبایل به کار برد. ابزارهای اختصاصی برای دیباگینگ و تحلیل کد، یکی دیگر از نقاط قوت React است که توسعه‌دهندگان را در فرآیند رفع اشکال یاری می‌دهد. علاوه بر این، یادگیری آسان‌تر React نسبت به بسیاری از فریم‌ورک‌های دیگر نظیر Angular.js، آن را به انتخابی مناسب برای توسعه‌دهندگان تبدیل کرده است.

  • ReactJs چیست؟
  • ReactJs چگونه کار میکند؟
  • آموزش مفاهیم اصلی ReactJs
  • ساخت پروژه جدید react js
  • بررسی Folder structure در Vite
  • آموزش 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 به React اضافه شده است، به شما این امکان را می‌دهد که بدون نوشتن کلاس، قابلیت نگهداری State را در برنامه‌های خود داشته باشید. همگی می‌دانیم که در توسعه سریع اپلیکیشن‌ها، برنامه‌نویسی تابعی از سرعت و کارایی خوبی برخوردار است، اما یکی از ایرادات این روش برنامه‌نویسی، حفظ وضعیت در اجرای متوالی توابع است. با استفاده از React Hook می‌توانید، بدون نیاز به تبدیل توابع به کلاس، وضعیت متغیرها را حفظ نمایید. این قابلیت باعث می‌شود که کدهای شما ساده‌تر، خواناتر و قابل نگهداری‌تر باشند و فرآیند توسعه اپلیکیشن‌ها سریع‌تر و کارآمدتر انجام شود.

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

مفهوم Context در React جهت به اشتراک‌گذاری داده‌ها به صورت سراسری (global) بین کامپوننت‌های با ساختار درختی (tree-like structure) طراحی شده است و برای قسمت‌هایی مانند اعتبارسنجی کاربران (user authentication)، مدیریت تم (theme management) و چندزبانه بودن اپلیکیشن (multilingual support) قابل استفاده می‌باشد. با استفاده از Context، می‌توانید داده‌ها را به سادگی و بدون نیاز به ارسال prop در چندین سطح از سلسله مراتب کامپوننت‌ها به اشتراک بگذارید، که این امر باعث کاهش پیچیدگی و افزایش خوانایی کدها می‌شود.

آموزش 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 یک مجموعه از کامپوننت‌ها و Hookهای React است که با استفاده از آن می‌توانید مدیریت فرم‌های React را به آسانی انجام دهید. این کتابخانه به شما امکان می‌دهد تا فرم‌های پیچیده را با سادگی بیشتری ایجاد و مدیریت کنید، اعتبارسنجی داده‌ها را انجام دهید و وضعیت فرم‌ها را به صورت مؤثر مدیریت نمایید. Formik همچنین ابزارهای متنوعی برای رسیدگی به خطاها و اعتبارسنجی داده‌ها ارائه می‌دهد، که این امر باعث می‌شود توسعه‌دهندگان بتوانند با کاهش حجم کدهای خود، فرم‌های کارآمد و قابل اعتمادی ایجاد کنند.

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

  • خواندن مقادیر خارج از Form State
  • خواندن مقادیر درون Form State
  • اعتبارسنجی و مدیریت خطاها و پیام های خطا
  • ارسال فرم
ساخت فرم های حرفه ای با استفاده از Formik
  • چرا باید از formik استفاده کنیم
  • useFormik Hook
  • استفاده از initial values
  • پیاده سازی مدیریت submit در formik
  • پیاده سازی input validation در formik
  • استفاده از Formik Errors در input validation
  • استفاده از onBlur در input validation
  • آشنایی و کاربرد Formik touched
  • استفاده از کتابخانه YUP در validation
  • ایجاد validation schema و yup object
  • بررسی function های پر کاربرد YUP برای validation
  • استفاده از getFieldProps در Formik
  • کاربرد تگ Formik
  • کاربرد تگ Form در Formik
  • کاربرد Field ها در Formik
  • کاربرد Error Message ها
  • Component ها در Error Message
  • کاربرد nested Object ها در Formik
آموزش نکست جی اس (next.js)

Next.js یکی از فریم‌ورک‌های محبوب و بسیار پرکاربرد بر پایه React است که برای ساختن وب‌سایت‌ها و وب اپلیکیشن‌ها استفاده می‌شود. این ابزار به شما کمک می‌کند تا وب‌سایت‌های بسیار سریع‌تر و کارآمدتر بسازید. در ادامه به چند ویژگی اصلی Next.js اشاره می‌کنیم:

  1. رندر سمت سرور (Server-Side Rendering - SSR): این ویژگی به شما کمک می‌کند که محتوای سایت را روی سرور آماده کرده و سپس برای مرورگر کاربر ارسال کنید. این باعث می‌شود که سایت شما سریع‌تر باز شود و برای SEO بهتر باشد.
  2. ایجاد سایت‌های استاتیک (Static Site Generation - SSG): )**: با این قابلیت، می‌توانید صفحات سایت خود را از قبل آماده کنید و سریع‌تر به کاربران نمایش دهید.
  3. مسیر‌یابی ساده (Simple Routing): ساختار مسیرها (URLها) در Next.js بسیار ساده است. هر فایل در پوشه pages تبدیل به یک مسیر می‌شود. به عنوان مثال، اگر فایل about.js را در این پوشه داشته باشید، سایت شما یک مسیر /about خواهد داشت.
  4. پشتیبانی از API‌ها: شما می‌توانید به راحتی سرویس‌های کوچکی (API) بسازید که اطلاعات را از سرور دریافت کرده و به برنامه شما می‌فرستند، بدون اینکه نیاز به ساختن یک سرور جداگانه باشد.
  5. بهینه‌سازی خودکار: js به طور خودکار بخش‌های مختلف کد شما را بهینه می‌کند تا سایت سریع‌تر و بهتر کار کند.
  6. پشتیبانی از TypeScript: **: اگر می‌خواهید از زبان TypeScript استفاده کنید که به شما کمک می‌کند کدهای بهتر و قابل‌فهم‌تری بنویسید، Next.js این امکان را به شما می‌دهد.

با استفاده از Next.js، می‌توانید به راحتی و با سرعت بیشتری وب‌سایت‌های حرفه‌ای بسازید که به خوبی کار می‌کنند و برای کاربران جذاب‌تر هستند. این فریم‌ورک با ارائه امکانات پیشرفته و بهینه‌سازی‌های خودکار، ابزار قدرتمندی برای توسعه‌دهندگان وب فراهم می‌کند.

  • بررسی مشکلات SEO در معماری React js
  • بررسی دلایل استفاده از Next js
  • بررسی معماری Next js
  • آشنایی با Page Router و App Router
  • آشنایی به next js compiler
  • Folder structure در پروژه های Next js
  • بررسی مزایای server side Rendering
  • مفهوم و پیاده سازی Static Generation
  • بررسی و پیاده سازی incremental static generation
  • بررسی مفهوم revalidate
  • مدیریت notFound و redirect
  • Client side Rendering در Next js
  • بررسی و پیاده سازی routing در Next js
  • مفهوم file based routing
  • مفهوم dynamic routing
  • کاربرد nested dynamic routing
  • Programmatically routing در Next js
  • استفاده از next Link ها در Routing
  • مفهوم relative routing و redirect
  • مدیریت خطاهای 404 و server side errors
  • استفاده از context در dynamic routing
  • متد get static path
  • متد get server side props
  • متد get static props
  • بررسی و استفاده از fall back
  • رابطه static generation و performance
  • مفهوم و کاربرد page ها
  • استفاده از Resource ها و assets ها
  • استفاده از custom font ها در Next Js
  • مفهوم global styling و css module ها در next js
  • UseRouter Hook
  • استفاده از file system در Next js
  • مفهوم path.join
  • مفاهیم caching و revalidating
  • مفاهیم server component ها و client component ها
  • مفهوم RSC Payload
  • layout ها
  • nested layout ها
  • route group ها
  • dynamic segment ها
  • pattern های مختلف برای data fetching در next js
  • caching در data fetching
  • time-based revalidation
  • on-demand revalidation
  • revalidatePath و revalidate tag
  • Static rendering و dynamic rendering وstreaming در app router
  • Build کردن پروژه های Next js
  • Publish کردن پروژه های next js روی vercel host
آموزش ری اکت روتر React Router

React Router یک کتابخانه محبوب برای مدیریت مسیریابی (routing) در برنامه‌های React است. مسیریابی به معنای تغییر view صفحه در واکنش به تغییر URL است، بدون نیاز به بارگذاری مجدد صفحه. در اینجا چند ویژگی اصلی React Router را به طور ساده توضیح می‌دهم:

  1. Routes: با استفاده از React Router، می‌توانید مسیرهای مختلفی را برای برنامه خود تعریف کنید. هر مسیر می‌تواند به یک کامپوننت خاص متصل شود. مثلاً اگر کاربر به /shoppingCart برود، کامپوننت ShoppingCart نمایش داده خواهد شد.
  2. Link: به جای استفاده از تگ‌های معمولی `< a>` برای لینک‌دهی، از کامپوننت `< Link>` استفاده می‌کنید که باعث می‌شود جابجایی بین صفحات بدون بارگذاری مجدد صفحه وب صورت گیرد.
  3. Route Parameters: می‌توانید route‌هایی تعریف کنید که پارامترهایی در URL بگیرند. مثلاً مسیری مانند /user/:id که در آن :id یک پارامتر متغیر است و می‌توانید به آن دسترسی داشته باشید.
  4. Redirects: می‌توانید کاربران را از یک مسیر به مسیر دیگری هدایت کنید. مثلاً اگر کاربری به مسیر /A برود، به صورت خودکار به /B هدایت شود.
  5. Protected Routes: می‌توانید Route‌هایی تعریف کنید که فقط در شرایط خاصی (مثل ورود کاربر) قابل دسترسی باشند.
  6. Lazy Loading: می‌توانید کامپوننت‌های خود را به صورت تنبل (lazy) بارگذاری کنید، یعنی فقط وقتی که لازم است، بارگذاری شوند. این کار باعث می‌شود برنامه سرعت بیشتری داشته باشد.
  7. 6React Router: با این ویژگی‌ها به شما امکان می‌دهد که برنامه‌های تک‌صفحه‌ای (SPA) پیشرفته و کارآمدتری بسازید، تجربه کاربری بهتری را فراهم کنید و کنترل بهتری بر ناوبری و مسیرهای برنامه خود داشته باشید.
  • آشنایی با سیستم routing در SPA
  • آشنایی با پکیج react-router-dom 6
  • کاربرد Browser Router
  • استفاده از Routes
  • کاربرد Route و Element و Path
  • پیاده سازی Nested Routing
  • پیاده سازی layout ها در react router
  • استفاده از parent route و sub route
  • استفاده از outlet ها
  • کاربرد Link ها
  • مدیریت خطای 404
  • کاربرد useParams hook
  • مفهوم و پیاده سازی index Route
  • مفهوم Active Link
  • کار با NavLink
  • دسترسی به Query String ها در URL
  • استفاده از Search Param
  • کار با QueryNavLink ها
  • کاربرد UseLocation
  • Programmatically Routing
  • Protect کردن route ها و protected route ها
  • کاربرد UseNavigate
  • بررسی روش جدید react router dom جهت پیاده سازی routing با استفاده از object ها
  • بررسی createBrowserRouter
  • Router Provider jsx
  • مفهوم children در react router
  • بررسی Data Loader در react router
  • مفهوم loader
  • بررسی Error Element
  • پیاده سازی Protected Route با استفاده از Object Router
  • بررسی redirect در React Router
Debugging در React - دیباگ کردن در ری اکت
  • استفاده از Break Pointها
  • کاربرد inspect source tab
  • استفاده از React Dev Toolsجهت Debug
  • Side Effect ها در React
  • بررسی مفهوم side effect
  • کاربرد های مختلف useEffect
  • useEffect Dependencies
  • کاربرد Cleanup Function
آموزش Side Effect ها در React
  • بررسی مفهوم side effect
  • کاربرد های مختلف useEffect
  • useEffect Dependencies
  • کاربرد Cleanup Function
مدیریت state ها با استفاده از Reducer
  • مفهوم stateهای complex
  • useReducer Hook
  • بررسی مفاهیم state و action
  • کاربرد dispatcher
  • کاربرد و پیاده سازی Reducer Function ها
  • مفهوم Action Type
  • استفاده از extra در action ها
برنامه نویسی Async
  • Code blocking در برنامه نویسی
  • بررسی مفاهیم sync و async
  • بررسی multi thread programming و parallel programming و concurrency
  • پیاده سازی call back function
  • بررسی مفهوم promise
  • مزایای استفاده از promise
  • مفاهیم life cycle در promise
  • مفهوم بلاک های then و catch
  • بررسی مفهوم resolve
  • استفاده از promise در حالت های مختلف
  • پیاده سازی promise.All
  • استفاده از Async / await در برنامه نویسی Async
  • پیاده سازی سیستم loading و استفاده از spinner ها
ارتباط با Rest Api و Server های Back End
  • چرا باید با Rest Api ارتباط داشته باشیم
  • آشنایی با متد های مختلف در Rest Api
  • کاربرد Fetch Api
  • ارسال request و دریافت response با استفاده از fetch Api
  • آشنایی با فرمت JSON و JSON Object و JSON Array
  • توابع converter برای JSON
  • دریافت داده های مختلف فروشگاه اینترنتی با استفاده از Fetch Api
  • حذف کالاها در فروشگاه اینترنتی با استفاده از Fetch Api
  • ثبت نام و login کاربران در فروشگاه اینترنتی با استفاده از Fetch Api
  • ویرایش اطلاعات کالاها با استفاده از Fetch Api
  • بررسی format های مختلف استفاده از متد های GET و POST و PUT و DELETE و ...
  • استفاده از Post man و thunder client برای تست و بررسی controller های rest Api
  • آشنایی با Axios قدرتمند ترین Rest Client جاوا اسکریپت
  • دریافت داده های مختلف فروشگاه اینترنتی با استفاده از Axios
  • حذف کالاها در فروشگاه اینترنتی با استفاده از Axios
  • ثبت نام و login کاربران در فروشگاه اینترنتی با استفاده از Axios
  • ویرایش اطلاعات کالاها با استفاده از Axios
آموزش ریداکس در ری‌اکت

استفاده از Redux در اپلیکیشن‌های توسعه‌یافته با React به دلایل زیر توصیه می‌شود:

  1. مدیریت مرکزی State‌ها: Redux با ذخیره و مدیریت state‌ها به صورت مرکزی، امکان مدیریت ساده‌تر و کارآمدتر state‌های پیچیده را فراهم می‌کند. این موضوع باعث می‌شود که هماهنگی بین بخش‌های مختلف اپلیکیشن بهتر و تغییرات به صورت پیش‌بینی‌پذیرتر انجام شود.
  2. Debugging آسان‌تر: **: با استفاده از Redux، تاریخچه تغییرات state‌ها به صورت ساده قابل ردیابی است. این امر با ابزارهای Debugging مثل redux-dev-tools به ما کمک می‌کند تا تحلیل و بررسی تغییرات state‌ها را به راحتی انجام دهیم.
  3. مدیریت داده‌های اشتراکی بین کامپوننت‌ها: در اپلیکیشن‌های React، اغلب نیاز است که داده‌ها بین کامپوننت‌های مختلف به اشتراک گذاشته شوند. Redux به ما این امکان را می‌دهد که این داده‌ها را به صورت بهینه و سازمان‌یافته مدیریت کنیم، به طوری که تمام کامپوننت‌های مربوطه به داده‌های مورد نیاز دسترسی داشته باشند.
  4. استفاده از redux-persist: : یک کتابخانه است که توسط Redux استفاده می‌شود و وظیفه ذخیره و بازیابی state‌های Redux را دارد. وظایف اصلی redux-persist شامل موارد زیر است:
    • ذخیره state‌ها در حافظه مرورگر: زمانی که state‌ها در Redux تغییر می‌کنند، redux-persist این state‌ها را در محلی مانند Local Storage یا Session Storage نگهداری می‌کند.
    • بازیابی state‌ها پس از بارگذاری مجدد صفحه: هنگامی که برنامه مجدداً اجرا می‌شود یا صفحه مجدداً بارگذاری می‌شود، redux-persist وضعیت قبلی Redux را از محل ذخیره‌سازی بازیابی کرده و آن را به Redux باز می‌گرداند تا از آن استفاده شود.

بنابراین، Redux یک ابزار مؤثر و قدرتمند برای مدیریت state‌ها در نرم‌افزارهای توسعه داده‌شده با React است. یادگیری و استفاده از Redux برای یک برنامه‌نویس React جزء الزامات محسوب می‌شود و می‌تواند به بهبود کارایی و سازمان‌دهی پروژه‌ها کمک شایانی کند.

  • بررسی دلایل استفاده از Redux
  • بررسی مشکلات props drilling
  • تفاوت Redux و React Redux
  • بررسی مفهوم Store
  • بررسی createStore
  • بررسی مفهوم Reducer
  • بررسی مفهوم Action و payload
  • کاربرد Provider
  • چرا باید از Redux Toolkit استفاده کنیم
  • configureStore
  • مفهوم و پیاده سازی slice ها
  • استفاده از UseSelector Hook
  • استفاده از UseDispatch Hook
  • بررسی Redux Middle Ware ها و کاربرد آنها
  • ایجاد middleware های سفارشی
  • تاثیر بر روی action ها با استفاده از Middleware
  • Redux-logger middleware
  • کاربرد تابع ComposeWithDevtools
  • Redux Thunk چیست و چه کاربردی دارد
  • برنامه نویسی Async در Redux
  • ایجاد Store های Redux Persist
  • Redux-persist Configuration
  • برقراری ارتباط بین local storage و Redux
  • برقراری ارتباط بین session storage و Redux
  • استفاده از redux dev tools جهت debugging
  • بررسی part های مختلف Redux Dev Tools
  • پیاده سازی سبد خریدفروشگاه اینترنتی با استفاده از Redux Toolkit و Redux Persist
پروژه هایی که در طول دوره پیاده سازی می شوند :
  1. پروژه فروشگاه خرید اینترنتی با استفاده از ReactJs

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

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

برنامه نویس فرانت کیست؟ (Front end developer)

برنامه نویس فرانت‌اند، عمل تولید کدهای HTML، CSS و جاوا اسکریپت برای یک وب‌سایت یا برنامه تحت وب است تا کاربر بتواند مستقیماً آنها را ببیند و با آنها ارتباط برقرار کند. چالش مرتبط با توسعه فرانت اند این است که ابزارها و تکنیک های مورد استفاده برای ایجاد قسمت فرانت اند یک وب سایت دائماً تغییر می کنند و بنابراین توسعه دهنده باید به صورت مداوم از نحوه توسعه و تغییرات این زمینه آگاه باشد.

هدف از طراحی سایت این است که اطمینان حاصل شود وقتی کاربران سایت را باز می کنند، اطلاعات را در قالبی می بینند که به راحتی قابل خواندن و مرتبط باشد. این امر با این واقعیت پیچیده تر می شود که کاربران اکنون از دستگاه های مختلف با اندازه و وضوح صفحه نمایش متفاوت استفاده می کنند و بنابراین طراح را مجبور می کند که این جنبه ها را هنگام طراحی سایت در نظر بگیرد.

فرانت کاران باید اطمینان حاصل کنند که سایتشان در مرورگرهای متفاوت؛ سیستم‌عامل‌های مختلف (کراس پلتفرم) و دستگاه‌های گوناگون(cross-device) به درستی نمایش داده می‌شود، که این مسئله نیاز به برنامه‌ریزی دقیق از سوی توسعه‌دهنده فرانت اند دارد.

یک توسعه دهنده فرانت اند مسئول بخش هایی از یک برنامه یا وب سایت است که کاربران می بینند و با آن تعامل دارند. یک توسعه‌دهنده بک‌اند از مسائلی مانند زیرساخت‌ها و پایگاه‌های داده پشتیبانی می‌کند. توسعه دهنده فول استک تمام مراحل کل فرآیند طراحی را از ابتدا تا انتها انجام دهد.

نقش ها و مسئولیت های برنامه نویس Front End

اگر می‌پرسید یک توسعه‌دهنده فرانت‌اند چه می‌کند، باید:

  • • طراحی ساختار صفحات وب
  • • بهبود تجربه کاربران
  • • ایجاد تعادل بین طراحی کاربردی و زیبایی شناختی
  • • مناسب بودن طراحی وب برای گوشی های هوشمند
  • • ایجاد صفحات پر سرعت و ریسپانسیو و....
تفاوت طراح سایت با Front End Developer

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

از جمله مهارتهایی که یک طراح سایت باید بداند تسلط بر Html ،CSS، JavaScript ،Responsive،jQuery که در راستای طراحی سایت به کار گرفته می شوند. یک طراح گرافیک ابتدا شمای کلی سایت شما را با نرم افزارهای گرافیکی مانند Adobe XD و یا Adobe Photoshop و...ایجاد می کند. در ادامه طراح سایت طرح ایجاد شده را به کد تبدیل می نماید.
مهارتهای مورد نیازی که یک طراح سایت باید داشته باشد به شرح زیر است:

  • 1. HTML
  • 2. CSS
  • 3. Responsive
  • 4. Media Query
  • 5. Flex
  • 6. Css Grid
  • 7. Bootstrap

این در حالی است که توسعه دهنده فرانت اند، تخصصی است که نیاز به برنامه نویسی قوی دارد. کلمه Developer به معنای برنامه نویسی است که کد نویسی سایتهای تک صفحه ای را انجام می دهد. یک برنامه نویس فرانت اند نیاز به داشتن مهارتهای زیر است:

  • 1. یک فریم ورک کامل همانند Angular.js که برای Front های پیچیده و حرفه ای کاربرد دارد .
  • 2. React
  • 4. Nextjs
  • 5. Sass
  • 6. Less
درآمد توسعه دهندگان Frontend

بسته به شرکت، توسعه دهندگان وب را می توان برای توسعه frontend، توسعه backend یا هر دو (به نام توسعه وب تمام پشته) استخدام کرد.

توسعه دهنده frontend

توسعه وب را می توان به دو بخش Frontend و Backend تقسیم کرد. هر ویژگی که کاربر در یک وب سایت با آن تعامل می کند، در قلمرو فرانت اند قرار می گیرد. شاید نظراتی مانند این شنیده باشید: توسعه Frontend مرده است. همه چیز در حال حاضر فول استک است. اولین سوال شما احتمالاً این است: "آیا در این زمینه شغلی پیدا خواهم کرد؟"

خوب باید بگوییم، اگر بیش از 22000 فرصت شغلی فهرست شده در سایت کار Indeed برای "توسعه دهنده فرانت اند" در ایالات متحده، یا بیش از 7500 فرصت شغلی در آلمان در مورد آن چیزی برای گفتن داشته باشند... این زمینه زنده و پر رونق است.

این رشته در طول سال ها بسیار پیشرفت کرده است. مهارت های مورد نیاز برای رقابت به عنوان یک توسعه دهنده frontend تغییر کرده است. بنابراین، توسعه دهندگان فرانت اند که با تغییرات تکامل نیافته اند ممکن است به میزان کمتری جذب بازار کار شوند. به عنوان مثال، آشنایی با حداقل یک فریمورک مانند React، Vue و Angular تقریبا یک ضرورت است. مردم دیگر فقط وب سایت های ساده نمی خواهند؛ بلکه آنها برنامه های تعاملی را می پسندند (وب سایت هایی با نقشه، دارای چت ربات، داشبورد کاربر، و به روز رسانی در زمان واقعی است).

چقدر می توانم به عنوان یک توسعه دهنده frontend درآمد کسب کنم؟

طبق داده‌های سایت کار Glassdoor، متوسط حقوق سالانه توسعه‌دهندگان فرانت‌اند در ایالات متحده 81283 دلار است و پاداش سالانه 6184 دلار در سال گنجانده شده است. این مبلغ البته بسته به ایالتی که در آن کار می کنید (یا به دنبال کار در آن هستید!) بسیار متفاوت است :

میانگین حقوق توسعه دهندگان فرانت اند در ایالات متحده

دستمزد یک توسعه‌دهنده فرانت‌اند تا حد زیادی به مکان و سطح شرکت و سابقه کاری بستگی دارد. ابتدا اجازه دهید به میانگین دستمزد توسعه‌دهندگان فرانت‌اند بپردازیم، سپس نگاهی به این می‌اندازیم که ارشد بودن و شرکت چگونه ممکن است بر حقوق شما تأثیر بگذارد.

  • سانفرانسیسکو، کالیفرنیا: 119010 دلار
  • بوستون، نیویورک: 112021 دلار
  • نیویورک: 116799 دلار
  • دالاس، تگزاس: 113593 دلار
  • دنور، CO: 113360 دلار
  • لس آنجلس، کالیفرنیا: 109284 دلار
  • آتلانتا، GA: 106686 دلار
  • شیکاگو، IL: 104692 دلار
  • سیاتل، WA: 101532 دلار
  • مینیاپولیس، MN: 100,835 دلار

همانطور که می بینید، توسعه دهندگان فرانت اند در سراسر ایالات متحده درآمد خوبی دارند.

میانگین دستمزد توسعه دهندگان فرانت اند در بریتانیا و ایرلند

متوسط حقوق یک توسعه دهنده فرانت اند در بریتانیا 54875 پوند در سال است. این حدود 20000 پوند بالاتر از میانگین حقوق ملی 29600 پوند در سال می باشد. متوسط حقوق یک توسعه دهنده فرانت اند در ایرلند 62326 یورو در سال است. میانگین دستمزد توسعه دهندگان فرانت اند به تفکیک شهر:

  • لندن: 65755 پوند
  • دوبلین: 62942 یورو
  • کاردیف: 47818 پوند
  • بلفاست: 52353 پوند
  • ادینبورگ: 47421 پوند
حقوق توسعه دهندگان فرانت اند در سایر کشورهای اروپایی
  • سوئیس: 101,655 CHF (حدود 104,309 یورو).
  • آلمان: 59.217 یورو. میانگین حقوق در آلمان 49.200 یورو است.
  • اتریش: 53.575 یورو. میانگین حقوق در اتریش حدود 45500 یورو است.
  • فرانسه: 44.083 یورو. میانگین حقوق در فرانسه 39.300 یورو است.
  • اسپانیا: 33.360 یورو. میانگین حقوق در اسپانیا حدود 24.100 یورو است.
  • ایتالیا: 29.973 یورو. میانگین حقوق در ایتالیا حدود 28500 یورو است.v
میانگین حقوق توسعه دهندگان فرانت اند در استرالیا

متوسط حقوق یک توسعه دهنده فرانت اند در استرالیا 124151 دلار استرالیا در سال است. این مبلغ بیش از 55000 دلار استرالیا بالاتر از میانگین حقوق که حدود 67860 دلار استرالیا در سال است، می باشد.
درآمد توسعه دهندگان frontend در شهرهای مختلف استرالیا:

  • کانبرا، ACT: 232671 دلار
  • بریزبن، QLD: 117040 دلار
  • پرث، WA: 108200 دلار
  • سیدنی، NSW: 133220 دلار
  • ملبورن، VIC: 122876 دلار
میانگین دستمزد توسعه دهندگان فرانت اند در نیوزلند

متوسط حقوق یک توسعه دهنده frontend در نیوزلند 95,309 دلار نیوزیلند در سال است. این مبلغ به طور قابل توجهی بالاتر از میانگین حقوق 58836 دلار نیوزیلند در سال است. اکنون بیایید بر اساس داده‌های Indeed، Glassdoor و Talent.com، حقوق توسعه‌دهنده frontend را برای شهرهای مختلف نیوزلند بررسی کنیم:

  • ولینگتون: 95309 دلار
  • اوکلند: 95309 دلار
  • همیلتون: 95309 دلار
  • کرایست چرچ: 58000 دلار
میانگین دستمزد توسعه دهندگان فرانت اند در هند

در هند، متوسط دستمزد توسعه دهندگان فرانت اند 470000 روپیه در سال (حدود 5884 دلار آمریکا) است. این مبلغ بالاتر از میانگین حقوق 387500 روپیه در سال (حدود 5000 دلار آمریکا) است. در ادامه نحوه تغییر دستمزد توسعه دهندگان ظاهری در شهرهای مختلف هند آمده است:

  • بنگالورو: 600000 روپیه (حدود 7500 دلار)
  • بمبئی: 532,548 روپیه (حدود 6,700 دلار)
  • حیدرآباد: 512,507 روپیه (حدود 6,400 دلار)
  • جیپور: 474437 روپیه (حدود 6000 دلار)
  • دهلی: 537917 روپیه (حدود 6700 دلار)
میانگین دستمزد توسعه دهندگان فرانت اند در برزیل

در برزیل، توسعه دهندگان فرانت اند به طور متوسط سالانه 81500 BRL (حدود 28300 دلار) حقوق دریافت می کنند. این میزان به طور قابل توجهی بالاتر از میانگین حقوق 103000 BRL است.

میانگین حقوق توسعه دهندگان فرانت اند در کانادا

متوسط حقوق توسعه دهندگان فرانت اند در کانادا 85965 دلار CAN در سال است. این مبلغ 30000 دلار بیشتر از میانگین حقوق 54630 دلار می باشد.

  • ونکوور، BC: 92227 دلار
  • تورنتو، ON: 89,719 دلار
  • کلگری، AB: 88797 دلار
  • مونترال، QC: 83935 دلار
  • کبک، QC: 66913 دلار
میانگین حقوق توسعه دهندگان فرانت اند در آفریقای جنوبی

متوسط حقوق یک توسعه‌دهنده فرانت‌اند در آفریقای جنوبی 512 070 ZAR در سال (حدود 30200 دلار آمریکا) است. میانگین حقوق 374000 ZAR است که توسعه دهندگان frontend را در رده بالاتر از میانگین قرار می دهد.

حقوق توسعه دهندگان Frontend

همانطور که از سطح مبتدی به ارشد در زمینه توسعه frontend حرکت می کنید، حقوق شما میزان قابل ملاحظه ای تغییر می کند.

  • حقوق توسعه‌دهنده سطح متوسط: 85389 دلار
  • حقوق توسعه دهندگان ارشد: 109,138 دلار
  • حقوق توسعه دهنده اصلی: 135,831 دلار
تفاوت برنامه نویسی فرانت اند و بک اند

اگر در دنیای کدنویسی و مهندسی نرم افزار تازه کار هستید، ممکن است با عباراتی مانند front end ، back end و فول استک کمی گیج شوید. توسعه دهندگان فرانت اند با در نظر گرفتن نیاز کاربر صفحات وبسایت را می سازند. توسعه فرانت اند سبکی از مهارتهای برنامه نویسی کامپیوتری است و بر کدنویسی و ایجاد عناصر و ویژگی های یک وب سایت تمرکز دارد که توسط کاربر دیده می شود. این توسعه دهندگان طرح های بصری را از طراحان UX و UI می گیرند و وب سایت را زنده و پویا می کنند.

توسعه Back end روی سمتی تمرکز دارد که کاربران نمی توانند ببینند. این ویژگی است که یک سایت را تعاملی می کند. به عنوان مثال، فرض کنید یک وب سایت رسانه اجتماعی را راه اندازی می کنید. شما به مکانی در دسترس برای ذخیره تمام اطلاعات کاربران خود نیاز دارید. این مرکز ذخیره سازی پایگاه داده نامیده می شود ؛ چند نمونه پرکاربرد عبارتند از Oracle، SQL Server و MySQL. پایگاه های داده از طریق یک سرور، که در اصل یک کامپیوتر راه دور است، اجرا می شوند.

یک توسعه دهنده Back End به مدیریت این پایگاه داده و همچنین محتوای سایت ذخیره شده در آن کمک می کند. این مرحله تضمین می‌کند که عناصر فرانت در وب‌سایت رسانه‌های اجتماعی شما می‌توانند به درستی کار کنند، زیرا کاربران محتوای آپلود شده و سایر پروفایل‌های کاربر را مرور می‌کنند.

توسعه Front end برنامه نویسی است که بر عناصر بصری یک وب سایت یا برنامه تمرکز می کند که کاربر با آن تعامل دارد (سمت client). در همین حال، توسعه back end بر روی قسمتی از وب سایت تمرکز می کند که کاربران نمی توانند ببینند (سمت server). این دو بخش با هم کار می کنند تا یک وب سایت پویا ایجاد کنند تا به کاربران امکان خرید، استفاده از فرم های تماس و هر فعالیت تعاملی دیگری که ممکن است در حین مرور یک سایت در آن شرکت کند، بدهد. برخی از نمونه‌های وب‌سایت‌های پویا عبارتند از Netflix، PayPal، Facebook و سایت Kenzie Academy که در حال حاضر در آن هستید.

وقتی در حال کدنویسی هستید، از یک زبان برنامه نویسی استفاده خواهید کرد. این زبان‌ها مانند زبان‌های انسانی به برنامه‌نویسان اجازه می‌دهند تا از طریق یک سری نمادها (که به آنها کد گفته می‌شود) با رایانه‌های خود ارتباط برقرار کنند. توسعه دهندگان فرانت اند در زبان هایی مانند HTML، CSS و جاوا اسکریپت متخصص هستند.

HTML مخفف Hyper Text Markup Language است. این زبان نشانه گذاری استاندارد برای ایجاد صفحات وب است. CSSمخفف عبارت Cascading Style Sheets است. در حالی که HTML برای ایجاد ساختار در یک سایت، CSS برای ایجاد استایل و ظاهر استفاده می شود.

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


فرانت اند نیز در مجموعه با فریمورکها و کتابخانه های خود کار می کند:

توسعه دهندگان Back end در زبان هایی مانند PHP، C++، Java، Ruby، Python، JavaScript و Node.js تخصص دارند.

آیا باید برای کار در حوزه فرانت اند برنامه نویسی ضروری است؟

پاسخ به این سوال قطعاً مثبت است. برای ورود به بازار کار در حوزه فرانت اند شما نیاز به دانش زبان های برنامه نویسی HTML، CSS ، Javascript دارید. در ادامه نیز برای ارائه کار و پروژه قوی با فریمورکهایی مانند ،Vue.js ،Angular.js Reac.js ، Bootstrap کار خواهید کرد.

آیا طراح گرافیک فرانت کار می شود؟

داشتن دانش در زمینه گرافیک و UI، UX به شما در زمینه طراحی فرانت کمک خواهد کرد اما نکته قابل توجه این است که کار در زمینه فرانت اند نیازمند تسلط به دانش برنامه نویسی در زمینه زبانها، فریمورکها و کتابخانه هایی است که پیش تر ذکر گردید. اما اگر علاقمند به حوزه کارهای گرافیکی هستید می توانید به عنوان طراح UI، UX وارد بازار کار شوید.

تفاوت فریمورک و لایبرری

فریم ورک جریان یک برنامه نرم افزاری را فراهم می کند و به توسعه دهنده می گوید که به چه چیزی نیاز دارد و کد ارائه شده را در صورت نیاز فراخوانی می کند. کتابخانه ها توابع و کلاس های از پیش تعریف شده ای را در اختیار توسعه دهندگان قرار می دهند تا کار آنها را آسان تر کرده و روند توسعه را تقویت کنند. از سوی دیگر، فریم ورک مانند پایه‌ای است که توسط آن، توسعه‌دهندگان برنامه‌های کاربردی را برای پلتفرم‌های خاص می‌سازند. درواقع می توان گفت که فریمورکها مجموعه ای از کتابخانه ها هستند و فریمورک کد شما را تعیین می نمایند.

تفاوت انگولار و ری اکت، vuejs

از نظر عملکرد تفاوت زیادی بین Angular js و Reactjs وجود ندارد. با این حال، Reactjs برای ایجاد برنامه های وب پویاتر و چند صفحه ای استفاده می شود. Reactjs جایگزین بهتری برای توسعه موبایل است زیرا چارچوب توسعه ای را ارائه می دهد که از برنامه های چند پلتفرمی پشتیبانی می کند.

React از اتصال داده یک طرفه و DOM مجازی استفاده می کند، در حالی که Angular از اتصال داده دو طرفه و DOM واقعی استفاده می نماید. علاوه بر این، React سریعتر از Angular است زیرا اندازه باندل کوچکتری دارد.

طبق نظرسنجی Stack Overflow، 40.13٪ از توسعه دهندگان معتقدند که React رایج ترین فریمورک جاوا اسکریپت است. Angular و Vue به ترتیب با 22.96% و 18.97% آن را دنبال می کنند.

Vue از DOM مجازی (VDOM) به عنوان یک مفهوم پذیرفته شده از React استفاده می کند. مانند React، Vue فقط اشیایی را به‌روزرسانی می‌کند که در DOM تغییر می‌کنند، بنابراین سرعت اجرای کد، سریع‌تر از Angular و شبیه به React است.

تفاوت های کلیدی بین Angular.js، React.js و Vue.js
معماری

Angular.js یک فریمورک MVC تمام عیار است که تمامی امکانات را برای برنامه نویسی در اختیار شما قرار می دهد:

  • قالب های مبتنی بر HTML؛
  • کپسوله سازی اجزای CSS؛
  • ایجاد فرم ها و...

از طرف دیگر، React.js کتابخانه ای است که به عنوان یک افزونه جاوا اسکریپت، از زبان JSX، که شبیه به XML است استفاده می کند.

Vue.js کتابخانه ای است که به شما امکان ایجاد رابط های تعاملی تحت وب را می دهد. Vue.js در درجه اول با لایه ViewModel معماری MVVM سروکار دارد. از اتصالات داده دو طرفه برای پیوست کردن View و Model استفاده می کند.

توسعه نرم افزارهای موبایل

React.js فریمورک مشابهی ندارد. React Native یک پلتفرم برای ایجاد برنامه های کاربردی موبایل است.

Vue پشتیبانی خود را از پروژه Weex ، که یک فریمورک رابط کاربری بین پلتفرمی است، اعلام کرده است. Weex به شما اجازه می دهد تا اجزای مرورگر و همچنین برنامه های iOS و Android را توسعه دهید.

سهولت یادگیری

در مورد کار با React.js، ابتدا باید JSX را یاد بگیرید، که بسیار ساده است. در مورد Angular ، مراحل بیشتری برای یادگیری وجود دارد. در مورد Vue.js، ویژگی های اساسی ممکن است در اولین برنامه های وب در کمترین زمان پیاده سازی شوند. درک Vue ساده تر از Angular یا React است. علاوه بر این، عملکرد Vue، مانند استفاده از کامپوننت‌ها، با عملکرد Angular و React همپوشانی دارد.

سینتکس

Angular در TypeScript نوشته شده است، به این معنی که برای کار با این فریم ورک به زمان بیشتری برای یادگیری نیاز دارید. React از JSX استفاده می کند و توسعه دهندگان جاوا اسکریپت با آن آشنا هستند. دوره آموزش آن آسانتر است و نیازی به آمادگی زیادی ندارد. Vue.js از یک سینتکس قالب مبتنی بر HTML استفاده می کند که به شما امکان می دهد DOM نمایش داده شده را به داده ها پیوند دهید.

ادغام با کتابخانه ها

Angular یک فریمورک اساسی برای ساخت برنامه های کاربردی وب ارائه می دهد و به هیچ کتابخانه اضافی نیاز ندارد. React.jsمعمولا برای ساخت یک برنامه وب کافی نیست.

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

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

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

پیش نیاز دوره آموزش فرانت اند

قبل از شرکت دوره فرانت اند بهتر است دانش خوبی نسبت به HTML،CSS، جاوااسکریپت، بوت استرپ و... داشته باشید. به همین جهت پیشنهاد می کنیم ابتدا در دوره آموزش طراحی سایت آموزشگاه تحلیل داده شرکت نمایید. همچنین اگر در زمینه زبان های برنامه نویسی هیچ گونه اطلاعاتی ندارید نیز می توانید قبل از شروع آموزش برنامه نویسی در" دوره منطق و مقدمات برنامه نویسی" ثبت نام نمایید. شرکت در این دوره موجب می شود در یادگیری زبان برنامه نویسی مورد نظر خود سریعتر پیشرفت کرده و مباحث پیچیده را فرابگیرید.

چه مدت زمانی طول می کشد تا فرانت کار شوم؟

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

آموزش رایگان فرانت اند (مقدماتی تا پیشرفته)

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

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

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

شایان خلج
مدرس دوره

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

گواهی پایان دوره

هنرجویان عزیز، مدرک آموزشگاه تحلیل داده، مدرک رسمی از سازمان فنی و حرفه‌ای می‌باشد. دانشجویان پس از پایان دوره با ارائه پروژه کاربردی خود به آموزشگاه و پس از تایید استاد دوره گواهی پایان دوره خود را دریافت می‌نمایند.

مشاهده نمونه مدرک
همین حالا ثبت نام کن!

آخرین اخبار وبلاگ

Node.js چیه و چرا همه عاشقشن؟

Node.js چیه و چرا همه عاشقشن؟

اگه تا حالا اسم Node.js به گوشت نخورده، داری یکی از خفن‌ترین ابزارهای برنامه‌نویسی رو از دست می‌دی! اینجا می‌فهمی چرا برنامه‌نویس‌های حرفه‌ای عاشق Node.js هستن و چطور می‌تونی تو کمترین زمان باهاش پروژه‌های واقعی و حرفه‌ای بسازی. این راهنما، از نصب تا ساخت اولین پروژه، همه چیز رو بهت یاد می‌ده

یادگیری عمیق چیه که همه دارن در موردش حرف می‌زنن؟!

یادگیری عمیق چیه که همه دارن در موردش حرف می‌زنن؟!

اگر برات سوال شده که یادگیری عمیق (Deep learning) دقیقاً چیه و چرا اینقدر همه جا صحبتش هست، جای درستی اومدی! از باز کردن قفل گوشی با تشخیص چهره گرفته تا ماشین‌های بدون راننده و حتی تشخیص بیماری‌ها، این فناوری داره بی‌سروصدا دنیا رو متحول می‌کنه. نگاهی بندازیم به اینکه چطور یادگیری عمیق داره دنیامون رو تغییر می‌ده و چقدر بیشتر از اون چیزی که فکر می‌کنیم توی زندگیمون نقش داره!

بازی تلگرام که پول میده

بازی تلگرام که پول میده

در دنیای ارزهای دیجیتال، بازی‌های تلگرامی به عنوان یکی از بهترین روش‌ها برای کسب درآمد شناخته شده‌اند. این بازی‌ها علاوه بر سرگرمی، فرصتی برای کسب ارز دیجیتال فراهم می‌کنند. اگر به دنبال بازی تلگرامی که پول می‌دهد هستید، این مقاله به معرفی چند نمونه از این بازی‌ها می‌پردازد.

داده‌ها را به پول تبدیل کن: هنر تحلیل داده‌ها!

داده‌ها را به پول تبدیل کن: هنر تحلیل داده‌ها!

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

مشاهده موارد بیشتر
سوالات متداول
آیا پس از پایان دوره نیز برای دانشجویان رفع اشکال انجام می گردد؟
بله شماره تلفن استاد دوره در اختیار عزیزان می باشد و دانشجویان در صورت برخورد با مشکلی می توانند از طریق تماس یا واتس اپ اقدام به رفع اشکال بنمایند.
آیا پس از گذراندن این دوره به مراکز کاری معرفی می شوم؟
دوست عزیز معرفی شما به مراکز کاری بدون دریافت حق معرفی و دلالی توسط آموزشگاه به رایگان انجام می شود. ولی شرط معرفی شما این است که در طول دوره پروژه حود را به صورت کامل و بدون ایراد تحویل استاد دوره بدهید تا بطور رایگان معرفی شوید.
آیا این دوره صرفا تئوری است یا عملی و پروژه محور است؟
این دوره 100 درصد عملی و کاربردی و کاملا پروژه محور است. لابد می پرسید چگونه؟ در ابتدای دوره برای هر یک از دانشجویان یک پروژه تعیین می گردد و هر دانشجو پس از تدریس هر بخش توسط استاد، مکلف به اجرای بخشی از این پروژه خود خواهد بود. هر یک از این پروژه ها توسط مدرس دوره بررسی و رفع اشکال می گردد. دریافت گواهی پایان دوره دانشجویان مشروط بر ارائه پروژه خوب و رفع ایرادات احتمالی با راهنمایی استاد، در مورد پروژه می باشد.
من شهرستان هستم، آیا می توانم در کلاس های شما شرکت کنم؟
بله، از آنجا که کلاس های ما بصورت آنلاین هم برگزار می شوند، این بستر را برای تمامی دوستان خارج از تهران فراهم کرده ایم که بتوانند در تمامی دوره های حرفه ای و تخصصی ما شرکت کنند.
پشتیبانی و پاسخگویی به دانشجویان در حین دوره چگونه است؟
به توجه به اینکه دوره به صورت حضوری/آنلاین یعنی ترکیب هر دو حالت برگزار می گردد، بنابراین دانشجویان در حین برگزاری دوره می توانند به صورت مرتب سرکلاس و یا از طریق گروه whatsapp با استاد دوره در تماس باشند، و مدرس دوره پاسخگوی شما عزیزان خواهند بود.

نظرات شما

برای ارسال سوال لازم است، ابتدا وارد سایت شوید.
آموزش برنامه نویسی محمدرضا افروزی 1403/07/06
پرداخت شهریه

آیا امکان پرداخت اقساطی شهریه هست؟

آموزش برنامه نویسی ادمین 1403/07/08

سلام آقای افروزی عزیز، لطفاً برای هماهنگی جهت پرداخت اقساطی شهریه دوره با آموزشگاه تماس بگیرید.

آموزش برنامه نویسی شهریار شرفی 1401/11/08
React

با سلام وخسته نباشید آیا امکان برگزاری کلاس react js بصورت جدا وجود دارد؟

آموزش برنامه نویسی ادمین 1402/01/28

سلام کاربر گرامی . این دوره ،در اصل دوره ReactJs می باشد ولی چون بعد از اتمام این دوره دانش پژوهان بتوانند وارد بازار کار شوند حتما موارد دیگر هم باید یاد بگیرند که در این دوره آموزش داده میشود.

آموزش برنامه نویسی کامران شرفی 1401/10/09
دوره آموزش فرانت اند

داشتن مهارت برنامه نویسی فرانت اند برای مهاجرت مناسب هست؟

آموزش برنامه نویسی ادمین 1401/10/11

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

آموزش برنامه نویسی شهلا محمدی 1401/10/08
دوره آموزش فرانت اند

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

آموزش برنامه نویسی ادمین 1401/10/11

سلام وقت بخیر خوشحالیم که دوره واستون مفید بوده بله پرژه ای که در حین دوره بهتون داده میشه کامل و حرفه ای هست.

آموزش برنامه نویسی کیارش محمدجانی 1401/10/08
دوره آموزش فرانت اند

بعد از گذراندن این دوره ، مدرک معتبری هم صادر میشه ؟؟؟

آموزش برنامه نویسی ادمین 1401/10/11

سلام دوست گرامی بله در پایان دوره مدرک فنی حرفه ای و قابل ترجمه دریافت خواهید کرد.

آموزش برنامه نویسی یاسر نجفی 1401/10/08
دوره آموزش فرانت اند

سلام فرق دوره آموزش طراحی سایت با فرانت اند چی هست؟

آموزش برنامه نویسی ادمین 1401/10/11

سلام وقت بخیر در دوره طراحی سایت آموزشگاه تحلیل داده ، مواردی مانند HTML CSS Responsive Media Query Flex Css Grid Bootstrap رو آموزش می بینید اما در دوره آموزش فرانت اند یا فریم ورک پرطرفدار و قوی ری اکت مشغول به کار خواهید شد و پروژه های حرفه ای ایجاد خواهید کرد.

آموزش برنامه نویسی مجید چهرازی 1401/09/19
نحوه پرداخت شهریه

شهریه کلاس را از چه طریقی می توانم پرداخت کنم

آموزش برنامه نویسی ادمین 1401/09/22

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

آموزش برنامه نویسی کاربر میهمان 1399/05/16
کلاس عالی، حال عالی

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

آموزش برنامه نویسی ادمین 1399/05/16

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

آموزش برنامه نویسی پویان سلمانی 1401/08/23

بله واقعا جذاب بود

آموزش برنامه نویسی حدیثه افشاری 1399/04/31
مدت زمان

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

آموزش برنامه نویسی ادمین 1399/04/31

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

آموزش برنامه نویسی کاربر میهمان 1398/10/04
خريد پكيج اموزشي دوره front end

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

آموزش برنامه نویسی ادمین 1398/10/04

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

این دوره به سبد خرید اضافه شد
دوره آموزش Front End - به همراه ReactJs 8,000,000
رفتن به سبد خرید