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

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 хавтаст

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

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

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

Сервертэй ажиллах бэлтгэл хичээлээр төсөлд сервертэй ажиллах тохиргоог хийсэн тул vue-resource сангийн ажиллагаатай танилцгаая. Үүний тулд төслийн үндсэн комдонент App.vue файлд

<template>
  <div class="container pt-2">
    <div class="form-group">
      <label for="name">Машины нэр</label>
      <input type="text" id="name" class="form-control" v-model.trim="carName">
    </div>
    <div class="form-group">
      <label for="year">Машины он</label>
      <input type="text" id="year" class="form-control" v-model.number="carYear">
    </div>
    <button class="btn btn-success" @click="createCar">Машин үүсгэх</button>    
  </div>
</template>

<script>
  export default {
    data () {
      return {
        carName: '',
        carYear: 2020
      }
    },
    methods: {
      createCar () {
        console.log('Машин үүсгэх')
      }
    }
   }
</script>

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

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

ES6 -д обьектод ямар өөрчлөлтүүд орсонг хичээлд үзэх болно. Кодод

const name = 'e-surgalt.com';
const age = 30;

хувьсагчид байгаад эдгээрийг хувьсагчийн нэртэй ижилхэн обьектын талбарт олгоё гэвэл ES5

const obj = {
    name: name,
    age: age
};

гэж бичдэг. Одоо обьектыг консолд

console.log(obj);

гэж харуулъя.

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

vuex сан төслийн компонентуудын ажиллагаануудын хоорондын хамааралыг арилган бие даан ажиллах боломжийг бүрдүүлдэг. Getters -ийг ашиглах хичээлд vuex сангийн state, getters талбаруудыг ашиглан Counter , SecondCounter компонентуудыг бусад компонентуудаас хамааралгүйгээр ажилладаг болгосон. Counter , SecondCounter компонентууд одоо зөвхөн store -той харьцан ажиллах болсноор төслийн компонент хоорондын хамаарал багасан програмын ажиллагааны логик ойлгомжтой хөнгөн болохын дээр компонентуудыг дахин ашиглах боломж бүрдсэн.

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

Хичээлээр Vue -гийн интерполяц гэж юу болох, түүний боломжийн талаар дэлгэрэнгүй авч үзнэ. Тухайлбал Энгийн Vue програм үүсгэх хичээлд үзсэн {{ name }} бүтцийн тухай бөгөөд үүнийг програмд хэрхэн ашиглах, ямар боломжуудтай, бүтцээр юу хийж болох тухай үзнэ. Энгийн Vue програм үүсгэх хичээлийн жишээтэй төстэй #app -элементэд Vue -гийн инициализацийг хийсэн app тодорхойлогчтой div -д мэндчилгээний текстийг үзүүлэх

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>Vue JS</title>
    </head>
    <body>
        <div id="app">
            <h1>Hello {{ name }}</h1>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    name: 'Vue !!!'
                }
            })
        </script>        
    </body>
</html>

кодыг авч үзье.

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

Суудлын автомашины хөдөлгүүрийн халаалтын ажиллагааг графикт үзүүлжээ. X тэнхлэгт машиний хөдөлгүүр ассанаас хойш хугацааг минутаар харин Y тэнхлэгт хөдөлгүүрийн халууныг градусаар үзүүлсэн бол графикаас хөдөлгүүр хэдэн минутад 60 градусаас 90 градус хүртэл халсаныг тодорхойл.

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

 

бол илэрхийллийн утгыг ол.

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

 

байх x -ийн хувьд

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