React bo’yicha darslar. Reactni o’rnatamiz

React kutubxonasini o’rganishni boshladim va kimgadir asqotib qolishi uchun o’rganish jarayonini post sifatida joylashtirib boraman.

React o’zi nima?

Bu – foydalanuvchi interfeyslarini yasash uchun mo’ljallangan Javascript kutubxonasi. U Facebook, Instagram va individual dasturchilar tomonidan qo’llab-quvvatlab turiladi.

Kutubxona dasturchilarga ma’lumotlarni yetkazib beruvchi va sahifani yangilamagan holda o’zgartiruvchi veb-ilovalar yasashda qo’l keladi. Uning asosiy maqsadi tezlik, oddiylik va moslashuvchanlikdir. Ilovalarda kutubxona faqatgina foydalanuvchi interfeyslarini ishlab chiqishda qo’l keladi va boshqa Javascript kutubxonalari bilan birga ishlatilishi mumkin.

O’rnatishga talablar:

1. React Javascript kutubxona bo’lgani uchun uni boshlashdan avval Javascriptni bilishingiz talab etiladi. https://reactjs.org/ – bu yerda kod sintaksisi va ba’zi misollarni ko’rib chiqishingiz mumkin.
2. Kompyuterda Nodejsning ohirgi versiyalaridan biri o’rnatilgan bo’lishi kerak. Maqola yozilayotgan paytda so’nggi versiya Node 8.9.4 edi. Qanday qilib o’rnatish: http://dasturchilar.uz/posts.php?id=207
3. Node package manager (NPM)ni o’rnatish – buni alohida o’rnatishning keragi yo’q, npm shundoq ham node ichida keladi. npm versiyasi eskiroq bo’lsa, uni quyidagi buyruq bilan yangilash mumkin:

   npm install npm@latest -g
   

4. Ingliz tilini o’qib tushuna oladigan darajada bilish 😉

Reactni o’rnatish

Create React App yangi ilova yaratish uchun eng qulay vosita bo’lib, sizga fayl strukturasini tayyorlab beradi. Uni o’rnatish uchun quyidagi buyruqni ishlating:

npm install -g create-react-app

Dastur strukturasini yaratish uchun:

create-react-app my-app

Bunda fayllardan iborat my-app nomli papka yaratiladi. Keyin papkani ichiga kirib, dasturni ishga tushiramiz:

cd my-app
npm start

Hammasi to’g’ri ishlagan bo’lsa, brauzerda http://localhost:3000 ochilishi va «Welcome» yozuvi ko’rinishi kerak:

Hello world

Eng oddiy misol quyidagicha bo’ladi:

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

Uni /src/App.js fayliga quyidagicha yozishingiz mumkin:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <h1>Hello, world!</h1>
    );
  }
}

export default App;

Yana bir varianti (createElement yordamida):

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return React.createElement("h1", null, 'Hello World');
  }
}

export default App;

Komponentsiz ko’rinishi:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

const App = () => <h1>Hello world</h1>

export default App;

Javascriptga o’xshamaydi, shunaqami? 😀

React sintaksisi ES6 va JSXdan iborat bo’lib, umumiy holda Javascriptning zamonaviy ko’rinishiga ega.