React -ийн тухай

React бол динамик ажиллагаатай, нарийн төвөгтэй веб програмийг боловсруулах сайн технологи бөгөөд хичээлээр React -ийг яагаад судлах хэрэгтэй, технологийн үндсэн зарчмуудын талаар авч үзнэ. React -ийн албан ёсны сайтад хандвал түүнийг зохиогчид хэрэглэгчийн интерфейсийг үүсгэх Javascript сан хэмээн тодорхойлсон байгаа. Хэрэглэгчийн интерфейс гэдэг нь ямарч веб програмд хандахад таны хөтөч дээр нээгдэх дэлгэцүүдийг хэлж байгаа юм.

Эндээс React нь нарийн бүтэцтэй, динамик ажиллагаатай веб сайт, програм эсхүл системийг зохиоход зориулагдсан Javascript сан гэдэг нь ойлгомжтой. Сангийн үндсэн онцлог гэвэл хэрэглэгчийн дэлгэцийг /интерфейсийг/ зохиохдоо компонентод тулгуурладагт оршино. Ер нь React -ийн бүх элементүүд компонентуудаас бүрддэг. Иймээс React -аар зохиогдсон програмийн хэрэглэгчийн интерфейс дахин ашиглагдах, өөрийн хүссэнээр өөрчлөх боломжууд бүхий төрөл бүрийн компонентуудаас бүрддэг. React -ийн албан ёсны сайтын хэрэглэгчийн интерфейсийг энэ санг ашиглан зохиосон тул сайтын бүтцээс компонентод тулгуурлалт гэдгийг илүү нарийн ойлгох боломжтой.

Сайтын цэс хэсэг /ногоон хүрээтэй/ бол бүхэлдээ нэг компонент. Тэрч бүү хэл цэс бүр /Dosc, Tutorial гэх мэт/ тусдаа компонентууд юм. Дараагийн улаан хүрээтэй хэсэг бол бас л тусдаа компонент бөгөөд түүнд байрлах / Get Started/ товчнууд хүртэл бас л бие даасан компонент. Түүний дараагийн цэнхэр хүрээтэй хэсэгт гурван баганаар үзүүлсэн агуулгууд ижил бүтэцтэй байгаа нь гарчиг, агуулга хэсэг бүхий нэг компонентод өөр агуулгуудыг өгсөн хэрэг. Ийм байдлаар сайтын бүтцийг цааш харвал бүхий л хэсгүүд компонентуудаас бүрдэж буйг төвөгггүй ялган харах боломжтой. React -аар бүтээх хэрэглэгчийн интерфейсийн блокууд, товч, өгөгдөл оруулах талбар, текстүүд гээд бүх элементүүдийг компонентоор үүсгэдэг тул өөрийн зохиох програмийн хэрэглэгчийн интерфейсийг дахин ашиглагдах, тохируулах боломжтой компонентод зөв хувааж сурах нь чухал.
React -ийг судлах шалгааныг дурдвал

  • Санг Facebook компани боловсруулан хөгжүүлдэг тул ирээдүйн хөгжилд эргэлзэх зүйлгүй.
  • React сан орчин үеийн динамик ажиллагаатай, нарийн төвөгтэй SPA веб програмийг боловсруулах хамгийн өргөн тархсан технолог гэдгийг хэрэглэгчдийн зүгээс github дээр санд өгсөн одын /Star/ тоо нь илтгэнэ.
  • React технологийг эзэмшсэн FrontEnd хөгжүүлэгчийн хэрэгцээ зах зээлд хангалттай их

React -ийн албан ёсны сайт нилээд олон хэлний орчуулгатай бөгөөд монгол хэл багтсан нь суралцах хурдад түлхэц өгөх нь гарцаагүй. Техникийн хэллэгүүдийн монгол орчуулга дутагдалтай, програмчлалын ихэнх материалуудыг гадаад хэлнээс судлах хэрэгтэй болдог тул англи хэлтэй сайтыг барин судлахыг зөвлөе.

Мэдээлэл таалагдсан бол найзуудтайгаа хуваалцаарай.

Холбоотой материалууд
State -ийн инициализац

  Нээгдсэн тоо: 521 Бүртгүүлэх

class түлхүүр үгээр үүсгэгддэг react компонентод байдаг бас нэгэн онцлогийг авч үзье. Өмнөх хичээлүүдэд бид App компонентийн төлвийг state обьектоор тодорхойлон ашигласан. react компонентийн төлвийг өөрөөр тодорхойлж болдогийг мэдэж байх хэрэгтэй. Javascript -ийн class түлхүүр үгээр үүсгэсэн класс байгуулагч /constructor/ гэсэн тусгай аргатай байдаг.

JSX

  Нээгдсэн тоо: 701 Төлбөртэй

Энэ хичээлээс эхлэн react ашигладаг jsx бичлэгийн дүрмийн талаар дэлгэрүүлэн авч үзнэ. Өмнөх хичээлүүдэд хуудасны хэвийн тэмдэглэгээний jsx бичлэгийн дүрмийн үндсэн ойлголтуудыг үзсэн. Энэ удаад jsx гэж юу болох, хэрхэн ажилладагийг react програм үүсгэх хичээлд үүсгэсэн төслийн кодоор авч үзье. Бидний үүсгэсэн төслийн оролтын index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

