Бүх сургалт ХУГАЦААГҮЙ буюу НАСАН ТУРШИЙН!

2013 онд Фэйсбүүк компани зөвхөн дотооддоо ашиглаж байсан нэгэн гайхалтай төслийг нээлттэй болгож дэлхийд зарласнаар вэб програмчлалын ертөнц гэнэт орвонгоороо эргэсэн юм. React хэмээх энэхүү Front-End library нь DECLARATIVE болон REACTIVE програмчлалын архитектур дээр үндэслэгдсэнээрээ бусдаас эрс ялгаатай байсан бөгөөд аварга том төслүүдийг ч хүндрэлгүй гүйцэтгэх боломжтой байснаараа дэлхий нийтийн анхаарлыг татсан юм. React-ийн энэ өвөрмөц дизайан нь тухайн үед алдартай байсан AngularJS зэрэг фрэймворкуудыг өөрсдийн архитектурыг эргэн харж, бүрэн өөрчлөгдөхөд хүргэжээ. Улмаар React-аас урам зориг авч бүтээгдсэн Angular, VueJS зэрэг фрэймворкууд гарч мөн л богино хугацаанд React-ийн дараа дэлхийд эрэмбэлэгдэн жагссан юм.

Өнөөдрийн байдлаар React програмистын цалин АНУ-д сарын 10,000$ - 15,000$ болжээ. Linkedin Jobs, Indeed, Glassdoor зэрэг дэлхийн топ ажлын байрны сайтуудын жагсаалтанд React хөгжүүлэгч хамгийн эрэлттэй байна. Хэрэв та вэб девелопер л бол React таны №1 эзэмшсэн байх ёстой хэрэгслүүдийн нэг болсонд гайхах зүйлгүй.

Та энэхүү гайхалтай фрэймворкийг эзэмшсэнээр нэг дор олон төрлийн програм бүтээх чадвартай болно. Жишээ нь програмистууд React-ийг react-dom library-тай хамт ашиглан вэб апп бүтээдэг бол react-native library-тай ашиглан iOS болон андройд апп, React 360 library-тай ашиглан виртуаль риалити апп, react-native-windows library-тай ашиглан Windows Desktop аппуудыг бүтээх боломжтой. Иймээс React вэб хөгжүүлэгч нь сурсан React мэдлэгээ ашиглаад ухаалаг утасны апп эсвэл desktop програм хөгжүүлэх боломжтой болсон байна гэсэн үг юм! Чухам үүнд React экосистемийн гол давуу тал оршиж байгаа билээ.

Энэ сургалтыг судалснаар та React-ийг бүрэн эзэмшихээс гадна нэгэн онлайн захиалгын вэб аппыг React + Redux + Thunk + Context API + Hooks + Firebase + REST технологиуд ашиглан эхнээс нь дуустал дагаж хийж үзэх болно. Backend талд бид Google-ээс гаргасан Firebase-ийг ашиглах тул танаас өгөгдлийн сан, сэрвэр талын мэдлэг шаардагдахгүй.

Сургалтыг үзэхэд юу шаардлагатай вэ?
Тэгэхээр энэхүү React сургалтыг чөлөөтэй үзэхийн тулд танд орчин үеийн Javascript-ийн цэгцтэй мэдлэг хэрэг болох болно. Учир нь сургалтын явцад бид класс, объект, first class функц, объект болон массивыг destructure хийх буюу задлах, spread оператор, суман функц, ES6 модул...зэрэг ES6 болон түүнээс дээшхи Javascript ойлголтуудыг алхам тутамдаа хэрэглэх юм. Хэрэв та өөрийн Javascript мэдлэгийг хангалттай биш гэж бодож байвал 1234.mn дээр байгаа "JAVASCRIPT хэлийг эхнээс нь дуустал!" сургалтыг эхлээд судлахыг зөвлөж байна.

Харин Javascript хичээлийг судалсан сурагчиддаа хандан хэлэхэд: хичээл дээр сурсан зүйлсээ бодит амьдралд хэрхэн хэрэгжүүлдгийг харж суралцах гайхалтай боломжийг энэ сургалт танд олгох болно. Дээр нь энэ сургалтыг эзэмшиж дуусгасны дараа та ямар ч програмын компанид React Front-End developer гэдэг нэр хүндтэй ажилтнаар орох бүрэн боломжтой болно гэдгийг хэлэхэд таатай байна!


