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

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

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

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

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

Хэрэглэгч талын хуудасны динамик ажиллагааг үүсгэн удирдахад зориулагдсан javascript фреймворкууд интернет програмчлалд улам хүчтэй түрэн орж ирж байгаа тул технологийн хөгжлөөс хоцрохгүй байх үүднээс VueJs фреймворкийн хичээлүүдийг нийтэлж байгаа билээ. Энэ удаад VueJs -ийг ашиглан програмаа хэрхэн хэвжүүлэхийг доорх энгийн кодоор

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>Vue JS</title>
        <style>
            .circle {
                width: 100px;
                height: 100px;
                border-radius: 50%;
                border: 1px solid black;
                display: inline-block;
                margin: 40px;
            }

            .red {background: red;}
            .blue {background: blue;}
            .green {background: green;}
        </style>
    </head>
    <body>
        <div id="app">
            <div class="circle"></div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                }
            })
        </script>
    </body>
</html>

судлая. Кодын head хэсэгт style тэгд хэвүүдийг бичин өгөөд хэвийг ашиглах circle класстай нэг div -ийг тодорхойлсон. Хуудсыг хөтөч дээр нээвэл

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

Сүүлийн жилүүдэд интернетэд сууриласан програмуудын хэрэглэгч талын хуудсыг javascript сангуудыг ашиглан боловсруулах хандлага эрчимтэй хөгжиж байна. Javascript хэлийг бүх хөтөчүүд дэмжин ажилладаг нь сервер талын ачааллаг бууруулах, програмыг ажиллагааг илүү динамик, интерактив болгох, сервертэй өгөгдөл солилцох ажиллагаа зэргийг илүү хөнгөн хялбар болгоход чухал хэрэгтэй зүйл. Одоо цагт хэрэглэгчдийн компьютеруудын хүчин чадал, өгөгдөл боловсруулах хурд гээд бүхий л нөөцүүүд хангалттай сайжирсан нь нэг хуудаст программ буюу SPA -г боловсруулан ашиглах таатай нөхцлийг бүрдүүлсэн. Javascript хэлний боломжийг бүрэн ашиглан төрөл бүрийн өгөгдлүүдтэй их эвтэйхэн ажиллах боломжиг RxJs сан олгодогийг та хичээлүүдээс мэдэх болно.

Хичээлд RxJs санг компьютертаа суулган, туршилтын төслийг үүсгэхийг авч үзэцгээе. Хичээлд WebStorm засварлагчийг ашиглах ч та өөрийн дуртай засварлагчийг ашигласан ч болно.

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

Сервертэй ажиллах бэлтгэл хичээлээр төсөлд сервертэй ажиллах тохиргоог хийсэн тул 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>

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

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

Сорилгын үр дүнгийн QuizResult компонентод сорилгыг дахин эхлүүлэх товч байгаа. react -ийг зохиогчид  програмийг компонент дээр суурилан хийх аргачлалыг уриалдаг учраас сорилгыг дахин эхлүүлэх товчийг тусд нь компонент байдлаар боловсруулъя. Үүний тулд төслийн components хавтаст UI нэртэй хавтасыг үүсгээд түүнд Button хавтасыг үүсгэе. UI гэдэг нь /user interface/ буюу хэрэглэгч талын дэлгэцийн төрөл бүрийн элементүүдийг үзүүлэх компонентуудыг агуулах юм. Button хавтас бол дэлгэц дээр үзүүлэх товчны компонентийн хавтас бөгөөд түүнд Button.js, Button.module.css үүсгэн өгөөрэй.

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

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

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

 

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

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

 

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

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