React -ийн тухай

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

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

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

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

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

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

Холбоотой материалууд
Үйл явдал нэмэх

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

Хэрэглэгч талын хуудасны event буюу үйл явцын боловсруулалт динамик ажиллагааны чухал хэсэг байдаг. ИЙмээс VueJs -ээр үйл явцыг тодорхойлон тэдгээрийн боловсруулалтыг хэрхэн хийхийг

    <body>
        <div id="app">
            <h2>Тоолуур = {{ counter }}</h2>
            <button>Нэмэгдүүлэх</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    counter: 0
                }
            })
        </script>
    </body>

кодтой хуудсаар судлая. Кодод h2 гарчигт Тоолуур = текстийн араас {{ counter }} гэж хувьсагчийг үзүүлнэ. counter -ийг Vue -гийн тохиргооны обьектын data талбарт 0 утгатайгаар зарласан.

CLI суулган төсөл үүсгэх

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

Vue CLI гэж юу болох, юунд ашиглах талаар CLI ямар хэрэгтэй вэ? хичээлд үзсэн тул одоо хэрэгслийг компьютертаа суулган түүгээр Vue төсөл үүсгэе. Үүний тулд vuejs фреймворкийн албан ёсны сайтад хандан

суулгах зааврыг ашиглая. Та компьютертаа Node.js -гийг суулгасан байх ёстой гэдгийг сануулъя. Node.js таны компьютерт npm програмыг суулгадаг. Пакетын менежер npm -тэй ижилхэн yarn програмыг ч ашигласан болно. cmd командаар Command Prompt цонхыг нээгээд

Амьдрах цикл

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

Vue -ийн хувийн амьдралын мөчлөгийн талаар авч үзье. Vue -гийн хувь бүрд өөрийн гэсэн амьдралын мөчлөг байдаг бөгөөд тодорхой  үе шатуудыг ажиглах боломжтой. Програмын амьдрах мөчлөгийн үе шатуудыг

    <body>
        <div id="app">
            <h2>{{ title }}</h2>
            <button @click="title = 'Гарчигийг өөрчлөв'">Гарчигийг өөрчлөх</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    title: 'Vue програм'
                }
            })
        </script>        
    </body>

кодоор авч үзье. Код хуудаст title талбарыг үзүүлээд Гарчигийг өөрчлөх товчийг дарахад title талбарын утгыг өөрчлөнө. Бид ажиглалт хийж болох эхний үе шат бол Vue програмын инициализац юм. new Vue({ ... }) командаар Vue програмын инициализац хийгдэх боловч хэрэглэгч хуудсыг харах хүртэл хэдэн шатыг дамждаг.

vue-router -ийг суулгах

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

Хичээлээр Vuejs фреймворкийн роутинг /чиглүүлэгч гэж орчуулж болох юм/ ойлголтын тухай авч үзье. Орчуулга муухан болсон байх талтай тул Routing гэсэн хэллэгээр нь шууд ойлгох нь илүү болов уу. Програмчлалын хэлний ухагдхуунуудыг шууд гадаад үгээр нь ойлгон тогтоох нь сайн. Учир нь монгол хэл дээр програмчлалтай холбоотой мэдээллүүд бага болохоор бид ихэнх зүйлийг интернетийн гадаад хэлтэй орчноос эсхүл гадаадын ном, хэвлэлээс судлах хэрэгтэй болдог. Vuejs фреймворкийн роутингийг ашиглахын тулд төслийн хуудас хоорондын чиглүүлэгчийг зохион байгуулдаг vue-router пакетыг төсөлдөө суулгах хэрэгтэй.

Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

 
Хуваах

Хуваах нь нэг тоо нөгөө тоонд хэдэн удаа агуулагдаж буй тодорхойлох арифметикийн үйлдэл.
Хуваалтыг нэг бус удаа…

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

 
Зуучлагч (Mediator)

Зуучлагч (Mediator) нь олон тооны обьектууд бие биетэйгээ холбоос үүсгэхгүйгээр харилцан ажиллах боломжийг хангах загварчлалын хэв юм. Ингэснээр…

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

 
Делегатийн хэрэглээ

Делегатууд хичээлд ухагдхууны талаар дэлгэрэнгүй үзсэн ч жишээнүүд делегатийн хүчийг бүрэн харуулж чадахааргүй байсан.…

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

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

Арифметик прогрессын ялгавар тэгтэй тэнцүү биш. Энэхүү прогрессын 1-р гишүүнийг 2-р гишүүнээр, 2-р гишүүнийг 3-р гишүүнээр, 3-р гишүүнийг 1-р гишүүнээр үржүүлэхэд гарах тоонууд өгөгдсөн дарааллаар геометрийн прогресс үүсгэдэг бол геометр прогессын хуваарийг ол.

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

 
Бодлого 10.059

Бөмбөрцөгт багтсан зөв дөрвөн өнцөгт пирамидийн суурь нь бөмбөрцөгийн төвийг дайрч байв. Пирамидийн эзэлхүүн 18-тай тэнцүү бол бөмбөрцөгийн радиусийг ол.

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

 
Бодлого 10.104

Зөв зургаан өнцөгт пирамидийн апофем h -тэй тэнцүү бөгөөд сууртай үүсгэх хоёр талст өнцөг 600 градус бол пирамидийн бүтэн гадаргуун талбайг ол.

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

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