ReactJS - React Without JSX

JSXとは何か？

React Without JSXにdzethru之前に、まずJSXが何であるかを理解しましょう。JSX、またはJavaScript XMLは、HTMLに似た構文を持ち、JavaScriptの拡張 syntax です。ReactではUIがどのように見えるべきかを記述するためによく使用されますが、JSXはReactを使用するための必須ではありません。ReactはJSXなしで使用できるため、このチュートリアルではそれを探求します。

JSXなしでReactを使用する理由は何か？

JSXが一般的であるにも関わらず、なぜReactをJSXなしで使用したいかと疑問に思うかもしれません。素晴らしい質問です！いくつかの理由があります：

1. 核心概念の学習：JSXなしでReactがどのように動作するか理解することで、ライブラリに対するより深い理解が得られます。
2. ビルドツールの制限：一部のビルド環境はJSXのコンパイルをサポートしていない場合があります。
3. 個人的な好み：一部の開発者は純粋なJavaScriptを書くことを好む場合があります。

React.createElement()を使って要素を作成する

React Without JSXの核心はReact.createElement()関数です。この関数は、JSXがコンパイルされる先と同じなので、中間のプロセスを省略しています！

簡単な例から始めましょう：

const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);

この例では、クラス名が'greeting'のh1要素とテキストコンテンツが'Hello, world!'の要素を作成しています。引数を分解してみましょう：

1. 第一引数('h1')は、作成したい要素の種類を指定します。
2. 第二引数({className: 'greeting'})は、要素のプロパティを含むオブジェクトです。
3. 第三引数('Hello, world!')は、要素のコンテンツです。

これをJSXで書くとこんな感じになります：

const element = <h1 className="greeting">Hello, world!</h1>;

JSXはどれほど簡潔かがわかりますが、練習を重ねることで、JSXなしで要素を作成することも自然になります！

要素のネスト

もう少し複雑なものに挑戦してみましょう。div要素に2つの子要素を作成してみますか？

const element = React.createElement(
'div',
null,
React.createElement('h1', null, 'Welcome'),
React.createElement('p', null, 'This is a paragraph.')
);

これは以下の構造と等しいです：

<div>
<h1>Welcome</h1>
<p>This is a paragraph.</p>
</div>

createElementの呼び出しをネストして子要素を作成していることに注意してください。null引数は、必要に応じてプロパティを設定する場所です。

コンポーネントの作成

コンポーネントはReactアプリケーションの構成要素です。簡単な関数型コンポーネントをJSXなしで作成してみましょう：

function Welcome(props) {
return React.createElement(
'h1',
null,
'Welcome, ' + props.name
);
}

このコンポーネントを使用するには以下のようにします：

const element = React.createElement(Welcome, {name: 'Alice'});

これはJSX版と同じです：

const element = <Welcome name="Alice" />;

イベントの処理

React Without JSXでのイベント処理は、JSX版と非常に似ています。クリック時にメッセージをログにするボタンを作成してみましょう：

function handleClick() {
console.log('Button clicked!');
}

const button = React.createElement(
'button',
{onClick: handleClick},
'Click me'
);

ここでは、handleClick関数をonClickプロパティとしてボタン要素に渡しています。

条件付きレンダリング

条件付きレンダリングは、JSXなしでは少し長くなりますが、完全に可能です：

function Greeting(props) {
if (props.isLoggedIn) {
return React.createElement('h1', null, 'Welcome back!');
} else {
return React.createElement('h1', null, 'Please sign up.');
}
}

const element = React.createElement(
Greeting,
{isLoggedIn: true}
);

リストとキー

JSXなしでリストをレンダリングするには、Array.map()を明示的に使用します：

const numbers = [1, 2, 3, 4, 5];

const listItems = numbers.map((number) =>
React.createElement('li', {key: number.toString()}, number)
);

const list = React.createElement('ul', null, listItems);

keyプロパティを使用していることに注意してください。これはReactの再調整プロセスにおいて非常に重要です。

メソッドの表

ここで説明した主要なメソッドをまとめた表です：

メソッド	説明	例
React.createElement()	React要素を作成する	React.createElement('div', null, 'Hello')
Array.map()	配列要素を変換する	numbers.map(n => React.createElement('li', null, n))
React.render()	React要素をDOMにレンダリングする	ReactDOM.render(element, document.getElementById('root'))

結論

JSXは確かにReactコードをより直感的で読みやすくしますが、JSXなしでReactを使用することで、裏の動作をより深く理解することができます。マニュアル車を運転する前にオートマチック車を運転することと似ていて、もっと多くの制御と理解を得ることができます。

覚えておいてください、JSXを使用するかどうかにかかわらず、Reactの基本原理は同じです。コンポーネント、プロパティ、状態、仮想DOMはすべて同じように動作します。JSXはただの構文糖衣で、コードの記述プロセスを少しスイートにするだけです！

次回、ReactアプリケーションをデバッグしているときにReact.createElement()がコンパイルされたコードに現れたら、正確に何が起こっているかを知るでしょう。ハッピーコーディング、あなたのReact要素がいつも真実をレンダリングすることを祈っています！

Credits: Image by storyset