Дадлага. /Төсөл үүсгэх/

Өмнөх хичээлүүдэд үзсэн онолын мэдлэг дээрээ суурилан түүнийгээ батгах дадлага болгон react дээр төслийг үүсгэе. Төслөө бид үе шаттайгаар өргөжүүлэх бөгөөд эхний ээлжинд компонент хэсэгт сурсан зүйлээ бататган авах болно. Цаашид судлах зүйлүүдийг төсөлдөө нэмэх байдлаар явах юм. Өөрөөр хэлбэл энэ төсөл манай туршилтын талбар болно.

Төслийг үүсгэхдээ консолийг ашиглах тул cmd командаар терминалаа нээгээд төслөө байршуулах хавтастаа шилжээд

react програм үүсгэх npx create-react-app react-quiz командыг өгөөрэй. Би төслөө D:\Projects\React хавтаст хадгалахаар сонгосон. Та өөрийн хүссэн хавтасаа сонгоорой. Төсөл тестийн програм байх тул нэрийг react-quiz гэж өгсөн болно. Нэрийг ч та хүссэнээрээ өгч болно. Та react програм үүсгэх хичээлийг үзсэн бол ажиллагааг мэдэх байх. Команд төслийг үүсгэсний дараа төслийг код засварлагч дээр нээгээд

терминалаас npm start командыг өгөн програм ажиллаж байгааг шалган үзээрэй. Ямар нэгэн асуудал үүсвэл npm install командаар төслийн хамаарлыг шинэчлээрэй.
Төсөлд анхдагчаар генераци хийгдсэн зарим зүйлүүдийг хасан төслийг цэвэрлэе. Төслийн src хавтаст шилжээд бид ашиглахгүй App.test.js, logo.svg, App.css файлуудыг устгаад App.js файлын кодоос

function App() {
  return (
    <div className="App">
      <h1>Hello React</h1>
    </div>
  );
}
export default App;

илүүдэл зүйлсийг хасвал програм хөтөчид

Hello React текстийг л үзүүлнэ. Дадлагын төслөө үүсгэсэн тул дараагийн хичээлүүдээс төслийн хөгжүүлэлтийг хийх болно.

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

Холбоотой материалууд
Дээд түвшингийн компонентууд

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

Дээд түвшингийн компонент гэж юу болох тэдгээрийг хэрхэн үүсгэн ашиглахыг авч үзье. Үүний тулд төслийн Car компонентийн кодийг дараах байдлаар

import React from "react";
import styles from "./Car.module.css";

class Car extends React.Component {
  render() {
    const inputClasses = [styles.input];

    if (this.props.name !== "") {
      inputClasses.push(styles.green);
    } else {
      inputClasses.push(styles.red);
    }

    if (this.props.name.length > 5) {
      inputClasses.push(styles.bold);
    }

    return (
      <div className={styles.Car}>
        <h3>Машиний нэр: {this.props.name}</h3>
        <p>
          Он: <strong>{this.props.year}</strong>
        </p>
        <input
          type="text"
          onChange={this.props.onChangeName}
          value={this.props.name}
          className={inputClasses.join(" ")}
        />
        <button className={styles.btn} onClick={this.props.onDelete}>
          Устгах
        </button>
      </div>
    );
  }
}

export default Car;

өөрчилье.

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

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

Сүүлийн жилүүдэд 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'));

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

Компонентууд ямар хэрэгтэй вэ?

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

Програмын төслийг боловсруулахдаа системийн ажиллагааг бие даасан, бие биеэсээ үл хамаарах хэсгүүдэд хуваан хэсэгчлэн кодлон тестлэхийг сайн практик гэж үздэг. Vuejs санд энэ аргачлалыг хэрэгжүүлэх суурь технологи бол компонент юм. Ер нь Vue -гийн төсөл төрөл бүрийн компонентуудаас бүрддэг тул хичээлийн материалыг сайтар судлан ойлгон авахыг хичээгээрэй. Хичээлээр компонент гэж юу болох, ямар хэрэгтэй гээд компоненттой холбоотой асуудлуудыг авч үзье. Асуудлыг энгийнгээс эхлэн ойлгох үүднээс

<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <title>Компонент</title>
    </head>
    <body>
        <div id="app">

        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
            })
        </script>        
    </body>
</html>

агуулга бүхий html файлыг авч үзье. Файлд app айдитай div блок түүнтэй холбосон Vue -гийн хувийг үүсгэсэн кодыг бид өмнөх хэсгээс мэднэ. 

Шүүлтийн операторууд

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

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

filter арга

Арга хэрхэн ажиллахыг шууд практик жишээн дээр харцгаая.

Rx.Observable.range(0, 10)
    .filter(x => x >3)
    .subscribe(createSubscribe('filter'));

Жишээнд стримийг RxJs сангийн Observable классын range аргаар үүсгэсэн. range арга 0 -ээс 10 хүртэлх тоон дарааллыг үүсгэнэ. filter аргад дарааллын урсгалд шүүлт тавих нөхцлийг дамжуулах ёстой. Аргад өгсөн нөхцлөөр тоон дарааллаас 0, 1, 3 элементүүдэд шүүлт /өөрөөр хэлбэл нөхцөлд тохирохгүй/ тавигдан 4 -өөс 10 хүртэлх тоонуудыг консолд үзүүлэх ёстой. Кодыг ажлуулбал

Outlet компонент

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

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

 
Хадгалагч (Memento)

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

 
Кодийн сайжруулалт

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

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

 
Хуваах

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

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

 
Зуучлагч (Mediator)

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

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

 
Делегатийн хэрэглээ

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

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

 
Нэмэлт санг…

react програмд олон хуудас үүсгэн удирдахын тулд react -ийн бүрэлдхүүнд ордоггүй ч түүнтэй нягт холбоотой ажилладаг нэмэлт пакетийг…

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

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

функц өгөгдөв.

  1. f(x) функцын x0=5 абсцисстай M цэгт татсан шүргэгч шулууны тэгшитгэл
  2. f(x) функцын график, дээрх шүргэгч шулуун болон координатын тэнхлэгүүдээр хүрээлэгдсэн дүрсийн талбай  
  3. f(x) функцын графикийг M цэгт шүргэх, төв нь OX (абсцисс) тэнхлэг дээр орших тойргийн тэгшитгэл

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

 
Бодлого 2.094

илэрхийллийн a=36,7 тэнцүү байх утгыг ол.

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

 
Бодлого 3.094

a ба b нь 3x2-x-1=0 тэгшитгэлийн шийдүүдтэй тэнцүү бол илэрхийллийн утгыг ол.

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

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