bereaksi BEJ
Bereaksi untuk menggantikan penggunaan konvensional BEJ JavaScript.
BEJ terlihat seperti XML merupakan perpanjangan dari sintaks JavaScript.
Kita tidak perlu menggunakan BEJ, tetapi memiliki keuntungan sebagai berikut:
- BEJ mengeksekusi lebih cepat karena dikompilasi ke dalam kode JavaScript setelah optimasi.
- Ini adalah jenis-aman, dapat ditemukan selama kesalahan kompilasi.
- Gunakan BEJ authoring Template mudah dan lebih cepat.
Gunakan BEJ
BEJ terlihat mirip dengan HTML, kita dapat melihat contoh:
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
Kami dapat bersarang di kode di atas beberapa tag HTML, Anda perlu menggunakan elemen div sekitarnya, contoh p elemen menambahkan kustomdata atribut-myattribute, tambahkan atribut khusus perlu menggunakan awalan data-.
ReactDOM.render(
<div>
<h1>本教程</h1>
<h2>欢迎学习 React</h2>
<p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
</div>
,
document.getElementById('example')
);
File independen
Kode Bereaksi BEJ Anda dapat ditempatkan pada dokumen terpisah, misalnya, kita membuat helloworld_react.js berkas, sebagai berikut:
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
Kemudian dimasukkan ke file JS dalam file HTML:
<body> <div id="example"></div> <script type="text/babel" src="helloworld_react.js"></script> </body>
ekspresi JavaScript
Kita dapat menggunakan ekspresi JavaScript di BEJ. Menulis ekspresi dalam kurung kurawal{}.Contohnya adalah sebagai berikut:
ReactDOM.render(
<div>
<h1>{1+1}</h1>
</div>
,
document.getElementById('example')
);
Anda tidak dapat menggunakanjika pernyataan laindi BEJ, satu dapat menggunakanbersyarat (operator ternary)ekspresi sebaliknya. Contoh berikut, jika variabeli samadengan1browser yang akan menampilkanbenar,jika Anda mengubah nilai i, itu akan menampilkanpalsu.
ReactDOM.render(
<div>
<h1>{i == 1 ? 'True!' : 'False'}</h1>
</div>
,
document.getElementById('example')
);
gaya
Bereaksi merekomendasikan menggunakan gaya inline. Kita dapat menggunakan sintaksCamelCase untuk mengatur gaya inline. Bereaksi menambahkan pxsecara otomatis setelah sejumlah elemen tertentu. Contoh berikut menunjukkan menambahkanMyStyle gaya inline untuk elemen h1:
var myStyle = {
fontSize: 100,
color: '#FF0000'
};
ReactDOM.render(
<h1 style = {myStyle}>本教程</h1>,
document.getElementById('example')
);
catatan
Catatan perlu menulis di kawat gigi, contoh adalah sebagai berikut:
ReactDOM.render(
<div>
<h1>本教程</h1>
{/*注释...*/}
</div>,
document.getElementById('example')
);
susunan
BEJ memungkinkan penyisipan dalam array Template, array secara otomatis akan memperluas ke semua anggota:
var arr = [
<h1>本教程</h1>,
<h2>学的不仅是技术，更是梦想！</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
tag HTML vs Bereaksi perakitan
Bereaksi dapat membuat tag HTML (string) atau bereaksi komponen (kelas).
Untuk membuat tag HTML, hanya menggunakan nama tag dalam huruf kecil di BEJ.
var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));
Untuk membuat Bereaksi komponen, cukup membuat variabel awal lokal dengan huruf kapital.
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'));
Bereaksi BEJ menggunakan konvensi huruf besar dan kecil untuk membedakan kelas komponen lokal dan tag HTML.
Catatan:
Karena BEJ adalah JavaScript, sejumlah pengenal seperti
classdanfortidak direkomendasikan sebagai nama atribut XML. Sebagai alternatif, React DOM menggunakanclassNamedanhtmlFormelakukan properti terkait.