HTML から JSX への変換 : JSX と JSX のルール

JSX とは何か、そして JSX のルールを学びます。

---

JSX は、JavaScript の構文拡張です。 JavaScript ファイル内に HTML のような書式設定を記述することができます。

Web、Html、Css、および JavaScript に基づいています。 Web 開発者は、ページのコンテンツを Html ファイルとして、デザインを Css ファイルとして、ロジックを JavaScript ファイルとして個別に作成しました。

• 知っておくべきこと: JSX は構文拡張機能ですが、React は JavaScript ライブラリです。

<div>





<pre class="brush:php;toolbar:false">
//CSS

.wrapper {
   display : flex;
}

function myFunction() {
  document.getElementById("wrapper").innerHTML = "Hello world";
}

しかし、Web がよりインタラクティブになるにつれて、ロジックがより重要になってきました。 JavaScript は Html を管理していました。したがって、React では、ロジックと書式設定は コンポーネント 内に共存します。

React コンポーネントの例 :

import React, { useState } from "react";

function App() {
  const [formData, setFormData] = useState({
    username: "",
    password: "",
  });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData((prevState) => ({ ...prevState, [name]: value }));
  };

  return (
    <form>
      <label>
        Username:
        <input
          type="text"
          name="username"
          value={formData.username}
          onChange={handleChange}
        />
      </label>
      <label>
        Password:
        <input
          type="password"
          name="password"
          value={formData.password}
          onChange={handleChange}
        />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

編集のたびに HTML タグの同期を保つために、レンダリング マークアップとロジックを一緒に保つことが重要です。

React コンポーネント は、React がブラウザーでレンダリングするマークアップを含む JavaScript 関数です。 React コンポーネント は、このマークアップに JSX と呼ばれる構文拡張機能を使用します。 JSX は HTML のように見えます。

---

JSX のルール

1.単一のルート要素を返します

コンポーネントから要素を返すには、要素を単一の親タグでラップします。 またはフラグメント (<>) を使用できます。

たとえば div

<div>
  <h1>Hedy Lamarr's Todos</h1>
  <img 
    src="https://picsum.photos/200/300" 
    alt="lorempicsum" 
  >
</div>

---

例: <>

<>
   <h1>Hedy Lamarr's Todos</h1>
  <img 
    src="https://picsum.photos/200/300" 
    alt="lorempicsum" 
  />
</>

• フラグメントを使用すると、ブラウザの HTML ツリーに痕跡を残さずにグループ化できます。

---

2.すべてのタグを閉じます

JSX では、すべてのタグが 閉じられている 必要があります。たとえば、自己終了タグ (Html の img など)

例 :

<img 
    src="https://picsum.photos/200/300" 
    alt="lorempicsum" 
  />

---

3.キャメルケース

React では、多くの HTML プロパティは camelCase で記述されます。

例 :

 <img 
    src="https://picsum.photos/200/300" 
    alt="lorempicsum" 
    className="photo"
  />

<button onClick={handleClick}>Click Me</button>

---

JSX での JavaScript

JSX では、小さな JavaScript ロジックを追加したり、この マークアップ 内の動的機能を参照したりすることが必要になる場合があります。この場合、JSX

で括弧を使用できます。

• 文字列属性を JSX に渡す

文字列属性を JSX に渡す場合は、それを一重引用符または二重引用符で囲みます

例 :

<div>





<pre class="brush:php;toolbar:false">
//CSS

.wrapper {
   display : flex;
}

ここでは、src と alt が文字列として渡されています。ただし、src または alt テキストを動的に指定したい場合は、二重引用符 の代わりに中括弧を使用して javascript

の値を使用できます。

例 :

function myFunction() {
  document.getElementById("wrapper").innerHTML = "Hello world";
}

---

• 中括弧の使用

JavaScript を 中括弧 {} とともに使用することができます。関数や変数などを使用できます。

例 :

import React, { useState } from "react";

function App() {
  const [formData, setFormData] = useState({
    username: "",
    password: "",
  });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData((prevState) => ({ ...prevState, [name]: value }));
  };

  return (
    <form>
      <label>
        Username:
        <input
          type="text"
          name="username"
          value={formData.username}
          onChange={handleChange}
        />
      </label>
      <label>
        Password:
        <input
          type="password"
          name="password"
          value={formData.password}
          onChange={handleChange}
        />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

---

• 二重中括弧の使用

React では、インライン スタイル (CSS クラスはほとんどの場合にうまく機能します) を使用する必要はありません。ただし、インライン スタイルが必要な場合は、オブジェクトを style 属性に渡すことができます。 二重中括弧を使用します。

例 :

デフォルト関数 TodoList() をエクスポート {
  戻る （
    

• JSX に {{ }} が表示されますが、これは JSX カーリー内のオブジェクトであることがわかります。

• インライン スタイル プロパティは、キャメルケースとして記述する必要があります.

---

複数の式を 1 つのオブジェクトに移動し、JSX 内で中括弧内で使用できます

const person = {
  名前：「グレゴリオ・Y・ザラ」、
  テーマ： {
    背景色: '赤'、
    色: '黄色'
  }
};

デフォルト関数 TodoList() をエクスポート {
  戻る （
    <div>




<hr>

<h2>
  
  
  結論
</h2>

<p>JSX は、Web 開発プロセスをより効果的かつ実用的なものにする重要なツールです。 JSX を使用すると、レンダリング マークアップとロジックをまとめて保持し、編集のたびに HTML デカールを相互に同期させることができます。</p>


<hr>

<p>私の記事が気に入ったら、コーヒーをおごってください :)<br>
<img src="https://img.php.cn/upload/article/000/000/000/173199438683667.jpg" alt="Converting HTML to JSX : JSX and Rules of JSX"></p>




          </div>

            
        

以上がHTML から JSX への変換 : JSX と JSX のルールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。