Səhifəyə React Əlavə Et

These docs are old and won’t be updated. Go to react.dev for the new React docs.

See Add React to an Existing Project for the recommended ways to add React.

İstədiyiniz qədər az və ya çox React işlədin.

React tədrici adaptasiya ilə dizayn olunub. Siz istədiyiniz qədər az və ya çox React işlədə bilərsiniz. Siz mövcud səhifəyə bir az interktivlik əlavə etmək istəyə bilərsiniz. React komponentləri bunun üçün çox yaxşıdır.

Veb səhifələrin əksəriyyəti tək səhifəli applikasiya deyil və olmamalıdırlar. React-i bir neçə sətr kod ilə və heç bir yaranma alətindən istifadə etmədən veb səhifənin kiçik bir hissəsində sınayın. Sonra, React-in varlığını yavaş yavaş genişləndirə bilər və ya bir neçə dinamik vidcet üçün saxlaya bilərsiniz.

React-i Bir Dəqiqəyə Əlavə Et
Fakultativ: React-i JSX-də Sına (paketləmə qurğusu lazım deyil!)

React-i Bir Dəqiqəyə Əlavə Et

Bu bölmədə, React-i mövcud veb səhifəyə necə əlavə edəcəyimizi göstərəcəyik. Buradakı misalları öz veb səhifənizdə yoxlaya bilər və ya boş HTML faylı yaradıb praktika edə bilərsiniz.

Burada çətin alətlər və ya yükləmə tələbləri olmayacaq — bu bölməni bitirmək üçün sizə yalnız internet və bir dəqiqə vaxt lazımdır.

Fakultativ: Tam nümunəni yüklə (2KB zip olunmuş formada)

Addım 1: HTML-ə DOM Konteyneri Əlavə Et

İlk olaraq, redaktə ediləcək HTML səhifəsini açın. React-də render ediləcək komponentin harada yerləşdirilməsi üçün boş <div> təqi əlavə edin. Məsələn:

<!-- ... mövcud HTML ... -->

<div id="like_button_container"></div>
<!-- ... mövcud HTML ... -->

Biz <div> təqinə unikal id HTML atributu verdik. Göstərilən ID ilə elementi JavaScript kodda taparaq React komponentini bu elementə render etmək mümkün olacaq.

Məsləhət

Siz bunun kimi “konteyner” <div>-ini <body> təqinin istənilən yerində yerləşdirə bilərsiniz. Bir səhifədə istədiyiniz qədər müstəqil DOM konteynerləri yerləşdirmək mümkündür. Bu elementlər adətən boş olurlar. React bu elementin daxilində olan bütün kontenti öz markapı ilə əvəzləyəcək.

Addım 2: Script Təqləri Əlavə Et

İndi, </body> təqi bağlanmamışdan dərhal öncə üç <script> təqi əlavə edin:

  <!-- ... digər HTML ... -->

  <!-- React-i Yüklə. -->
  <!-- Qeyd: yerləşdirmə (deployment) zamanı, "development.js"-i "production.min.js" ilə əvəzləyin. -->
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
  <!-- React komponentini yüklə. -->
  <script src="like_button.js"></script>
</body>

İlk iki təq React-i, üçüncü təq isə bizim komponentimizi yükləyəcək.

Addım 3: React Komponenti Yarat

HTML faylının yanında like_button.js faylı yaradın.

Bu starter kodunu yeni yaratdığınız fayla köçürün.

Məsləhət

Bu kod, LikeButton adlı React komponenti təyin edir. Bunu başa düşmürsünüzsə narahat olmayın — biz React-in əsas blokları haqqında dərslikdə və əsas konsepsiyalarda danışacağıq. İndi əsas məqsəd, kodu ekranda görməkdir!

Starter kodundandan sonra like_button.js faylının sonuna iki sətr əlavə edin:

// ... Köçürdüyünüz starter kodu ...

const domContainer = document.querySelector('#like_button_container');const root = ReactDOM.createRoot(domContainer);root.render(e(LikeButton));

Bu iki sətr kod, HTML-ə əlavə etdiyimiz <div> elementini tapacaq və “Like” düyməsi olan React komponentini bu elementin içərisində render edəcək.

Hamısı Budur!

Burada 4-cü addım yoxdur. Siz veb səhifənizə ilk React komponentinin əlavə etdiniz.

React-in inteqrasiyasına dair digər məsləhətlər üçün sonrakı bölmələrə baxın.

Tam nümunə koduna buradan baxın

Tam nümunəni yükləyin (2KB zipped)

Məsləhət: Komponenti Yenidən İşlədin

Adətən, React komponentləri HTML səhifəsinin bir neçə yerində istifadə edilir. Aşağıdakı nümunədə “Like” düyməsi fəqrli məlumatlar ilə üç dəfə göstərilir:

Tam nümunə koduna buradan baxın

Tam nümunəni yükləyin (2KB zip olunmuş formada)

Qeyd

Bu strategiya React ilə işlənilən hissələrinin bir birindən ayrı olduğu halda faydalıdır. React kodunun daxilində komponent kompozisiyasından istifadə etmək daha faydalıdır.

Məsləhət: Produksiya üçün JavaScript-i Minifikasiya Edin