Ингээд хамтдаа React-ийн гайхалтай ертөнцийг нээцгээе!


   Хичээлүүд :   

  1. 34:36
    Энэ сургалтаар та юу сурч эзэмших вэ?
  2. 33:18
    React гэж юу вэ? React-ийн түүх, React-ийг яагаад сурах ёстой вэ?
  3. 31:48
    DOM, SSOM гэж юу вэ? DOM parsing процессийн цаана юу болдог вэ? Яагаад вэб гарч ирэх гэж уддаг вэ?
  4. 25:09
    React-ийн цаана байх философи : UI Library
  5. 18:25
    React-ийн цаана байх философи : Үнэний нэг эх үүсвэр
  6. 30:07
    React-ийн цаана байх философи : Өгөгдлийн нэг чигт урсгал
  7. 32:04
    React-ийн цаана байх философи : Declarative, Reactive, Virtual DOM ойлголтууд
  8. 36:02
    Хамгийн анхны React апп #1-р хэсэг! Роботуудын хайлтын апп, codesandbox.io танилцуулга
  9. 12:51
    Хамгийн анхны React апп #2-р хэсэг! card компонент, хайлт гүйцэтгэх, хэлбэржүүлэлт дуусгах
  10. 20:45
    Хамгийн анхны React апп #3-р хэсэг! Хайлт хийх
  11. 07:11
    codesandbox.io ашиглан кодыг fork хийж хадгалж авах
  12. 30:18
    VS Code editor суулгах, тохируулах
  13. 15:13
    VS Code Extension суулгах, тохируулах
  14. 30:55
    git гэж юу вэ? gitbash суулгах
  15. 29:13
    git үндсэн командууд, git init, status, add, commit, checkout, push, pull командууд
  16. 18:41
    git тохиргоо, github холбох
  17. 17:36
    NodeJS, npm гэж юу вэ?
  18. 33:34
    Creacte-react-app ашиглан project үүсгэх, npx, npm ашиглах
  19. 15:08
    Компонент гэж юу вэ? Түүний үүрэг, бүтэц
  20. 29:08
    Функц ашиглан компонент бичиж үзэх /хичээлийн файлыг хавсаргасан/
  21. 24:17
    Класс ашиглан компонент бичих /код хавсаргасан/
  22. 25:05
    Компонентод болон React вэб сайтад CSS хэлбэржүүлэлт хийх нь, build процессийн цаад дүр төрх
  23. 17:34
    Функц компонент дотор useState hook ашиглан дотоод төлөвтэй ажиллах, default болон named export
  24. 17:23
    React developer tool-тэй танилцах, классын байгуулагч функцэд props дамжуулах шаардлагатай юу?
  25. 15:45
    React компонентууд хэзээ, хэрхэн РЕНДЕР хийгддэг вэ
  26. 13:31
    React компонентууд яаж RENDER хийгдэж байгааг код дээр харцгаая
  27. 13:56
    Классын амьдарлын циклийн функцүүдтэй танилцая : componentDidUpdate ...
  28. 23:53
    Амьдарлын циклийн функцүүдийг кодоор туршиж үзэцгээе, Comment-ийг хаах товч нэмэх
  29. 16:06
    Сургалтаар хийх апптайгаа танилц : Онлайн бургер захиалгын SPA
  30. 14:53
    Онлайн бургер захиалгын аппын компонентуудыг төлөвлөе !
  31. 18:21
    Burger Project үүсгэж хавтаснуудын зохион байгуулалтыг хийх
  32. 23:16
    CSS Module ашиглах, Toolbar компонентийг хэлбэржүүлэх
  33. 07:36
    Burger болон BurgerIngredient компонентуудыг хөгжүүлэх
  34. 24:15
    Онлайн бургер захиалгын аппын CSS-ийг бичицгээе!
  35. 17:12
    Burger болон BurgerIngredient компонентуудын CSS хэлбэржүүлэлт
  36. 26:06
    Хачиртай талхны орцыг динамикаар дүрслэх нь
  37. 34:25
    Хачиртай талхны орцыг оруулах BuildControls, BuildControl компонентийг бичих
  38. 16:19
    Орцыг хасах товч, захиалсан бургерийн үнийн дүнг үзүүлэх хэсгийг хийцгээе!
  39. 06:06
    Захиалгын нийт дүнг үзүүлэх
  40. 22:44
    Захиалга хийх товчийг нэмэх, кодын нэмэлт засварууд
  41. 12:59
    Захиалгыг баталгаажуулах модал цонхыг хийцгээе!
  42. 14:14
    Модал дотор OrderSummary компонентийг хийцгээе!
  43. 18:40
    Модал цонхыг динамикаар гаргаж ирэх
  44. 15:10
    Shadow компонентийг бичиж Модал цонхонд оруулцгаая
  45. 15:16
    Button компонентийг бичиж OrderSummary компонентод ашиглацгаая
  46. 14:51
    Logo компонентийг хийж Toolbar компонентод ашиглах, serve ашиглан production build кодыг ажиллуулах
  47. 17:32
    Цэс буюу Menu, MenuItem компонентууыг програмчилцгаая
  48. 18:01
    SideBar компонентийг програмчилцгаая
  49. 20:19
    SideBar компонентыг анимацитайгаар гаргаж ирэх, App компонентийг класс компонент рүү хөрвүүлэх
  50. 18:25
    HamburgerMenu компонентийг бичих, Shadow дээр дарахаар SideBar арилгах
  51. 42:44
    Firebase гэж юу вэ буюу SERVERLESS програмчлалын эринд тавтай морил!
  52. 24:10
    Firebase дээр project үүсгээд axios ашиглан анхныхаа захиалгыг хадгалж үзэцгээе!
  53. 22:53
    Firebase базаас axios ашиглан захиалгыг уншиж авах, хачиртай талхыг сэрвэр дээрх захиалгаар буцааж угсрах
  54. 22:14
    Firebase базаас унших, бичих үед Spinner үзүүлэх
  55. 23:33
    Хэрхэн хуудас хооронд шилжих вэ, React Router танилцуулга
  56. 28:03
    1234.mn сургалтын сайтыг React ашиглан бүтээх нь, 1234.mn платформын Backend service-үүдтэй танилцах, тэдгээрийг дуудах
  57. 26:32
    1234.mn сургалтын дэлгэрэнгүйг үзүүлэх Course компонентийг бүтээцгээе
  58. 25:46
    OrdersPage, Order компонентуудыг бүтээх
  59. 15:39
    Burger төсөлд React Router холбох, захиалгын хуудсыг линк дарж гаргах
  60. 30:00
    ShippingPage компонент болон URL param дамжуулах, withRouter компонент, хэрхэн back хийх вэ
  61. 26:01
    Contact компонентийг бичих, nested route ашиглах
  62. 08:34
    Хуудас/компонент хооронд шилжилт буюу history хэрхэн ажилладаг вэ?
  63. 36:48
    ContactData компонентоос өгөгдлийг Firebase рүү хадгалах, компонент хооронд өгөгдөл дамжуулах
  64. 17:49
    PROPS DRILLING асуудалтай танилцая, Бургер дээр дуртай орцоо санал асуулгаар сонгох нь
  65. 12:22
    React аппд төлөвийн зохицуулалт яагаад төвөгтэй байдаг вэ, шийдэл нь REDUX!
  66. 29:36
    Аварга том систем бүтээц нууц ТААМАГЛАГДАХУЙЦ UI буюу PREDICTABLE UI
  67. 38:16
    Аварга том систем бүтээц нууц ТААМАГЛАГДАХУЙЦ ӨГӨГДӨЛ буюу FLUX АРХИТЕКТУР болон REDUX төлөвийн менежмент системийн философи
  68. 24:43
    REDUX архитектуртай дэлгэрэнгүй танилцая !
  69. 17:45
    Хэрэв REDUX-ийг өөрсдөө бүтээвэл яаж хийх байсан бэ? Кодлож үзье!
  70. 30:16
    REDUX суулгаж Burger төсөлд холбох, reducer үүсгэх BurgerPage компонентод Redux холболт хийж шалгах
  71. 25:48
    Хачиртай талханд орц нэмэх BurgerReducer-ийг бичих
  72. 22:23
    BurgerReducer-т хачиртай талхны орцыг хасах, бургерийн үнийг тооцоолох кодыг нэмэх BurgerActions.js файлыг бичих
  73. 16:38
    BurgerPage дээр ЗАХИАЛАХ товчийг ажилладаг болгох, зарим жижиг засваруудыг гүйцэтгэх
  74. 24:26
    BurgerPage компонентийг REDUX-аас салгаж Burger, OrderSummary, BuildControls, ShippingPage компонентуудыг REDUX-тай холбох өөрчлөлт
  75. 11:38
    ShippingPage, ContactData компонентийг REDUX тай холбох
  76. 16:30
    Middleware гэж юу вэ Анхны лог хийгч Middleware өөрсдөө бичиж үзэцгээе!
  77. 09:42
    REDUX DEVTOOL суулгах ашиглах TIME TRIVEL DEBUGGING гэж юу вэ?
  78. 36:12
    REDUX THUNK гэж юу вэ? OrderReducer, OrderAction бэлтгэх combineReducer ашиглан хоёр reducer-ийг нэгтгэн ажиллуулах
  79. 27:20
    REDUX THUNK суулгах, захиалгыг THUNK ашиглан FIREBASE сэрвэрээс захиалгуудыг татаж авах
  80. 13:31
    Захиалга хадгалах ACTION-уудыг үүсгэж ContactData компоненттой холбож турших
  81. 23:55
    Захиалга хадгалах хэсгийн кодыг дуусгах: REDUCER-ийн кодыг бичиж өгөх
  82. 18:33
    Burger аппдаа логин хийх бүртгүүлэх боломж нэмье Login, Signup компонентуудыг бэлтгэх
  83. 18:31
    REST API BACK-END технологитой танилц FIREBASE REST сэрвис ашиглах
  84. 23:52
    Signup компонентыг REDUX холболт хийж хэрэглэгчийг FIREBASE-д бүртгэе
  85. 23:26
    Signup компонент дээр бүртгүүлэх үед үүсэх FIREBASE алдааг үзүүлэх, signupReducer бичих, Redirect компонент ашиглан шилжих
  86. 20:58
    Login компонентийг REDUX-тай холбох , loginAction, loginReducer бичих
  87. 24:13
    Логин хийсний дараах цэснүүдээ тохируулах, LOG_OUT action, reducer бичих
  88. 25:40
    Хэрэглэгчийн зөвхөн өөрийнх нь захиалгыг шүүж харуулах, FIREBASE collection дээр индекс тавиж query илгээх
  89. 13:08
    FIREBASE талд хамгаалалт тавих, token ашиглаж хамгаалалттай документууд руу хандах
  90. 25:05
    Refresh хийхэд логин мэдээлэл алга болж байгаа асуудлыг шийдэх нь Token-ийг LocalStorage-д хадгалж ашиглах
  91. 16:09
    SignupAction –ийг LocalStorage тэй холбох, аппын кодыг debug хийх
  92. 30:01
    Токений хугацаа дуусахад автоматаар logout хийх нь, хугацаа нь дууссан токенийг шинэчлэх
  93. 10:43
    Burger аппаа github дээр байрлуулж gitpage ашиглан онлайн болгох
  94. 15:13
    Burger аппаа FIREBASE HOST дээр байрлуулж ажиллуулцгаая
  95. 26:01
    REACT ертөнцөд супер боломж олгосон REACT HOOKS тэй танилц!
  96. 21:21
    useState hook ашиглан Burger төслийн класс компонентуудыг функц компонент болгон хувиргацгаая
  97. 27:02
    useEffect hooks гэж юу вэ, ажиллах зарчим Учир шалтгаан, үр дагаварын хууль :) ShippingPage, LoginPage компонентуудыг функц компонент болгон хөрвүүлэх
  98. 14:03
    useEffect hooks ашиглан ContactData компонентийг функц компонент руу хөрвүүлэх
  99. 37:26
    useEffect цэвэрлэгч функцийг ойлгох нь ContactData компонент дээр цэвэрлэгч функц ашиглах
  100. 11:41
    useEffect ашиглан App, OrderPage, Logout компонентуудыг функц компонент руу хөрвүүлэх
  101. 25:30
    useEffect hooks нэмэлт мэдээлэл, жижиг засвар, SignupPage өөрөөр бичиж үзэх
  102. 07:04
    useRef hooks гэж юу вэ? Бургер төсөлд useRef ашиглан текстийн өнгийг солих
  103. 10:27
    Javascript файлуудыг хэрэгтэй үед нь л ачаалах буюу React.lazy, Suspence ашиглан Lazy loading гүйцэтгэх
  104. 24:16
    Context API гэж юу вэ? Context Provider болон useContext Hook хэрэглэн контекстээс унших, бичих
  105. 14:30
    Context API болон useContext, useState hook хэрэглэн Burger компонентийг REDUX-аас hooks рүү шилжүүлцгээе!
  106. 16:56
    App, Burger, BuildControl компонентуудыг REDUX-аас hooks рүү шилжүүлцгээе!
  107. 15:40
    BurgerStore дээр үнэ, болон бусад төлөвүүдийг нэмэх, BuildControls компонентийг REDUX-с салгах
  108. 25:44
    OrderSummary, ShipPage, ContactData компонентуудыг REDUX-с салгаж Context, Hooks рүү хөрвүүлэх
  109. 21:24
    OrderPage компонентийг REDUX-с салгаж Context, Hooks рүү хөрвүүлэх
  110. 06:36
    useHistory hooks хэрэглэн өөр route руу үсрэх
  111. 20:22
    UserContext контекстийг бичиж SignupPage, App компонентуудыг хөрвүүлэх
  112. 18:58
    LoginPage, Logout, Menu компонентуудыг REDUX-с салгаж контекст болон hooks рүү аппыг бүрэн шилжүүлж дуусгах
  113. 08:31
    Өөрийн захиалгыг Firebase-с унших, бичих, автомат логинийг ажиллуулах
  114. 13:13
    Апп эхлэх үед localStorage шалган автоматаар логин хийх
  115. 18:33
    Токены хугацаа дуусахад автоматаар токеноо Firebase сэрвэрээс шинэчилж авдаг болгох
  116. 16:15
    useMemo hooks ашиглан рендэр дээр оптимизаци хийх нь
  117. 24:53
    REDUX VS Context + Hooks Аль нь дээр вэ? Цаашаа юу үзэх хэрэгтэй вэ?
  118. 18:54
    AdminLTE темплэйтийг React сайтад холбож ашиглах нь
  119. 19:37
    AdminLTE темплэйт бүхий React сайтад DataTable компонент хийцгээе!
