ReactJS - JSX: 基礎ガイド
こんにちは、未来のReact開発者たち！ReactJSとJSXのエキサイティングな世界への旅に、あなた们的ガイドとして参加できることを嬉しく思います。コンピュータサイエンスを多くの年間教えてきた者として、これらの概念を理解したときに無数の学生が輝くのを見てきました。では、一緒にReactの魔法を創り上げましょう！
JSXとは？
本題に入る前に、基本的なことをから始めましょう。JSXはJavaScript XMLの略で、JavaScriptのシンタックス拡張です。JavaScriptファイル内でHTMLのようなコードを書くことができます。私はこれを、HTMLがパン、JavaScriptが詰め物である美味しいサンドイッチのように考えています。うまー！
ReactJSでのJSXの使用
Reactでは、JSXはコンポーネントを構築するための推奨方法です。これによりコードがより読みやすく、理解しやすくなります。簡単な例を見てみましょう：
const element = <h1>Hello, React World!</h1>;これはHTMLのように見えますが、実際にはJSXです！Reactはこれをバックグラウンドで純粋なJavaScriptに変換します。
JSXの理由
「なぜ、JSXを使う必要があるのか。普通のJavaScriptを書くのではなく」と思うかもしれません。素晴らしい質問です！以下是その理由です：
- 慣れ親しみ: HTMLを知っているなら、JSXは自然に感じます。
- 可読性: UIの構造を視覚的に把握しやすくなります。
- シンタックスチェック: 開発プロセスの早い段階でエラーをキャッチするのに役立ちます。
JSX内の表現式
JSXの最も素晴らしい機能の一つは、マークアップ内にJavaScriptの表現式を直接埋め込むことができることです。アイスクリームにスプラインを加えるようなものです。以下のようにします：
const name = 'React Learner';
const element = <h1>Hello, {name}!</h1>;角括弧 {} はあなたの魔法の杖です。これの中にある anything はJavaScriptの表現式として評価されます。
JSX内の関数
これを一歩進めて、JSX内で関数を使います。見てみましょう：
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'React',
lastName: 'Learner'
};
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);ここで、私たちは formatName 関数をJSX内で直接呼び出しています。クールですね？
JSXの属性
HTMLと同様に、JSX要素に属性を追加することができます。しかし、ちょっとした違いがあります！JSXでは、属性名にキャメルケースを使用します。例えば：
const element = <div className="container">Hello, JSX!</div>;class の代わりに className を使用していることに注意してください。これは class がJavaScriptの予約語であるためです。
属性内での表現式の使用
魔法の角括弧を使うのを忘れていませんか？属性内でも使用できます！
const imgUrl = 'https://example.com/react-logo.png';
const element = <img src={imgUrl} alt="React Logo" />;これにより、属性値を動的に設定することができ、インタラクティブなUIを構築する際に非常に便利です。
JSX内のネスト要素
HTMLと同様に、JSXでは要素をネストすることができます。これにより、複雑なUIを構築することができます：
const element = (
<div>
<h1>Welcome to React</h1>
<p>Let's learn JSX together!</p>
</div>
);複数行のJSXを括弧で囲むのは厳密には必要ありませんが、読みやすさを高めるのに役立ちます。
JSXメソッド
以下は、よく遭遇するいくつかの一般的なJSXメソッドの表です：
| メソッド | 説明 | 例 |
|---|---|---|
| React.createElement() | React要素を作成 | React.createElement('div', null, 'Hello, JSX!') |
| ReactDOM.render() | React要素をDOMにレンダリング | ReactDOM.render(element, document.getElementById('root')) |
| React.Fragment | 複数の要素を返す際に余計なノードをDOMに追加しない | <React.Fragment>TitleParagraph </React.Fragment> |
締めくくり
そして、皆さん！JSXの世界への第一歩を踏み出しました。練習は完璧を生みますので、これらの概念を試してみてください。
いつも私の生徒たちに言っていますが、コードを書くことは自転車に乗るのと同じです。最初は不安定かもしれませんが、一度慣れてしまえば、すぐにスピードをupしてしまいます。 therefore、ペダルを回し続け、間もなく素晴らしいReactアプリケーションを構築していることでしょう！
ハッピーコーディング、そして次のレッスンでReactの更深い部分に潜り込むぞ！
Credits: Image by storyset