Veb səhifəni produksiyaya yerləşdirmədən öncə, minifikasiya olunmamış JavaScript-in səhifəni çox yavaşladacağından xəbərdar olun.

Əgər applikasiya skriptlərini minifikasiya edirsinizsə, yüklənmiş HTML-in production.min.js ilə bitən React versiyasını yüklədikdə saytınız produksiya üçün hazır olacaq:

<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>

Əgər skriptlər üçün minifikasiya addımı yoxdursa, bunu quraşdırmağın yollarından biri buradadır.

Fakultativ: React-i JSX ilə Sınayın

Yuxarıdakı numünələrdə, biz yalnız brauzerlərdə nativ dəstəklənən xüsusiyyətlərdən istifadə etdik. Bu səbəbdən React-in render etməsi üçün funksiya çağırışından istifadə etdik:

const e = React.createElement;

// "Like" <button> göstər
return e(
  'button',
  { onClick: () => this.setState({ liked: true }) },
  'Like'
);

Lakin, React JSX işlətməyə icazə verir:

// "Like" <button> göstər
return (
  <button onClick={() => this.setState({ liked: true })}>
    Like
  </button>
);

Göstərilən kod parçaları eynidir. JSX-in tam fakultativ olmasına baxmayaraq bir çox adam React və digər kitabxanalar ilə UI kodu yazdıqda JSX-i faydalı görürlər.

Bu onlayn konverterdən JSX-i qurdalaya bilərsiniz.

JSX-i Tez Sına

JSX-i sınamağın ən tez yolu səhifəyə <script> təqi əlavə etməkdir:

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

İndi, type="text/babel" atributunu <script> təqlərinə əlavə edərək JSX-dən istifadə edə bilərsiniz. JSX işlədilən HTML faylını yükləyib JSX-i yoxlaya bilərsiniz.

Öyrənmək və ya sadə demolar yaratmaq üçün bu yol normaldır. Lakin, JSX-i bu formada işlətdikdə veb səhifəsi yavaşlayır və səhifə produksiya üçün əlverişli olmur. İrəli getmək üçün hazır olduqda eyni əlavə edilən <script> təqini və type="text/babel" atributlarını silin. Sonrakı bölmədə JSX preprosessorundan istifadə edərək bütün <script> təqlərini avtomatik olaraq JavaScript-ə çevirəcəyik.

Layihəyə JSX Əlavə Et

Layihəyə JSX əlavə etmək üçün paketləmə və ya development server kimi mürəkkəb alətlər lazım deyil. JSX əlavə etmək CSS preprosessor əlavə etmək kimidir. Yeganə tələb kompüterdə Node.js-in quraşdırılmış olmasıdır.

Terminaldan layihə direktoriyasına gedərək aşağıdakı iki əmri icra edin:

Addım 1: npm init -y əmrini icra edin (Əgər bu əmr uğursuz başa çatırsa bu düzəlişdən istifadə edin)
Addım 2: npm install babel-cli@6 babel-preset-react-app@3 əmrini icra edin

Məsləhət

Biz NPM-i yalnız JSX preprosessorunu yükləmək üçün işlədirik. Bu aləti başqa yerlədə işlətməyəcəyik. Həm React həm də applikasiya kodu dəyişiklik edilmədən <script> təqləri kimi qala bilərlər.

Təbrik Edirik! Siz layihənizə produksiyaya hazır JSX quruluşu əlavə etdiniz.

JSX Preprosessorunu İcra Et

src adlı direktoriya yaradaraq aşağıdaki əmri icra edin:

npx babel --watch src --out-dir . --presets react-app/prod

Qeyd

npx səhv deyil — bu NPM 5.2+ ilə gələn paket icra edən alətdir.

Əgər “You have mistakenly installed the babel package” xəta mesajını görürsünüzsə əvvəlki addımı qaçırmış ola bilərsiniz. Əvvəlki addımı eyni direktoriyada çağıraraq bu əmri təkrarlayın.

Bu əmrin bitməsini gözləməyin — bu əmr JSX üçün avtomatik gözətçi başladır.

İndi, JSX başlama kodu ilə src/like_button.js faylı yaratdıqda, gözətçi brauzerlərə uyğun sadə JavaScript kodu ilə çevrilmiş like_button.js faylı yaradacaq. Mənbə faylını JSX ilə dəyişdikdə, çevrilmə yenidən icra olunacaq.

Bonus olaraq, bu sizə köhnə brauzerləri sındırmadan siniflər kimi modern JavaScript sintaksisininin xüsusiyyətləsindən istifadə etməyə imkan yaradır. Bizim işlətdiyimiz alətin adı Babel-dir. Siz bu alət haqqında əlavə məlumat üçün bu alətin sənədlərinə baxa bilərsiniz.

Quraşdırma alətləri ilə işləməyə öyrəşdiyinizi hiss etdikdə və bu alətlərin daha çox iş görməsini istədikdə, populyar və asan işlənə bilən toolchain-lərə sonrakı bölmədən baxa bilərsiniz. Əgər lazım deyilsə, script təqləri işlətmək bəs edəcək!

Is this page useful?Bu səhifəni redaktə edin