199,000    32,000

Худалдаж авах

== Сурагчдын сэтгэгдлүүд ==

h
Энхсайхан, 2020-07-08 10:47:49
...
Batjargal, 2020-07-03 00:47:19
mash sain surgalt boljee
Ochirpurev, 2020-06-19 15:41:34
Good one
Нурбол, 2020-06-18 19:08:43
Thanks.
Баянбаатар, 2020-06-12 14:42:53
Vnexeer oilgomjtoi tailbarlaj zaaj baina. Omno ni oyutan baixdaa vzej baisan odoo dutuugaa noxoj bga yum shig l bolloo
Enkhtur, 2020-06-02 13:58:40
thanks a lot, good luck
Norovsuren, 2020-06-01 19:06:06
sain
Gooyo, 2020-05-18 16:52:09
Маш их баяртай байна.Хүсэн хүлээсэн ёургалт маань мөн байж чаваж байна.Бас их ойлгомжтой сурахад ямар нэгэн хүндрэл гарахгүй байна.Амжилт хүсье.
Гандуулга, 2020-05-13 11:59:39
(y)
Билигт, 2020-05-12 09:27:13
uneheer gaihaltai
Содбилэг, 2020-05-11 18:40:33
одоо л эхлэж байна
Б. Хашбаатар, 2020-04-20 17:51:02
Маш их таалагдаж байгаа. 1234-н хамт олондоо, багш нартаа баярлаж байгаа шүү!
Нэг үсэг яаж бичихийг заасан л бол багш болдог гэдэг шиг... энэ их мэдлэгийг хуваалцаж байгаад баярлалаа.
Tuvshintuguldur, 2020-04-19 03:41:56
Nice course
Баяржаргал, 2020-04-18 20:41:06
Nice course
Баяржаргал, 2020-04-18 20:40:43
сайхан байна аа цаг хугцаа хэмнээд та бүхэндээ баярлалаа
Лхагваням, 2020-04-18 14:20:14
Гайхалтай сургалт байлаа Баярлалаа.
Баяржаргал, 2020-04-16 12:05:33
good job!
Purevdalai, 2020-04-15 14:10:11
Well
Cherno, 2020-04-08 18:25:25
Bi it chigleleer ooriigoo hogjuulehiig ih hicheedeg. Gehdee bi tsaashid front end developer chigleliig sonirhoj bga. Tiim uchir ene surgalt nadad mash ih medlegiig ogoh todiigui tsaashid haachih we gedgiig chigluulj ogch bga. bayarlalaa 1234.mn
Баяржаргал Цолмон, 2020-04-01 18:44:29
Сайн сургалт гэж үзэж байгаа. Амарбат багшийн заах арга барил, хичээлийн сэдвүүд нь үнэхээр таалагдаж байгаа. Дараа дараачийн хичээлүүдийг үзнэ гэж төлөвлөсөн байгаа.
Амаржаргал, 2020-03-28 11:30:10
ok
Мөнхбилэг, 2020-03-25 22:16:45
Myagmarnaran, 2020-03-25 01:56:38
Үнэхээр таалагдаж байгаа баярлалаа
Б. Батхуяг, 2020-03-25 00:53:24
Баярлалаа
Цэдэнсодном, 2020-03-24 13:32:31
Энэ хичээл маш ойлгомжтой мөн эх хэлээрээ учраас зарим дутуу ойлголтуудыг засаж сайжруулахад маш их тус нэмэр болж байгаа сайн сургалт байна. Энэ хичээлийг зааж байгаад багшдаа маш их баярлалаа. :)
Ugtakhbayar, 2020-03-24 11:34:39
Үнэхээр сайн ойломжтой зааж байна баярллаа
Мишээл, 2020-03-23 18:10:00
Jjj
Narangerel, 2020-03-23 14:12:57
Сургалт их таалагдлаа. Баярлалаа
Khurelbaatar, 2020-03-23 08:37:49
Сургуульд нь сурсан юм шиг л байна. Үнэхээр сэтгэлээсээ ойлгомжтой тайлбарлаж байгаад маш их баярлалаа
Gantulga, 2020-03-21 23:33:13
Sonirholt bgaa unheer goe harin hiih zuiluud maani 100 110 video.d bagtah boluu gaihaad bgaa heheheh amjil
ID, 2020-03-21 22:28:10
сайн сургалт хүүк, contxt api zaagdahuu
Ta Sa, 2020-03-21 15:01:25
thanks.
Насанбат, 2020-02-16 19:31:57
Супер.
zob, 2020-02-16 17:05:25
Ойлгомжтой баярлалаа
Отгонбаяр, 2020-02-16 14:09:23
Тухайн сургалтыг авсандаа маш их сэтгэл хангалуун байна. Хол хорионы үеэр чухал хичээлийг онлайнаар эзэмших боломж олгосон 1234.mn-ийхэндээ баярлалаа. Мөн тухайн сургалтыг үзхийг зорьж байгаа ирээдүйн инженер залуучууддаа худалдаж аваасай гэж зөвлөж байна. Хичээл зааж байгаа арга барил хүнд ойлгуулж байгаа нь үнэхээр их таалагдаж байна.
Анар-Эрдэнэ, 2020-02-06 22:53:06
Nice
Jamba, 2020-02-06 21:22:55