Komponen DOM React

React mendukung semua komponen HTML dan SVG bawaan peramban.

Komponen-Komponen Umum

Semua komponen bawaan peramban mendukung beberapa props dan events.

Komponen-Komponen Umum (contoh: <div>)

Ini termasuk props spesifik React seperti ref dan dangerouslySetInnerHTML.

Komponen Form

Komponen-komponen bawaan peramban ini menerima masukan dari pengguna:

Komponen-komponen tersebut spesial dalam React karena dengan mengoper prop value ke dalamnya, akan membuatnya menjadi controlled component.

Semua komponen HTML

React mendukung semua komponen HTML bawaan peramban. Ini termasuk:

Catatan

Serupa dengan standar panduan DOM, React menggunakan konvensi camelCase untuk penamaan props. Sebagai contoh, Anda disarankan menulis tabIndex ketimbang tabindex. Anda dapat mengubah HTML yang telah ada menjadi JSX menggunakan online converter.

Elemen HTML Custom

Jika Anda render sebuah tag menggunakan tanda hubung, seperti <my-element>, React akan mengasumsikan Anda untuk render elemen HTML custom. Pada React, cara kerja rendering pada elemen custom akan berbeda dengan rendering pada tags bawaan peramban:

Semua props dari custom element akan diserialisasikan menjadi strings dan selalu disetel menggunakan attributes.
Custom elements menerima class ketimbang className, dan for ketimbang htmlFor.

Jika Anda render sebuah elemen HTML bawaan peramban dengan atribut is, maka itu akan diperlakukan sebagai custom element.

Catatan

Versi React mendatang akan menambahkan lebih banyak dukungan komprehensif untuk custom elements.

Anda dapat mencobanya dengan memperbarui packages React ke versi eksperimental terbaru:

react@experimental
react-dom@experimental

Versi eksperimental mungkin mengandung bugs. Jangan digunakan di production.

Semua komponen SVG

React mendukung semua komponen SVG bawaan peramban. Ini termasuk:

Catatan

Serupa dengan standar panduan DOM, React menggunakan konvensi camelCase untuk penamaan props. Sebagai contoh, Anda disarankan untuk menuliskan tabIndex ketimbang tabindex. Anda juga dapat mengubah SVG yang telah ada ke JSX menggunakan online converter.

Atribut namespaced juga harus dituliskan tanpa tanda titik dua:

xlink:actuate menjadi xlinkActuate.
xlink:arcrole menjadi xlinkArcrole.
xlink:href menjadi xlinkHref.
xlink:role menjadi xlinkRole.
xlink:show menjadi xlinkShow.
xlink:title menjadi xlinkTitle.
xlink:type menjadi xlinkType.
xml:base menjadi xmlBase.
xml:lang menjadi xmlLang.
xml:space menjadi xmlSpace.
xmlns:xlink menjadi xmlnsXlink.

SelanjutnyaUmum (e.g. <div>)