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

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

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

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

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

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

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

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

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

Төслийн App компонентийн кодыг харвал

class App extends Component {

  state = {
    cars: [
      { name: 'Toyata Prius', year: '2018' },
      { name: 'Toyata Camry', year: '2019' },
      { name: 'Ford', year: '2015' }
    ],
    pageTitle: 'App компонент'
  }

  changeTitleHandler = (newTitle) => {
    this.setState({
      pageTitle: newTitle
    })
  }

  ChangeHandle = (event) => {
    this.setState({
      pageTitle: event.target.value
    })
  }

  render() {
    const divStyle = {
      textAlign: 'center'
    }

    const cars = this.state.cars

    return (
      <div style={divStyle}>
        <h1>
          {this.state.pageTitle}
        </h1>

        <input type="text" onChange={this.ChangeHandle} />

        <button onClick={this.changeTitleHandler.bind(this, 'App өөрчлөлт')}>Гарчиг өөрчлөх</button>
        <Car
          name={cars[0].name}
          year={cars[0].year}
          onChangeTitle={this.changeTitleHandler.bind(this, cars[0].name)}
        />
        <Car
          name={cars[1].name}
          year={cars[1].year}
          onChangeTitle={() => this.changeTitleHandler(cars[1].name)}
        />
        <Car
          name={cars[2].name}
          year={cars[2].year}
          onChangeTitle={() => this.changeTitleHandler(cars[2].name)}
        />
      </div>
    )
  }
}

болсон байгаа.

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

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 програмын инициализац хийгдэх боловч хэрэглэгч хуудсыг харах хүртэл хэдэн шатыг дамждаг.

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

Хөтөч дээр ажилладаг програмын чухал хэсэг бол хуудасны хэвжүүлэлт байдаг гэдгийг бүгд мэднэ. Хуудасны харагдах хэлбэр, өнгөний зөв сонголт нь таны програмыг бусдаас ялгаруулан харагдуулах нэг гол хүчин зүйл гэдгийг санаарай.

Vue -гийн компонентод хэвүүдийг /css style/ яаж ашиглах талаар үзье. Тухайлбал компонентийн style хэсгийг хэрхэн ашиглах тухай юм. Үүний тулд төслийн компонентуудийн кодыг доорх байдлаар хураангуйлая.
App.vue файл.

<template>
  <div>
    <app-counter></app-counter>
    <app-car></app-car>  
  </div>
</template>

<script>
import Car from './components/Car.vue'
import Counter from './components/Counter.vue'

export default {
  components: {
    appCar: Car,
    appCounter: Counter
  }
}
</script>

Жич: Сүүлийн жилүүдэд javascript фреймворкууд эрчимтэй хөгжин програмчлалын хэлүүдийн рейтенгд нилээд дээгүүр байранд орж ирэх болсон. Иймээс дэлхийн чиг хандлагаас хоцрохгүйн тулд хэлийг судлан суралцахад манай сайт таныг дэмжин ажиллана. Хичээлүүдийг бүгдийг Vue фреймворкийн үндсэн ойлголтууд багцаас үзээрэй.

Үйл явдал /event/ тодорхой үйлдэл хийгдсэн талаар системд мэдэгддэг. Хэрвээ бид энэхүү үйлдлийг ажиглах хэрэгтэй бол яг энд…

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

олон гишүүнтийг үржигдхүүн болгон задал.

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

 

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

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

 

Тоног төхөөрөмжийн сайжруулалтын үр дүнд ажилчны хөдөлмөрийн бүтээмж жилд хоёр удаа нэг ижил хувиар дээшилжээ. Хэрвээ ажилчин нэг ижил хугацаанд өмнө нь 2500 х.н харин одоо 2809 х.н бутээгдхүүн хийдэг болсон бол хөдөлмөрийн бүтээмж өсөх бүрдээ хэдэн хувиар өссөн бэ?

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