файлд ReactDOM обьектын render аргад App нэрээр импортлон авсан App компонентийг эхний параметрээр дамжуулж байгаа.

data арга

  Нээгдсэн тоо: 754 Нийтийн

Javascript хэлийг ашиглахгүйгээр сайт зохионо гэдэг бүтэхгүй зүйл гэдэг нь ойлгомжтой. Сайтын хэрэглэгч талын хуудаст олон төрлийн javascript санг ашигладаг байсан бол одоо сайтыг бүгдийг javascript фреймворк ашиглан хийдэг SPA /single page application/ технологийг улам ихээр хэрэглэх болсон. Эдгээрийн нэг болох Vuejs сангийн хичээлүүдийг сайтад нийтэлж байгаа бөгөөд энэ удаад Vue -гийн хувийн тохиргооны обьектод data талбарт обьект тодорхойлж болж байхад яагаад компонентын хувийн тохиргооны обьектод data талбарт функц тодорхойлох ёстойг авч үзье. Компонентууд ямар хэрэгтэй вэ? хичээлийн жишээг

Компонентын нэр

  Нээгдсэн тоо: 1241 Нийтийн

Компонентыг бүртгүүлэх хичээлд компонентийн нэрийг 'my-counter' гэж мөр төрлөөр бичин өгсөн. Энэ нь зарим тохиолдолд асуудал үүсгэдэг. Жишээ нь та төсlлийн кодыг бичиж буй засварлагчид кодыг цэвэр байлгах ямар нэгэн хэрэгсэл /linter/ ашиглаж байвал нэрэнд хашилтыг хэрэглэвэл төслийн хэвээс хасагддаг тул үүнийг ашиглахгүй байх нь дээр. Иймээс VueJs -д компонентийн нэрийг үүсгэх өөр аргачлал байдаг. Компонентийн нэрийг өгөхдөө

            new Vue({
                el: '#app',
                components: {
                    'my-counter': component
                }
            });

хашилтанд my-counter гэж html кодод ашиглах тегийн нэрийг өгсөн байгаа.

Үйл явдал…

Үйл явдал /event/ тодорхой үйлдэл хийгдсэн талаар системд мэдэгддэг. Хэрвээ бид энэхүү үйлдлийг ажиглах хэрэгтэй бол яг энд…

Нээгдсэн тоо : 207

 
Холбоосын параметрүүд

Манай төсөл олон хуудсуудтай болон тэдгээрийн хооронд динамикаар шилжилт хийж байгаа ч тухайн үед шилжилт хийгдсэн хуудаст тохирох…

Нээгдсэн тоо : 289

 
Зочин (Visitor)

Зочин (Visitor) паттерн классуудыг өөрчлөхгүйгээр тэдгээрийн обьектуудын үйлдлийг тодорхойлох боломжийг олгоно. Зочин хэвийг ашиглахдаа классуудын хоёр ангилалыг тодорхойлно.…

Нээгдсэн тоо : 249

 
Лямбда

Лямбда-илэрхийлэл нь нэргүй аргын хураангуй бичилтийг илэрхийлнэ. Лямбда-илэрхийлэл утга буцаадаг, буцаасан утгыг өөр аргын…

Нээгдсэн тоо : 352

 
Outlet компонент

Кодийн сайжруулалт /рефакторинг/ хичээлээр програмийн кодоо react -ийн зарчимд нийцүүлэн компонентод салгасан.…

Нээгдсэн тоо : 399

 
Хадгалагч (Memento)

Хадгалагч (Memento) хэв обьектын дотоод төлвийг түүний гадна гаргаж дараа нь хайрцаглалтын зарчмыг зөрчихгүйгээр обьектыг сэргээх боломжийг олгодог.

…

Нээгдсэн тоо : 419

 
Нэргүй арга

Делегаттай нэргүй арга нягт холбоотой. Нэргүй аргуудыг делегатийн хувийг үүсгэхэд ашигладаг.
Нэргүй аргуудын тодорхойлолт delegate түлхүүр үгээр…

Нээгдсэн тоо : 485

 
Урвуу матриц

Математикт харилцан урвуу тоонууд гэж бий. Ямар нэгэн тооны урвуу тоог олохдоо тухайн тоог сөрөг нэг зэрэг дэвшүүлээд…

Нээгдсэн тоо : 551

 
Кодийн сайжруулалт

Төсөлд react-router-dom санг оруулан чиглүүлэгчдийг бүртгүүлэн тохируулсан Санг суулган тохируулах хичээлээр бид хуудас…

Нээгдсэн тоо : 578

 
Энэ долоо хоногт
Бодлого 7.070

тэгшитгэлийг бод.

Нээгдсэн тоо : 1096

 
Бодлого 9.094

Талууд нь 5; 12; 13 нэгж урттай гурвалжны хэлбэрийг тогтоогоорой.

Нээгдсэн тоо : 998

 
Бодлого 10.099

Призмд багтсан V эзэлхүүнтэй дөрвөн өнцөгт зөв пирамидийн оройнууд дээд суурийн төв болон доод суурийн талуудын дундаж цэгүүд харгалзах бол призмийн эзэлхүүнийг ол.

Нээгдсэн тоо : 303

 
© 2014 Зохиогчийн эрхээр хамгаалагдсан. Холбогдох - 96655195