JSX とは何か、そして JSX のルールを学びます。
JSX は、JavaScript の構文拡張です。 JavaScript ファイル内に HTML のような書式設定を記述することができます。
Web、Html、Css、および JavaScript に基づいています。 Web 開発者は、ページのコンテンツを Html ファイルとして、デザインを Css ファイルとして、ロジックを 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 のように見えます。
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"
/>
</>
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
で括弧を使用できます。文字列属性を 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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
