Төслийн бүтэц

react програм үүсгэх хичээлд create-react-app хэрэгслээр үүсгэсэн шинэ төслийг бүтэцтэй танилцая. Хичээлийн кодийн засварт би VSCode -ийг ашиглах бөгөөд D дискний projects хавтас дахь react хавтаст үүсгэсэн react-less хавтасыг код засварлагч дээр нээе.

Төслийн хавтас доторх үндсэн файлуудаас package.json бол маш чухал файл.

Дээрх зурагт файлын агуулгыг нээсэн байгаа. Эхний мөрүүдэд төслийн нэр болон хувилбарын дугаар байгаа. Цааш dependencies талбарт програмд хамааралтай сангуудын жагсаалт байгаа. Жагсаалтын react, react-dom, react-scripts бол react -ын суурь сангууд. scripts талбар төслийг удирдах командуудын жагсаалтыг агуулна. npm start командаар төслийн ажиллагааг эхлүүлдэгийг бид мэднэ. build командаар төслийн кодийг оновчтой /оптимизац/ болгон багцлан програмийн бүрэн ажиллагаатай статик файлуудыг үүсгэнэ. test командаар төслийн кодийн тэстийг хийнэ. eject командын талаар ашиглах үедээ илүү нарийн авч үзнэ. Төсөлд шаардлагатай пакетуудыг суулгах үед тэдгээрийн хамаарлыг тодорхой хувилбараар package-lock.json файл түгжин бүртгэдэг. Файлуудыг систем автоматаар өөрчилдөг тул эдгээрийн агуулгыг бид өөрчлөх хэрэггүй. Хувилбарын хяналтын git системд орохгүй файл, хавтастуудын жагсаалт .gitignore файл бас автоматаар үүсдэг.  
Төслийн node_modules хавтаст манай програмийн ажиллагаанд шаардлагатай маш олон тооны пакетууд байрлана. Үнэндээ бол эдгээр пакетууд төсөлд ашиглагдах пакетуудийн хамаарал байдлаар орж ирдэг тул хавтас юу хадгалагдаж байгаа нь бидэнд нэг их чухал бус. node_modules хавтсыг create-react-app хэрэгсэл үүсгэн түүнд шаардлагатай сангуудыг татан байршуулсан бөгөөд бид эдгээр сангийн кодийг хөндөх шаардлагагүй. Дараагийн хавтас бол public юм. React -аар нэг хуудаст буюу single page аппликашнг үүсгэдэг ба хавтаст байрлах index.html бол манай програмийн үндсэн файл.
src бол төслийн эх кодийг хадгалах хавтас. Энд бүгд index.js -ээс эхлэх бөгөөд create-react-app хэрэгслээр генерацлагдсан код

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

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

гэж харагдана. Эхний хоёр мөрөөр react -ийн суурь санг импортлоно. Энд төрөл бүрийн хэвжүүлэлтийн файлыг импортлох боломжтой. Дараа нь төслийг үүсгэхэд автоматаар үүсгэсэн App компонентийг импортлоод ReactDOM обьектын render аргаар App компонентийг root айдитай div оруулан өгсөн байгаа. Харин root айдитай div -нь public хавтас дахь index.html файлд байгаа. React 17 хувилбараас компонентуудыг програмд ​​гарч болзошгүй асуудлуудыг илрүүлэх хэрэгсэл StrictMode -д багцалдаг болсон. Програмийн бүтээмжийг хэмжихийг хүсвэл reportWebVitals функцийг ашиглах боломжтой. Энэ талаар интернетээс дэлгэрүүлэн судлаарай. Хичээлд энэ боломжийг ашиглахгүй тул кодоос хасах болно.
create-react-app хэрэгсэл үүсгэсэн App компонентийн кодоос

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

react програм үүсгэх хичээлд үүсгэн ажлуулахад хөтөч дээр нээгдэж байсан хуудас гэдэг нь тодорхой харагдана.

Жич: Төсөлд пакет нэмэх, скриптүүдийг ажлуулахдаа npm -ээс гадна yarn програмыг ашиглах боломжтой. yarn -нь npm -тэй ижил хэдий ч facebook зохиосон тул react -тай илүү зохицон, арай хурдан ажиллах боломжтой. Та терминалаас npm install -g yarn командыг өгөн програмиийг суулган ашиглаж болно.      

VSCode -ийн терминалийг нээгээд

yarn start /npm run start ч болно./ командыг өгвөл http://localhost:3000/ хаягаар

дээрх хуудас нээгдэнэ. src/App.js файлыг засварлаад дахин ачааллах зааварын дагуу App компонентийн кодийг

import './App.css';

function App() {
  return (
    <div className="App">
      <h1>
        Hello world!
      </h1>
    </div>
  );
}

export default App;

гэж өөрчлөөд хадгалбал хөтөч дээрх хуудас


