cari
Rumahhujung hadapan webtutorial jsDijelaskan 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
  1. handleNameSubmit
  2. 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
  1. 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.

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
react中canvas的用法是什么react中canvas的用法是什么Apr 27, 2022 pm 03:12 PM

在react中,canvas用于绘制各种图表、动画等;可以利用“react-konva”插件使用canvas,该插件是一个canvas第三方库,用于使用React操作canvas绘制复杂的画布图形,并提供了元素的事件机制和拖放操作的支持。

react中antd和dva是什么意思react中antd和dva是什么意思Apr 21, 2022 pm 03:25 PM

在react中,antd是基于Ant Design的React UI组件库,主要用于研发企业级中后台产品;dva是一个基于redux和“redux-saga”的数据流方案,内置了“react-router”和fetch,可理解为应用框架。

React是双向数据流吗React是双向数据流吗Apr 21, 2022 am 11:18 AM

React不是双向数据流,而是单向数据流。单向数据流是指数据在某个节点被改动后,只会影响一个方向上的其他节点;React中的表现就是数据主要通过props从父节点传递到子节点,若父级的某个props改变了,React会重渲染所有子节点。

react中为什么使用nodereact中为什么使用nodeApr 21, 2022 am 10:34 AM

因为在react中需要利用到webpack,而webpack依赖nodejs;webpack是一个模块打包机,在执行打包压缩的时候是依赖nodejs的,没有nodejs就不能使用webpack,所以react需要使用nodejs。

react中forceupdate的用法是什么react中forceupdate的用法是什么Apr 19, 2022 pm 12:03 PM

在react中,forceupdate()用于强制使组件跳过shouldComponentUpdate(),直接调用render(),可以触发组件的正常生命周期方法,语法为“component.forceUpdate(callback)”。

react是组件化开发吗react是组件化开发吗Apr 22, 2022 am 10:44 AM

react是组件化开发;组件化是React的核心思想,可以开发出一个个独立可复用的小组件来构造应用,任何的应用都会被抽象成一颗组件树,组件化开发也就是将一个页面拆分成一个个小的功能模块,每个功能完成自己这部分独立功能。

react与vue的虚拟dom有什么区别react与vue的虚拟dom有什么区别Apr 22, 2022 am 11:11 AM

react与vue的虚拟dom没有区别;react和vue的虚拟dom都是用js对象来模拟真实DOM,用虚拟DOM的diff来最小化更新真实DOM,可以减小不必要的性能损耗,按颗粒度分为不同的类型比较同层级dom节点,进行增、删、移的操作。

react和reactdom有什么区别react和reactdom有什么区别Apr 27, 2022 am 10:26 AM

react和reactdom的区别是:ReactDom只做和浏览器或DOM相关的操作,例如“ReactDOM.findDOMNode()”操作;而react负责除浏览器和DOM以外的相关操作,ReactDom是React的一部分。

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Alat panas

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

MantisBT

MantisBT

Mantis ialah alat pengesan kecacatan berasaskan web yang mudah digunakan yang direka untuk membantu dalam pengesanan kecacatan produk. Ia memerlukan PHP, MySQL dan pelayan web. Lihat perkhidmatan demo dan pengehosan kami.

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini