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

Өмнөх хичээлүүдэд үзсэн онолын мэдлэг дээрээ суурилан түүнийгээ батгах дадлага болгон 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 текстийг л үзүүлнэ. Дадлагын төслөө үүсгэсэн тул дараагийн хичээлүүдээс төслийн хөгжүүлэлтийг хийх болно.

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

Холбоотой материалууд
CSS классуудтай ажиллах

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

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

ErrorBoundary

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

react 16 гаас дээш хувилбарт бий болсон кодод үүссэн алдаануудыг илүү эвтэйхэн боловсруулахад зориулагдсан ErrorBoundary амьдралын шинэ циклийн талаар судлая. ErrorBoundary аргыг туршихын тулд төслийн src хавтас ErrorBoundary хавтаст үүсгээд

import React from 'react'

export default class ErrorBoundary extends React.Component {
  state = {
    hasError: false
  }

  componentDidCatch(error, info) {
    this.setState({ hasError: true })
  }

  render() {
    if (this.state.hasError) {
      return <h2 style={{ color: 'red' }}>Алдаа гарлаа</h2>
    }
    return this.props.children
  }
}

код бүхий шинэ ErrorBoundary компонентийг үүсгэе.

Интерсептор

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

Хичээлээр vue-resource сангийн интерсептор гэдэг сонирхолтой боломжийн тухай үзье. vue-resource сангийн github дээрх хаягаар хандан сан серверт илгээсэн хүсэлт, хариултад интерсепторийг хэрхэн дэмждэг талаар дэлгэрүүлэн үзэж болно.

Интерсепторийг идэвхижүүлбэл өөрөөр хэлбэл интерсептор функцуудыг нэмвэл серверт илгээгдэж буй хүсэлт, серверээс ирсэн хариу бүрийг барих боломж нээгдэнэ.

Фрагмент

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

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

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

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

Үйл явдал…

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

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

 
Холбоосын параметрүүд

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

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

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

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

 
Бодлого 2.116

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

 
Бодлого 8.122

Задаргааны сүүлээсээ 3 дахь гишүүний бином коэффициент 45 бол задаргааны 6-р гишүүнийг ол.

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

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