React -ийн тухай

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

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

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

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

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

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

Холбоотой материалууд
Формтой ажиллах модел

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

Хэрэглэгч програмын өгөгдөлтэй харьцах ажиллагаа бол ямарч програмыг хувьд чухал хэсэг байдаг. Үүнийг голдуу формоор дамжин хийдэг. Иймээс энэ удаа VueJs -ээр төрөл бүрийн input элементүүдтэй хэрхэн ажиллахыг

    <body>
        <div id="app">
            <input type="text">
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {

                }
            })
        </script>
    </body>

кодоор авч үзье. Кодод хэрэглэгчээс өгөгдөл авах input элемент div id="app" элементэд Vue -гийн хувийн инициализац хийсэн байгаа. Хуудсыг нээвэл ердийн input талбар л үзэгдэнэ. Тэгвэл input элементэд ямар нэгэн зүйлийг оруулахад түүнийг хуудасны шаблонд шууд харуулах асуудлыг шийдье.

Inline стилүүд

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

Html хэвийн элементүүдэд хэвжүүлэлтийн стилийг шууд буюу inline /элементийн тодорхойлолтын мөрөнд/ зааж болдог. Үүнийг React компонентийн хэвийн элементүүдэд хэрхэн өгөхийг App компонентийн

class App extends Component {
  render() {
    return (
      <div>
        <h1>
          Hello world!
        </h1>
      </div>
    )
  }
}

кодоор харцгаая.

Модулууд

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

ES6 -д бий болсон модулийн системийн дүрмийн талаар үзэхийн өмнө зарим бэлтгэл ажлыг хийх хэрэгтэй. Төслийн үндсэн хавтаст extra.js файлыг үүсгээд дараах кодыг

let name = 'e-surgalt.com';
let age = 6;

оруулан өгье. extra.js файлд зарлагдсан хоёр хувьсагчийг index.js файлд оруулан ирэх хэрэг гарлаа гэе. Энд хоёр нөхцлийг хангана. Нэгд бусад модулууд extra.js файлд зарлагдсан хувьсагчдыг өөртөө ашиглах боломжийг нээх зорилгоор түүнийг гадагш экспортлох ёстой. Хоёрт бусад модулаас эскпорт хийгдсэн зүйлийг ашиглах модул нь импортлох хэрэгтэй.

Массиваас стрим үүсгэх

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

Сүүлийн жилүүдэд Javascript хэл хөгжихийн хирээр түүнийг хэрэглэгч талын хуудасны хөгжүүлэлтэд улам ихээр ашиглан нэг хуудаст аппликашныг /SPA/ хийхэд өргөнөөр ашиглах боллоо. Цаашид Javascript програмистуудын эрэлт огцом өсөх хандлага бий болж байгаа тул та програмын чиглэлээр ажилладаг эсхүл суралцдаг бол сайтын хичээлүүдтэй танилцахыг санал болгоё. Хичээлд масиваас стрим үүсгэх боломжийг авч үзэх болно. Үүний тулд төслийн index.js файлд

function createSubscribe(name) {
    return {
        next(x) {
            console.log(name, ': ', x);
        },
        error(err) {
            console.log('Error: ', err);
        },
        complete() {
            console.log(name, ': Completed!');
        }
    }
}

Rx.Observable.from([1, 2, 3, 4])
    .subscribe(createSubscribe('from'));

кодыг оруулан өгье.

Статик гишүүд…

Класс ба структурт ердийн талбар, арга, шинжүүдээс гадна статик талбар, арга, шинжүүд байж болдог. Статик талбар, арга, шинжүүд…

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

 
useRef

Хичээлээр useState -тэй тун төстэй useRef хукийн талаар авч үзье. useRef хукийн онцлог ашиглалтыг компонент хэдэн удаа дахин…

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

 
Тоог ихэсгэх

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

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

 
Графикийн паттерн.…

Нийтлэлээр графикийн хэвүүдийн /GUI pattern/ түүхийг авч үзье. Боловсруулалтын графикийн хэвүүдийг 30 гаруй жилийн туршид боловсруулж байгаа бөгөөд…

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

 
Аргын хэт…

Хааяа өөр өөр параметрүүдийн багцтай нэг аргыг үүсгэх шаардлага гардаг. Ирсэн параметрүүдээс хамааран аргын тодорхой хэрэгжүүлэлтийг хэрэглэнэ. Ийм…

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

 
Vuex -ийг…

Ямарч програмын ажиллагааны чухал хэсэг бол төрөл бүрийн мэдээллийн боловсруулалт, тэдгээртэй ажиллахтай холбоотой байдаг. Иймээс энэ хичээлээс vuejs…

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

 
useEffect

Хичээлээр react -ийн хукуудаас их өргөн ашиглагддаг useEffect -ийн талаар авч үзье. useEffect -ийн ажиллагааг судлах хуудасны кодийг

…

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

 
Тоон болон…

Илэрхийлэл бол математикийн хэлний үндэс болсон суурь ойлголтуудын нэг. Математикийн илэрхийллийг тооцооны алгоритм, аксиом, теорем, бодлогын нөхцлүүд гээд…

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

 
Програмчлалын хэвүүд…

Програм зохиох бол нарийн төвөгтэй ажил. Ямар ч програмын хувьд өөрийн хийх ажлаа гүйцэтгэхийн чацуу цаашдаа хөгжих, ажлын…

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

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