Dərindən JSX

Fundamental olaraq JSX, React.createElement(component, props, ...children) funksiyası üçün asan başa düşülə bilən sintaksisdir. Göstərilən JSX kodu:

<MyButton color="blue" shadowSize={2}>
  Tıkla
</MyButton>

aşağıdakı koda kompilyasiya olunur:

React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Tıkla'
)

Əgər uşaqlar yoxdursa, təqin özü bağlanan formasından istifadə etmək mümkündür. Göstərilən kod:

<div className="sidebar" />

aşağıdakı koda kompilyasiya olunur:

React.createElement(
  'div',
  {className: 'sidebar'}
)

Hər hansı bir JSX-in JavaScript-ə necə çevrildiyini yoxlamaq üçün onlayn Babel kompilyatorundan istifadə edə bilərsiniz.

React Element Tipinin Müəyyənləşdirilməsi

JSX təqinin ilk hissəsi React elementinin tipini təyin edir.

Böyük hərf ilə yazılan tiplər JSX təqinin React komponentinə istinad etdiyini göstərir. Bu təqlər dəyişənin adından istifadə edərək kompilyasiya olunur. Bu səbəbdən <Foo /> JSX ifadəsindən istifadə etdikdə Foo dəyişəni göstərilən scope-da olmalıdır.

React Scope-da Olmalıdır

JSX kodu React.createElement çağırışlarına kompilyasiya olduğundan React hər zaman JSX-in scope-unda olmalıdır.

JavaScript-in React və CustomButton dəyişənlərinə birbaşa istinad etmədiyinə baxmayaraq, aşağıdakı kodda hər iki idxalın olması vacibdir:

import React from 'react';import CustomButton from './CustomButton';
function WarningButton() {
  // return React.createElement(CustomButton, {color: 'red'}, null);  return <CustomButton color="red" />;
}

JavaScript paketləmə qurğusundan istifadə etmir və React-i <script> təqi ilə yükləyirsinizsə, React artıq React qlobal dəyişəni ilə scope-dadır.

JSX Tipində Nöqtənin İstifadəsi

JSX-dən React Komponentinə nöqtə ilə istinad etmək mümkündür. Bu sintaksis bir moduldan bir neçə React komponentini ixrac etdikdə faydalı ola bilər. Məsələn, MyComponents.DatePicker komponentini JSX-dən birbaşa çağıra bilərsiniz:

import React from 'react';

const MyComponents = {
  DatePicker: function DatePicker(props) {
    return <div>Burada {props.color} rəngli tarix olduğunu fikirləşin.</div>;
  }
}

function BlueDatePicker() {
  return <MyComponents.DatePicker color="blue" />;}

İstifadəçi Tərəfindən Təyin Edilən Komponentlər Böyük Hərf ilə Yazılmalıdır

Element tipi kiçik hərf ilə yazıldıqda <div> və ya <span> kimi daxili komponentlərə istinad edilir. Nəticədə, React.createElement funksiyasına 'div' və ya 'span' kimi mətnlər göndərilir. <Foo /> formasında böyük hərf ilə yazılan tiplər React.createElement(Foo) funksiyasına kompilyasiya olunur və JavaScript faylında təyin edilən və ya modula idxal edilən komponentə istinad edilir.

Biz komponentlərin böyük hərf ilə yazılmasını tövsiyə edirik. Əgər sizdə kiçik hərf ilə başlayan komponent varsa, bu komponenti böyük hərf ilə yazılmış dəyişənə təyin edib yeni dəyişəni JSX-də işlədin.

Məsələn, aşağıdakı kod istədiyiniz kimi işləməyəcək:

import React from 'react';

// Yanlışdır! Bu komponent böyük hərf ilə yazılmalıdır:function hello(props) {  // Düzdür! <div>-in etibarlı HTML təq olduğundan bu təq göstərildiyi formada işlədilə bilər:
  return <div>Salam {props.toWhat}