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

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

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

Холбоотой материалууд
Төлөв үүсгэх

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

Өмнөх хичээлүүдэд React сан хэрхэн ажилладаг, create react app хэрэгсэл, хуудасны хэвийн бичлэгийн Jsx дүрмүүдтэй танилцан тэдгээрийн ажиллагааг жишээнд дээр судлан танилцсан бол одоо сангийн өөрийнх нь ажиллагаануудтай дэлгэрэнгүй танилцгаая. Эхлээд create react app хэрэгслээр үүсгэсэн төслийн үндсэн компонент болох App -аас өмнөх хичээлд судалсан зарим ойлголтуудын жишээ кодийг

class App extends Component {
  render() {
    const divStyle = {
      textAlign: 'center'
    }
    return (
      <div style={divStyle}>
        <h1>
          Hello world!
        </h1>
        <Car name={'Toyata Prius'} year={'2018'} />
        <Car name="Toyata Camry" year={'2019'} />
        <Car name={'Ford'} year={'2015'} />
      </div>
    )
  }
}

хасан цэвэрлэе.

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

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

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

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

Хариултын хувилбарууд

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

React сан компонентод суурилан ажилладаг тул асуултын хариултын хувилбаруудыг ActiveQuiz компонентоос салган тусд нь компонент болгоё. Үүний тулд төслийн ActiveQuiz компонентийг хадгалж буй хавтаст AnswersList шинэ хавтсыг үүсгээд түүнд AnswersList.js, AnswersList.module.css файлуудыг үүсгэн өгье.

Үйл явцаас урсгал /stream/ үүсгэх

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

RxJs санг ашиглах хичээлд бид стримийг өөрсдөө үүсгэсэн бол энэ хичээлд Javascript -ийн бэлэн обьектоос буюу үйл явцаас стримийг /урсгал/ хэрхэн үүсгэх талаар үзье. Үүний тулд index.html файлд товчийг

...
<body>
    <button>Дарах</button>
<script src="node_modules/rxjs/bundles/rxjs.umd.min.js"></script>
<script src="index.js"></script>
</body>
...

үүсгэн өгөөд товч дээр дарах үйл явцаас стрим үүсгэхийн тулд index.js файлд

var button = document.querySelector('button');
var btn$ = Rx.Observable.fromEvent(button, 'click');

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

Үйл явдал…

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

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

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

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

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

 
Зочин (Visitor)

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

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

 
Лямбда

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

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

 
Outlet компонент

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

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

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

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

…

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

 
Нэргүй арга

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

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

 
Урвуу матриц

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

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

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

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

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

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

функцийн тодорхойлогдох мужийг ол.

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

 
Бодлого 16.072

g(x)=2x-3x2 нь f(x)=x2-x3 -ийн уламжлал бол -ийг ол.

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

 
Бодлого 14.080

хязгаарыг ол.

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

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