гэж өөрчлөгдөнө. create-react-app хэрэгсэл үүсгэсэн төслийн файлуудаас хичээлийн хүрээнд авч үзэхгүй зарим нэг зүйлүүдийг хасан цэгцлэе. Хичээлд тестийг асуудлыг хөндөхгүй тул App.test.js файлыг устгая. logo.svg файлыг ашиглахгүй учир устгая. Програмийн бүтээмжийг хэмжилтийг хөндөхгүй тул reportWebVitals.js файлыг устгаад 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')
);

болгон өөрчлөөд өөрчлөлтүүдийг хадгалбал хуудасны ажиллагаанд өөрчлөлт орохгүй ч ажиллагаа хэвийн байгааг шалган үзээрэй.
Төслийн src хавтаст

файлууд үлдсэн.

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

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

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

import React, {useState, useEffect} from 'react'

function App() {
  const [renderCount, setRenderCount] = useState(1)
 
  useEffect(() => {
    setRenderCount(prev => prev + 1)
  })
 
  return (
      <div className="container">
        <h1>Render -ийн тоо {renderCount}</h1>
      </div>
  );
}

export default App;

кодоор шийдчих мэт.

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

Интернетэд сууриласан програмчлал хөгжихийн хирээр хэрэглэгчдийн шаардлага улам өндөр болсон. Хөтөч сервер хооронд хуудсыг дамжуулан дахин зурах, формын шалгалт, хуудас шилжилт зэрэг серверт олон удаа хандах ажиллагаануудад хэрэглэгчид нилээд дургүй байдаг. Эдгээр асуудлыг шийдэхийн тулд SPA буюу нэг хуудаст програмын технологийг Angular, React, Vue зэрэг фреймворкууд хэрэгжүүлдэг. Фреймворкуудийн ажиллагааны зарчим ойролцоо тул аль нэгийг нь судалсан байхад бусад нь ойлгомжтой. Иймээс сайтад Vue фреймворкийн хичээлүүдийг оруулж байгаа билээ.

Энэ удаад Html хуудас дээрх сонголтуудаас тохирохыг нь зөвлөх тэмдэглэгээ хийдэг CheckBox гэж нэрлэдэг элементийн тухай авч үзье. Жишээ нь бүртгэлийн хуудаст хэрэглэгчийн сонирхдог зүйлсийг тодорхой төрлүүдээс сонгох байдлаар ихээр авдаг. Үүнийг VueJs -дээр хэрхэн хэрэгжүүлэхийг

<template>
  <div>
    <h2>Form inputs</h2>
    <label>
      <input type="checkbox"> instagram
    </label>
    <label>
      <input type="checkbox"> twitter
    </label>    
    <label>
      <input type="checkbox"> facebook
    </label>    
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  }
}
</script>

жишээгээр харцгаая.

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

Javascript хэлний үндсэн үүргийн нэг бол хэрэглэгч талын хуудаст динамик байдлыг үүсгэн програмтай харьцах ажиллагааг илүү уян хатан, хөнгөн, эвтэйхэн болгох юм. Html хуудас дээрх сонголтуудаас боломжит сонголтуудыг хийхдээ CheckBox элементийг ашигладаг бол сонголтуудаас боломжит нэгийг сонгохыг Радио товчоор хийдэг. Жишээ нь бүртгэлийн хуудаст хэрэглэгчийн хүйсийн сонголтыг хийх гэх мэт. Үүнийг VueJs -дээр checkbox -той төстэйгөөр хэрэгжүүлдэг тул CheckBox хичээлийн

<template>
  <div>
    <h2>Form inputs</h2>
    <label>
      <input type="radio"> instagram
    </label>
    <label>
      <input type="radio"> twitter
    </label>    
    <label>
      <input type="radio"> facebook
    </label>    

  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  }
}
</script>

жишээний input тегийн төрлийг radio болгоод програмыг ажлуулан хуудасны ажиллагааг шалгавал

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

React компонентоос хэд хэдэн элементүүдийг буцаах нь ердийн үзэгдэл ч тэдгээрийг заавал нэг суурь элементэд багцалсан байх дүрэмтэй. Энэ дүрэм нь зарим тохиолдолд DOM -д илүү зангилаа /элемент/ үүсгэдэг асуудлыг React 16 хувилбараас фрагментээр солин шийдвэрлэсэн. Фрагмент гэдгийг ойлгохын тулд төслийн кодод багахан өөрчлөлтийг хийе. ErrorBoundary классийн ажиллагааг шалгах зорилгоор Car компонентод нэмэн өгсөн

     if (this.props.name === 'Toyata Prius') {
       throw new Error('Алдаа гарлаа !!!')
     }

кодийг хасвал програм TOGGLE CAR товч дээр дарахад алдаа хаялгүй хэвийн ажиллана.

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

илэрхийллийг хялбарчил.

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

 

Паралелграмын AB, CD диагналуудын огтлолцлын цэг O бол векторуудын нийлбэрийг ол.

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

 

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

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