Бүх сургалт ХУГАЦААГҮЙ буюу НАСАН ТУРШИЙН!
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-ийн гайхалтай ертөнцийг нээцгээе!
Хичээлүүд :
-
34:36Энэ сургалтаар та юу сурч эзэмших вэ?
-
33:18React гэж юу вэ? React-ийн түүх, React-ийг яагаад сурах ёстой вэ?
-
31:48DOM, SSOM гэж юу вэ? DOM parsing процессийн цаана юу болдог вэ? Яагаад вэб гарч ирэх гэж уддаг вэ?
-
25:09React-ийн цаана байх философи : UI Library
-
18:25React-ийн цаана байх философи : Үнэний нэг эх үүсвэр
-
30:07React-ийн цаана байх философи : Өгөгдлийн нэг чигт урсгал
-
32:04React-ийн цаана байх философи : Declarative, Reactive, Virtual DOM ойлголтууд
-
36:02Хамгийн анхны React апп #1-р хэсэг! Роботуудын хайлтын апп, codesandbox.io танилцуулга
-
12:51Хамгийн анхны React апп #2-р хэсэг! card компонент, хайлт гүйцэтгэх, хэлбэржүүлэлт дуусгах
-
20:45Хамгийн анхны React апп #3-р хэсэг! Хайлт хийх
-
07:11codesandbox.io ашиглан кодыг fork хийж хадгалж авах
-
30:18VS Code editor суулгах, тохируулах
-
15:13VS Code Extension суулгах, тохируулах
-
30:55git гэж юу вэ? gitbash суулгах
-
29:13git үндсэн командууд, git init, status, add, commit, checkout, push, pull командууд
-
18:41git тохиргоо, github холбох
-
17:36NodeJS, npm гэж юу вэ?
-
33:34Creacte-react-app ашиглан project үүсгэх, npx, npm ашиглах
-
15:08Компонент гэж юу вэ? Түүний үүрэг, бүтэц
-
29:08Функц ашиглан компонент бичиж үзэх /хичээлийн файлыг хавсаргасан/
-
24:17Класс ашиглан компонент бичих /код хавсаргасан/
-
25:05Компонентод болон React вэб сайтад CSS хэлбэржүүлэлт хийх нь, build процессийн цаад дүр төрх
-
17:34Функц компонент дотор useState hook ашиглан дотоод төлөвтэй ажиллах, default болон named export
-
17:23React developer tool-тэй танилцах, классын байгуулагч функцэд props дамжуулах шаардлагатай юу?
-
15:45React компонентууд хэзээ, хэрхэн РЕНДЕР хийгддэг вэ
-
13:31React компонентууд яаж RENDER хийгдэж байгааг код дээр харцгаая
-
13:56Классын амьдарлын циклийн функцүүдтэй танилцая : componentDidUpdate ...
-
23:53Амьдарлын циклийн функцүүдийг кодоор туршиж үзэцгээе, Comment-ийг хаах товч нэмэх
-
16:06Сургалтаар хийх апптайгаа танилц : Онлайн бургер захиалгын SPA
-
14:53Онлайн бургер захиалгын аппын компонентуудыг төлөвлөе !
-
18:21Burger Project үүсгэж хавтаснуудын зохион байгуулалтыг хийх
-
23:16CSS Module ашиглах, Toolbar компонентийг хэлбэржүүлэх
-
07:36Burger болон BurgerIngredient компонентуудыг хөгжүүлэх
-
24:15Онлайн бургер захиалгын аппын CSS-ийг бичицгээе!
-
17:12Burger болон BurgerIngredient компонентуудын CSS хэлбэржүүлэлт
-
26:06Хачиртай талхны орцыг динамикаар дүрслэх нь
-
34:25Хачиртай талхны орцыг оруулах BuildControls, BuildControl компонентийг бичих
-
16:19Орцыг хасах товч, захиалсан бургерийн үнийн дүнг үзүүлэх хэсгийг хийцгээе!
-
06:06Захиалгын нийт дүнг үзүүлэх
-
22:44Захиалга хийх товчийг нэмэх, кодын нэмэлт засварууд
-
12:59Захиалгыг баталгаажуулах модал цонхыг хийцгээе!
-
14:14Модал дотор OrderSummary компонентийг хийцгээе!
-
18:40Модал цонхыг динамикаар гаргаж ирэх
-
15:10Shadow компонентийг бичиж Модал цонхонд оруулцгаая
-
15:16Button компонентийг бичиж OrderSummary компонентод ашиглацгаая
-
14:51Logo компонентийг хийж Toolbar компонентод ашиглах, serve ашиглан production build кодыг ажиллуулах
-
17:32Цэс буюу Menu, MenuItem компонентууыг програмчилцгаая
-
18:01SideBar компонентийг програмчилцгаая
-
20:19SideBar компонентыг анимацитайгаар гаргаж ирэх, App компонентийг класс компонент рүү хөрвүүлэх
-
18:25HamburgerMenu компонентийг бичих, Shadow дээр дарахаар SideBar арилгах
-
42:44Firebase гэж юу вэ буюу SERVERLESS програмчлалын эринд тавтай морил!
-
24:10Firebase дээр project үүсгээд axios ашиглан анхныхаа захиалгыг хадгалж үзэцгээе!
-
22:53Firebase базаас axios ашиглан захиалгыг уншиж авах, хачиртай талхыг сэрвэр дээрх захиалгаар буцааж угсрах
-
22:14Firebase базаас унших, бичих үед Spinner үзүүлэх
-
23:33Хэрхэн хуудас хооронд шилжих вэ, React Router танилцуулга
-
28:031234.mn сургалтын сайтыг React ашиглан бүтээх нь, 1234.mn платформын Backend service-үүдтэй танилцах, тэдгээрийг дуудах
-
26:321234.mn сургалтын дэлгэрэнгүйг үзүүлэх Course компонентийг бүтээцгээе
-
25:46OrdersPage, Order компонентуудыг бүтээх
-
15:39Burger төсөлд React Router холбох, захиалгын хуудсыг линк дарж гаргах
-
30:00ShippingPage компонент болон URL param дамжуулах, withRouter компонент, хэрхэн back хийх вэ
-
26:01Contact компонентийг бичих, nested route ашиглах
-
08:34Хуудас/компонент хооронд шилжилт буюу history хэрхэн ажилладаг вэ?
-
36:48ContactData компонентоос өгөгдлийг Firebase рүү хадгалах, компонент хооронд өгөгдөл дамжуулах
-
17:49PROPS DRILLING асуудалтай танилцая, Бургер дээр дуртай орцоо санал асуулгаар сонгох нь
-
12:22React аппд төлөвийн зохицуулалт яагаад төвөгтэй байдаг вэ, шийдэл нь REDUX!
-
29:36Аварга том систем бүтээц нууц ТААМАГЛАГДАХУЙЦ UI буюу PREDICTABLE UI
-
38:16Аварга том систем бүтээц нууц ТААМАГЛАГДАХУЙЦ ӨГӨГДӨЛ буюу FLUX АРХИТЕКТУР болон REDUX төлөвийн менежмент системийн философи
-
24:43REDUX архитектуртай дэлгэрэнгүй танилцая !
-
17:45Хэрэв REDUX-ийг өөрсдөө бүтээвэл яаж хийх байсан бэ? Кодлож үзье!
-
30:16REDUX суулгаж Burger төсөлд холбох, reducer үүсгэх BurgerPage компонентод Redux холболт хийж шалгах
-
25:48Хачиртай талханд орц нэмэх BurgerReducer-ийг бичих
-
22:23BurgerReducer-т хачиртай талхны орцыг хасах, бургерийн үнийг тооцоолох кодыг нэмэх BurgerActions.js файлыг бичих
-
16:38BurgerPage дээр ЗАХИАЛАХ товчийг ажилладаг болгох, зарим жижиг засваруудыг гүйцэтгэх
-
24:26BurgerPage компонентийг REDUX-аас салгаж Burger, OrderSummary, BuildControls, ShippingPage компонентуудыг REDUX-тай холбох өөрчлөлт
-
11:38ShippingPage, ContactData компонентийг REDUX тай холбох
-
16:30Middleware гэж юу вэ Анхны лог хийгч Middleware өөрсдөө бичиж үзэцгээе!
-
09:42REDUX DEVTOOL суулгах ашиглах TIME TRIVEL DEBUGGING гэж юу вэ?
-
36:12REDUX THUNK гэж юу вэ? OrderReducer, OrderAction бэлтгэх combineReducer ашиглан хоёр reducer-ийг нэгтгэн ажиллуулах
-
27:20REDUX THUNK суулгах, захиалгыг THUNK ашиглан FIREBASE сэрвэрээс захиалгуудыг татаж авах
-
13:31Захиалга хадгалах ACTION-уудыг үүсгэж ContactData компоненттой холбож турших
-
23:55Захиалга хадгалах хэсгийн кодыг дуусгах: REDUCER-ийн кодыг бичиж өгөх
-
18:33Burger аппдаа логин хийх бүртгүүлэх боломж нэмье Login, Signup компонентуудыг бэлтгэх
-
18:31REST API BACK-END технологитой танилц FIREBASE REST сэрвис ашиглах
-
23:52Signup компонентыг REDUX холболт хийж хэрэглэгчийг FIREBASE-д бүртгэе
-
23:26Signup компонент дээр бүртгүүлэх үед үүсэх FIREBASE алдааг үзүүлэх, signupReducer бичих, Redirect компонент ашиглан шилжих
-
20:58Login компонентийг REDUX-тай холбох , loginAction, loginReducer бичих
-
24:13Логин хийсний дараах цэснүүдээ тохируулах, LOG_OUT action, reducer бичих
-
25:40Хэрэглэгчийн зөвхөн өөрийнх нь захиалгыг шүүж харуулах, FIREBASE collection дээр индекс тавиж query илгээх
-
13:08FIREBASE талд хамгаалалт тавих, token ашиглаж хамгаалалттай документууд руу хандах
-
25:05Refresh хийхэд логин мэдээлэл алга болж байгаа асуудлыг шийдэх нь Token-ийг LocalStorage-д хадгалж ашиглах
-
16:09SignupAction –ийг LocalStorage тэй холбох, аппын кодыг debug хийх
-
30:01Токений хугацаа дуусахад автоматаар logout хийх нь, хугацаа нь дууссан токенийг шинэчлэх
-
10:43Burger аппаа github дээр байрлуулж gitpage ашиглан онлайн болгох
-
15:13Burger аппаа FIREBASE HOST дээр байрлуулж ажиллуулцгаая
-
26:01REACT ертөнцөд супер боломж олгосон REACT HOOKS тэй танилц!
-
21:21useState hook ашиглан Burger төслийн класс компонентуудыг функц компонент болгон хувиргацгаая
-
27:02useEffect hooks гэж юу вэ, ажиллах зарчим Учир шалтгаан, үр дагаварын хууль :) ShippingPage, LoginPage компонентуудыг функц компонент болгон хөрвүүлэх
-
14:03useEffect hooks ашиглан ContactData компонентийг функц компонент руу хөрвүүлэх
-
37:26useEffect цэвэрлэгч функцийг ойлгох нь ContactData компонент дээр цэвэрлэгч функц ашиглах
-
11:41useEffect ашиглан App, OrderPage, Logout компонентуудыг функц компонент руу хөрвүүлэх
-
25:30useEffect hooks нэмэлт мэдээлэл, жижиг засвар, SignupPage өөрөөр бичиж үзэх
-
07:04useRef hooks гэж юу вэ? Бургер төсөлд useRef ашиглан текстийн өнгийг солих
-
10:27Javascript файлуудыг хэрэгтэй үед нь л ачаалах буюу React.lazy, Suspence ашиглан Lazy loading гүйцэтгэх
-
24:16Context API гэж юу вэ? Context Provider болон useContext Hook хэрэглэн контекстээс унших, бичих
-
14:30Context API болон useContext, useState hook хэрэглэн Burger компонентийг REDUX-аас hooks рүү шилжүүлцгээе!
-
16:56App, Burger, BuildControl компонентуудыг REDUX-аас hooks рүү шилжүүлцгээе!
-
15:40BurgerStore дээр үнэ, болон бусад төлөвүүдийг нэмэх, BuildControls компонентийг REDUX-с салгах
-
25:44OrderSummary, ShipPage, ContactData компонентуудыг REDUX-с салгаж Context, Hooks рүү хөрвүүлэх
-
21:24OrderPage компонентийг REDUX-с салгаж Context, Hooks рүү хөрвүүлэх
-
06:36useHistory hooks хэрэглэн өөр route руу үсрэх
-
20:22UserContext контекстийг бичиж SignupPage, App компонентуудыг хөрвүүлэх
-
18:58LoginPage, Logout, Menu компонентуудыг REDUX-с салгаж контекст болон hooks рүү аппыг бүрэн шилжүүлж дуусгах
-
08:31Өөрийн захиалгыг Firebase-с унших, бичих, автомат логинийг ажиллуулах
-
13:13Апп эхлэх үед localStorage шалган автоматаар логин хийх
-
18:33Токены хугацаа дуусахад автоматаар токеноо Firebase сэрвэрээс шинэчилж авдаг болгох
-
16:15useMemo hooks ашиглан рендэр дээр оптимизаци хийх нь
-
24:53REDUX VS Context + Hooks Аль нь дээр вэ? Цаашаа юу үзэх хэрэгтэй вэ?
-
18:54AdminLTE темплэйтийг React сайтад холбож ашиглах нь
-
19:37AdminLTE темплэйт бүхий React сайтад DataTable компонент хийцгээе!
-
11:53DataTable-ийг 1234.mn сайтын рест апитай холбон, сүүлд нэмэгдсэн хичээлүүдийг үзүүлдэг болгох
HTML5, CSS3 эхнээс нь дуустал! (Sass-ын
хамт)
Хугацаа: 29 цаг 40 мин | Сурагчид: 2698 | Үнэ:
49,000
|
|
Javascript хэлийг эхнээс нь дуустал!
Хугацаа: 52 цаг 21 мин | Сурагчид: 3000 | Үнэ:
49,000
|
|
NodeJS ExpressJS REST API Backend эхнээс нь
дуустал! (REACT вэб аппын хамт)
Хугацаа: 33 цаг 24 мин | Сурагчид: 1280 | Үнэ:
49,000
|
|
React Native - Ухаалаг утасны програмчлал (iOS,
Android) эхнээс нь дуустал !
Хугацаа: 45 цаг 45 мин | Сурагчид: 1181 | Үнэ:
49,000
|
|
Next.js блог вэб сайт эхнээс нь - орчин үеийн
вэб сайт хөгжүүлэлтийн шинэ давалгаа
Хугацаа: 19 цаг 46 мин | Сурагчид: 740 | Үнэ:
49,000
|
|
== Сурагчдын сэтгэгдлүүд ==
Энэхүү сургалтыг хийсэн багшдаа баярлалаа.
Нэг үсэг яаж бичихийг заасан л бол багш болдог гэдэг шиг... энэ их мэдлэгийг хуваалцаж байгаад баярлалаа.