React Componentlar | Hooks qo'llanma 3

React yordamida birinchi JSX componentingizni yarating.

Reactda UI dagi hamma narsa componentlar hisoblanadi. Component bu React element(yoki JSX, JavaScript va HTML aralashmasi) qaytaruvchi JavaScript funksiyadir. 2 turdagi componentlar mavjud: Class componentlar va Function componentlar. Bu bo'limda biz Function componentlar bilan ishlaymiz.

CodeSandbox link

Bu darsdagi to'liq kodni quyidan topa olasiz: https://codesandbox.io/s/react-component-src-sdjpxb

Yangi fayl yaratish

Src folderining ichida MyButtonComponent.jsx nomli yangi fayl yarating va Reactni import qiling.

// MyButtonComponenet.jsx

import React from "react"

Function yaratish

Undan keyin biz JavaScript funksiya yaratishimiz kerak va uni MyButtonComponent deb nomlaymiz.(Funksiyani ixtiyoriy nomlang)

// MyButtonComponent.jsx

import React from "react"

const MyButtonComponent  = () => {

}

Button qaytarish

JavaScript funksiyada biz biror narsa qaytarishimiz kerak va biz funksiyamizda Sign in deyuvchi buttonni qaytaramiz.

// MyButtonComponent.jsx

import React from "react"

const MyButtonComponent  = () => {
     return <button>Sign in</button>
}

Funksiyani export qilish

Bizning birinchi button komponentimizni dasturimizning boshqa yerlarida ishlata olishimiz uchun uni export qilishimiz kerak.

// MyButtonComponent.jsx

import React from "react"

const MyButtonComponent  = () => {
     return <button>Sign in</button>
}

export default MyButtonComponent

Keyingi darsda biz bu buttonga qanday style berishni ko'rib chiqamiz.

Komponentni ishlatish

Mavjud komponentni boshqa komponentlarda ishlatish uchun uni import qilib olishimiz kerak. Biz uni App komponentimizda ishlatamiz.

// App.js

import MyButtonComponent from "./MyButtonComponent"

Keyin esa uni return body da chaqiramiz.

// App.js

import React from "react"
import MyButtonComponent from "./MyButtonComponent"

export default function App(){
     return (
       <div>
           <h1>Birinchi React komponentim!</h1>
           <button>Sign in</button>
       </div>
     )
}