ReactJS - React Without ES6 ECMAScript
こんにちは、将来のプログラマーたち！今日は、ReactJSの世界に興味深い旅に出かけますが、ちょっとした変化があります。ES6なしでReactを学びます。ES6が何か知らない方もご安心ください；私たちは進む途中ですべてを説明します。まるでタイムマシンを作ってReactの初期の日のほうに戻るようなものです。準備はできましたか？さあ、飛び込みましょう！
Reactとは何か、そしてなぜ「古い」方法を学ぶのか？
Reactはユーザーインターフェースを構築するための人気のJavaScriptライブラリです。Web開発者にとってはLEGOのようで、小さくて再利用可能なピース（コンポーネント）を作成し、それらを組み合わせて複雑なアプリケーションを構築します。
さて、あなたはおそらく「なぜES6なしでReactを学ぶのか？」と思っているかもしれません。亲爱的な学生们、それはまるでマニュアル車を学ぶ前にオートマチック車を学ぶようなものです。それにより、 hoodの下でどのように動作するかについてより深い理解が得られます。また、このシンタックスを使用している古いコードベースに遭遇するかもしれませんので、それに慣れておくのは良いことです。
Create React Class (create-react-class)
ES6以前のReactの世界では、コンポーネントを作成するためにcreateReactClassを使用していました。簡単な例を見てみましょう：
var React = require('react');
var createReactClass = require('create-react-class');
var Greeting = createReactClass({
render: function() {
return <h1>Hello, {this.props.name}!</h1>;
}
});これを分解すると：
- Reactと
create-react-classパッケージをrequire（インポート）しています。 -
createReactClassを使用してGreetingというコンポーネントを作成しています。 - コンポーネントの内部で、
render関数を定義し、JSX（HTMLに似たシンタックス）を返しています。
もしそれがES6を使用していたら、同じコンポーネントはこんな風に見えます：
class Greeting extends React.Component {
render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}違いを見てください？createReactClassの方法は少し冗長に見えるかもしれませんが、次項で説明するユニークな機能があります。
Propsのデフォルト値を設定する（getDefaultProps）
Reactでは、しばしばpropsのデフォルト値を設定したいと思います。createReactClassを使用する場合、特別なメソッドgetDefaultPropsを使用します。これがどのように動作するか見てみましょう：
var Greeting = createReactClass({
getDefaultProps: function() {
return {
name: 'World'
};
},
render: function() {
return <h1>Hello, {this.props.name}!</h1>;
}
});この例では：
-
getDefaultProps関数を定義し、オブジェクトを返します。 - このオブジェクトには、propsのデフォルト値が含まれています。
-
nameプロパティが提供されていない場合、デフォルトで'World'になります。
したがって、<Greeting />を使用すると「Hello, World!」がレンダリングされ、<Greeting name="Alice" />を使用すると「Hello, Alice!」がレンダリングされます。
ES6のReactでは、同じことを静的プロパティを使用して達成します：
class Greeting extends React.Component {
static defaultProps = {
name: 'World'
};
render() {
return <h1>Hello, {this.props.name}!</h1>;
}
}初期状態を設定する（getInitialState）
状態はコンポーネントの個人的なデータストレージのようなものです。createReactClassを使用する場合、初期状態をgetInitialStateを使用して設定します：
var Counter = createReactClass({
getInitialState: function() {
return {
count: 0
};
},
incrementCount: function() {
this.setState({
count: this.state.count + 1
});
},
render: function() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.incrementCount}>Increment</button>
</div>
);
}
});これを分解すると：
-
getInitialStateは初期状態を定義するオブジェクトを返します。 - 初期
countを0に設定しています。 -
incrementCount関数を使用して状態を更新します。 -
renderメソッド内で、countとインクリメントボタンを表示します。
ES6のReactでは、初期状態をコンストラクタ内で設定します：
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
// ...残りのコンポーネント
}メソッドの比較
ここに、私たちが説明したメソッドの比較表を示します：
| createReactClass | ES6 Class | 目的 |
|---|---|---|
| getDefaultProps | static defaultProps | デフォルトのプロパティ値を設定 |
| getInitialState | constructor | 初期状態を設定 |
| render | render | コンポーネントをレンダリング |
結論
そして、皆さん！私たちはES6なしでReactの旅を終えました。これらの概念を理解することで、より完璧なReact開発者になることができます。言語の歴史を知る 것と同じで、それにより現代の機能に対する深い理解が得られます。
このまとめを終えるにあたり、私にはエピソードが思い浮かびます。かつて、古いシンタックスを使用したレガシーなプロジェクトに取り組んでいました。チームメンバーは困惑していましたが、これらの基本を理解していたおかげで、Reactのスーパーヒーローのように駆け込んで救いました！
練習を続け、好奇心を持ち続けると、すぐにReactで素晴らしいことを築けるようになります。古いシンタックスでも新しいシンタックスでも、あなたのコンポーネントが常に無瑕にレンダリングするよう、幸せなコーディングと共に！
Credits: Image by storyset