React kirish

React

React bu Java Script dasturlash tilining UI yaratish uchun xizmat qiluvchi deklarativ(e’lon qiluvchi, buyruq berib boruvchi), samarali hamda flexible(moslashuvchan) kutubxonasi bo’lib hisoblanadi.

React bizga murakkab UI deziyanlarni komponentlar(components) deb ataluvchi kichik, bir-biridan ajralgan, bo’laklangan kodlarga ajratib dastur yozishimizga yordan beradi.

Reactda turli xil ‘component’lar mavjud bo’lib biz ‘React.Component’ ‘subclass’ dan o’rganib boshlaymiz;

React component ‘class’i yoki tipi desak ham bo’ladi o’zida props(ya’ni «properties») deb ataluvchi parametrlarni oladi.

Render metodi

-React Render metodi orqali o’zgarishlar irarxiyasini(a hierarchy of views) tuzib qaytaradi;

-Render metodi-biz ekranda ko’rmoqchi bo’lgan narsaning tavfsivini qaytaradi(ya’ni return qiladi);

— Render nimaligini tushuntiruvchi eng oddiy misol bu ‘React element’ larini qaytarishidir(return qiladi);

React da ishlatiladigan sintaktikalar

Ko’plab React Developer lar «JSX» deb ataluvchi maxsus sintaktikadan foydalanishadi va bu struktura tuzishni ancha osonlashtiradi;

«JSX» ga misol tariqasida quyidagi kodni keltirsak bo’ladi:

class ShoppingList extends React.Component {
    render() {
        return ( 
           
             Shopping List
            for {
                this.props.name
            } 
    
        Mundarija                    
                скрыть
            
            

        
                Shopping List for { this.props.name }
    
    
    
                Hello, world
    
    
 
            
             Instagram  
             WhatsApp  
             Oculus  
            
 
        );
    }
}

Xuddi shu misolda biz yozgan

xuddi shu joyning o’zida yatilib ketilmoqda, buni boshqa usul bilan quyidagicha yozsak ham bo’ladi:

return React.createElement('div', {
        className: 'shopping-list'
    },
    React.createElement('h1', /* ... h1 children ... */ ),

    React.createElement('ul', /* ... ul children ... */ )

);

‘React.createElement’ oldingi misol bilan ekvivalent hisoblanadi.

React Elementlari

Boshqa ‘Browser DOM element’laridan farqli tarzda, React elementlari oddiy object ko’rinishida oson yaratiladi. ReactDOM ning o’zi bizga elementlarni yaratib bir-biriga moslashimizga yordam beradi. Bizning HTML faylimizda bitta

box bor bo’lsa va uni «root» DOM node deb atasak bo’ladi, chuni uning ichidagi hamma narsa ‘ReactDOM’ orqali boshqariladi;

Odatda faqat React bilan qilinayotgan dasturlarda bitta ‘rootDOM node’ bo’ladi. Agar biz oldindan bor bo’lgan dasturga React ni integratsiya qilmoqchi bo’lsak hoxlaganimizcha alohida ajralgan ‘rootDOM node’ larniqo’shishimiz mumkin.

‘root DOM node’ da ‘React elementi’ni ko’rsatish uchun ikkalasini ham(elementni va rootni) ReactDOM.render() ichiga o’tkazamiz ya’ni quyidagicha:

` const element =

Hello, world

;

ReactDOM.render(element, document.getElementById(‘root’));

React elementlari Immutable(o’zgarmas) hisoblanadi, ya’ni biz bir element yaratsak bu o’sha elemetning children(ichidagi elementiga) yoki attributlariga ta’sir qilmaydi;

Element bu xuddi kinodagi bitta kadrga o’xshaydi,UI ni update(yangilash) qilishimizning yagona yo’li yangi element yaratish va uni ReactDOM.render() ga yuborish hisoblanadi;

ReactDOM elementlarni va ularning children(ichidagi elementlarini) larini oldingisi bilan solishtiradi o’zgarish bo’lgan qisminigina yangilaydi va aynan shu xusiyati tufayli REACT DOM tez ishlaydi va oson yuklanadi hamda bu Reactni mashxur qilgan xususiyati ham hisoblanadi;

Manba:

Web Dasturlash
React kirish