Dijelaskan oleh Hello world pengetahuan ReactJS_Basic

Artikel ini menyediakan contoh kod dan konsep peringkat tinggi dalam React.js, perpustakaan Javascript yang dibangunkan oleh jurutera Facebook untuk membina antara muka pengguna Konsep ini akan diterbitkan secara terperinci dalam artikel berikut, saya mesti mengingatkan anda bahawa jika anda seorang pakar ReactJS dan merasakan bahawa kod ini perlu diperbaiki, sila tulis kepada saya dengan cadangan anda dan saya akan mengemas kini artikel/kod ini dengan sewajarnya pada masa yang tepat

Sebelum saya terus menyiarkan beberapa contoh kod, saya mesti menyebut secara khusus: Agak sukar bagi pemula untuk mempelajari ReactJS, kerana baru-baru ini saya telah menulis kod pada AngularJS, saya perlu mengakui bahawa mereka membantu kami untuk membuat UI Terdapat perbezaan besar apabila ia berkaitan dengan kerja saya akan membuat satu lagi catatan blog membandingkan perbezaan utama antara mereka

Walau bagaimanapun, pada tahap yang tinggi, berikut ialah beberapa sebab mengapa saya mengambil laluan pembelajaran yang "lebih curam" semasa mempelajari ReactJS:

Berorientasikan komponen: ReactJS berorientasikan komponen, yang bermaksud anda perlu menganggap elemen UI sebagai komponen. Menariknya, komponen boleh digubah. Ini bermakna komponen boleh mempunyai satu atau lebih komponen dalaman. Kod di bawah menunjukkan ini
Sintaks JSX: Ia menggunakan sintaks JSX (seperti XML) yang menarik untuk menulis kod. Penterjemah JSX (precompiler) digunakan untuk menukar struktur sintaksis ini kepada JavaScript eksplisit

Model proksi acara: Ia mengikuti model delegasi acara untuk menangkap acara

Berikut ialah beberapa konsep utama yang ditunjukkan dalam kod:

Komponen
Ejen Acara
Sintaks JSX

Berikut ialah penerangan ringkas tentang perkara yang telah dilaksanakan oleh komponen

- Elemen kotak input di mana pengguna boleh memasukkan nama pengguna mereka. Seperti yang akan disebutkan dalam artikel berikut, kotak input ini sebenarnya adalah komponen "Nama Pengguna"

- elemen lapisan div, digunakan untuk memaparkan "Helo, nama pengguna". Seperti yang akan disebutkan dalam artikel berikut, lapisan div ini sebenarnya adalah komponen "HelloText"

Begini cara ia direka bentuk. Selain itu, sila cari kod yang mewakili konsep di bawah.

SayHello: Komponen boleh gubah

SayHello ialah komponen induk yang mengandungi dua komponen. Komponen induk ini terdiri daripada dua komponen dalaman. Satu komponen ialah UserName, yang digunakan untuk menyediakan pengguna dengan fungsi memasukkan nama, dan komponen lain ialah HelloText, yang digunakan untuk memaparkan teks, seperti Hello, world. Komponen induk ini mentakrifkan tiga API berbeza berikut:

getInitialState
handleNameSubmit
render (ini adalah antara muka yang diperlukan, komponen perlu mentakrifkan render untuk memberitahu React cara untuk memaparkan komponen sebagai tindak balas)

/
 // This is the parent component comprising of two inner components
 // One of the component is UserName which is used to allow user to enter their name
 // Other component is HelloText which displays the text such as Hello, World
 //
 var SayHello = React.createClass({
 // This is used to set the state, "data" which is 
 // accessed later in HelloText component to display the updated state
 // 
 getInitialState: function() {
  return {data: 'World'}
 },
 // It is recommended to capture events happening with any children
 // at the parent level and set the new state that updates the children appropriately
 handleNameSubmit: function(name) {
  this.setState({data: name});
 },
 // Render method which is comprised of two components such as UserName and HelloText
 //
 render: function() {
  return(
  <div>
  <UserName onNameSubmit={this.handleNameSubmit}/>
  <HelloText data={this.state.data}/>
  </div>
  );
 }
 });

Komponen Nama Pengguna

Komponen Nama Pengguna mempunyai dua kaedah berikut:

handleChange: digunakan untuk menangkap acara onChange
render: digunakan untuk memaparkan komponen

var UserName = React.createClass({
 handleChange: function() {
  var username = this.refs.username.getDOMNode().value.trim();
  this.props.onNameSubmit({username: username });
  this.refs.username.getDOMNode().value = '';
  return false;
 },
 render: function() {
  return(
  <form role="form" onChange={this.handleChange}>
   <div className="input-group input-group-lg">
   <input type="text" className="form-control col-md-8" placeholder="Type Your Name" ref="username"/>
   </div>
  </form>
  );
 }
 });

Komponen HelloText

Komponen HelloText hanya mempunyai satu kaedah untuk memaparkan komponen

 render：包含了展示HelloText组件内容的代码
 
var HelloText = React.createClass({
  render: function() {
  return (
  <div>
   <h3 id="Hello-this-props-data">Hello, {this.props.data}</h3>
  </div>
  );
  }
 });

Jika anda ingin mendapatkan kod penuh, saya telah menyiarkan kod pada

halaman hello-reactjs github. Sila berasa bebas untuk memberi komen atau memberi cadangan.