Pengenalan Pantas untuk React.js

React memperkasakan penciptaan tapak web dinamik yang dipaparkan sepenuhnya dalam penyemak imbas. Elemen terasnya ialah JSX, sintaks yang menyerupai HTML dan XML.

Language	Full Form	Use	Tags
HTML	Hyper Text Markup Language	Website Development	Predefined tags (e.g., H1, H2, P)
XML	Extensible Markup Language	Data Structuring	Customizable Tags
JSX	JavaScript XML	Combines HTML and JavaScript	HTML & Custom Tags

Contoh Ilustrasi

HTML

<code class="language-html"><div>
  <h1>This is heading 1</h1>
  <p>This is an example paragraph in HTML</p>
</div></code>

XML

<code class="language-xml"><example><title>XML Example
  <note>This is a note</note><data1>Example Data</data1><data2>Example Data</data2></title></example></code>

JSX

<code class="language-javascript">function ExampleReactComponent() {
  return (
    <div>
      <h1>This is heading 1</h1>
      <p>This is an example paragraph in JSX</p>
    </div>
  );
}</code>

Persamaan antara HTML, XML dan JSX adalah jelas. JSX secara unik menyepadukan HTML dalam JavaScript, maka namanya: JavaScript XML.

Gabungan HTML dan JavaScript ini membolehkan manipulasi HTML dinamik. Contohnya, klik butang boleh menogol nama kelas.

Komponen Reaksi

React memudahkan definisi komponen tersuai yang mengembalikan JSX. Pada asasnya, komponen React ialah fungsi JavaScript yang menjana JSX.

Setelah memaparkan komponen root React, JSX ditukar secara automatik kepada HTML dan disepadukan ke dalam halaman web. React membenarkan pembuatan komponen tersuai (sama seperti teg tersuai) untuk dimasukkan dalam komponen lain.

Berikut ialah komponen yang menggunakan ExampleReactComponent:

<code class="language-javascript">function RootReactComponent() {
  return (
    <div>
      <h1>This is the main Component</h1>
      <ExampleReactComponent />
    </div>
  );
}</code>

Prop

Serupa dengan atribut HTML, komponen React menggunakan prop.

<code class="language-javascript">function PropsExample(props) {
  console.log(props); // Prints { exampleValue: "example-value" }
  return (
    <div>
      <h1>Props Example</h1>
      {props.exampleValue}
    </div>
  );
}

function MainComponent() {
  return (
    <div>
      <h1>This is the Main Component</h1>
      <PropsExample exampleValue={"example-value"} />
    </div>
  );
}</code>

Rendering MainComponent memanggil PropsExample dengan { exampleValue: "example-value" } sebagai hujah props. Ambil perhatian bahawa pembolehubah JavaScript dibenamkan dalam JSX menggunakan {}.

Negeri

Data biasanya disimpan dalam pembolehubah untuk paparan. React menggunakan "keadaan" untuk pengurusan data, bertindak sebagai mekanisme getter/setter. Apabila keadaan diubah suai, React mengemas kini HTML komponen secara automatik.

Contoh ini menunjukkan kemas kini HTML automatik selepas perubahan keadaan:

<code class="language-javascript">import { useState } from 'react';

function IncrementDecrement() {
  const [value, setValue] = useState(0); // Initial value: 0

  function increment(e) {
    setValue(value + 1);
  }

  function decrement(e) {
    setValue(value - 1);
  }

  return (
    <div>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      {value}
    </div>
  );
}</code>

Membina Apl Reaksi dengan Vite

Alat seperti Vite menyelaraskan penggabungan komponen React dan JSX ke dalam JavaScript boleh laksana pelayar.

Untuk memulakan projek React:

<code class="language-bash">npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev</code>

Kesimpulan

Pengenalan kepada React.js ini memberikan pemahaman asas. Selepas menyediakan projek Vite, percubaan dengan mencipta komponen React untuk mendalami pemahaman anda. Sumber pembelajaran lanjut boleh didapati di https://www.php.cn/link/27a5eaafdb88c45dd61732d6a6493421.

Atas ialah kandungan terperinci Pengenalan Pantas untuk React.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!