React kutubxonasini örganişni boşladim va kimgadir asqotib qolişi uçun örganiş jarayonini post sifatida joylaştirib boraman.

React özi nima?

Bu - foydalanuvçi interfeyslarini yasaş uçun möljallangan Javascript kutubxonasi. U Facebook, Instagram va individual dasturçilar tomonidan qöllab-quvvatlab turiladi.

Kutubxona dasturçilarga ma'lumotlarni yetkazib beruvçi va sahifani yangilamagan holda özgartiruvçi veb-ilovalar yasaşda qöl keladi. Uning asosiy maqsadi tezlik, oddiylik va moslaşuvçanlikdir. Ilovalarda kutubxona faqatgina foydalanuvçi interfeyslarini işlab çiqişda qöl keladi va boşqa Javascript kutubxonalari bilan birga işlatilişi mumkin.

Örnatişga talablar:

1. React Javascript kutubxona bölgani uçun uni boşlaşdan avval Javascriptni bilişingiz talab etiladi. https://reactjs.org/ - bu yerda kod sintaksisi va ba'zi misollarni körib çiqişingiz mumkin.
2. Kompyuterda Nodejsning ohirgi versiyalaridan biri örnatilgan bölişi kerak. Maqola yozilayotgan paytda sönggi versiya Node 8.9.4 edi. Qanday qilib örnatiş: https://dasturchilar.uz/posts.php?id=207
3. Node package manager (NPM)ni örnatiş - buni alohida örnatişning keragi yöq, npm şundoq ham node içida keladi. npm versiyasi eskiroq bölsa, uni quyidagi buyruq bilan yangilaş mumkin:

npm install npm@latest -g

4. Ingliz tilini öqib tuşuna oladigan darajada biliş ;-)

Reactni örnatiş

Create React App yangi ilova yaratiş uçun eng qulay vosita bölib, sizga fayl strukturasini tayyorlab beradi. Uni örnatiş uçun quyidagi buyruqni işlating:

npm install -g create-react-app

Dastur strukturasini yaratiş uçun:

create-react-app my-app

Bunda fayllardan iborat my-app nomli papka yaratiladi. Keyin papkani içiga kirib, dasturni işga tuşiramiz:

cd my-app
npm start

Hammasi töğri işlagan bölsa, brauzerda http://localhost:3000 oçilişi va "Welcome" yozuvi körinişi kerak:

React örnatildi

Hello world

Eng oddiy misol quyidagiça böladi:

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

Uni /src/App.js fayliga quyidagiça yozişingiz 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 körinişi:

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

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

export default App;

Javascriptga öxşamaydi, şunaqami? :-D

React sintaksisi ES6 va JSXdan iborat bölib, umumiy holda Javascriptning zamonaviy körinişiga ega.