get started
scriptタグで導入してreactプロジェクトを作成するのが最も簡単な方法ですが、ビジネスが機能的に成長し、ツールチェーンをフル活用するようになると、reactアプリを作成する形になります。
JSX
JSXは、htmlとjsの両方の機能を兼ね備えたテンプレート構文です。
埋め込み式
const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;
JSXに定義された変数を置くと、テンプレートが自動的に変数を検索します。
同様に{}では変数だけでなく式も扱えます。実際には、{}の部分はjsに限りなく近い形で扱われます。
return <h1>Hello, {formatName(user)}!</h1>;
ラベルプロパティの設定
この構文を要素のタグ付けに適用して、変数や関数で属性を操作することもできます。
const element = <img src={user.avatarUrl}></img>;
注意
タグの固有属性には、キャメルネーミングアプローチが採用されています。
const element = <div tabIndex="0"></div>;
空のラベルの略称
空のタグの場合は、/ をタグの末尾に追加して直接省略することができます。
const element = <img src={user.avatarUrl} />;
まとめ
JSXは、htmlとjsを組み合わせて使用することができ、htmlスケルトンの内容を動的に変更することができます。
、コンポーネント化
要素
まず、reactの要素レンダリングのルールを理解することが重要です。要素をレンダリングした後は、その要素は変更することすらできません。
react では、すべての要素はオブジェクトのようなものです。
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
ルートノードはreact.domで管理されているため、毎回見つける必要があります。
いったん要素がレンダリングされると、その子要素や属性は二度と変更できません。
これまでのところ、すでにレンダリングされた要素を更新する唯一の方法は、新しい要素を再構築して再度レンダリングすることです。
react.domが機能するのは、タプルとは異なる要素が更新されるたびに、react.domが一度だけ更新されることです。
コンポーネント
コンポーネントはエレメントで構成されますが、もはやオブジェクトには似ていません。そのため、コンポーネントには2つの作成方法があります。1つは関数型の作成、もう1つはクラス型の作成です。
class
機能コンポーネントをクラス・コンポーネントに変換するには、5つのステップが必要です：
まず、es6構文を使用して、新しく作成したコンポーネントをreact.componentから継承します。
レンダーメソッドの追加
関数本体をレンダー関数に挿入
元のpropsをthis.propsに置き換えます。
機能名の削除
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
クラス・コンポーネントの値の受け渡し
コンポーネントをよりよく再利用するためには、コードを抽出して抽象化し、カプセル化する必要があり、そのためには必然的にprops変数が必要になります。
純粋関数
関数を作成する場合もクラスを作成する場合も、純粋な関数である必要があります。
純粋関数とは何ですか？純粋関数とは、入力パラメータが変化せず、同じ入力が与えられるたびに同じ出力が得られる関数のことです。
function sum(a, b) {
return a + b;
}
例えば、次のような例です。
function withdraw(account, amount) {
account.total -= amount;
}
入力変数は関数の中で変更されるので、これは純粋な関数ではありません。
そのためreactでは、すべてのコンポーネントが純粋関数であること、つまり入力されるデータを直接変更できないことを遵守する必要があります。
もちろん、コンポーネントを修正する方法は他にもあります。
入力されるパラメータpropsをstateに変換するには、3つのステップがあります。 まず、this.props.dataを"""に置き換えます。this"".state.data - 関数内で"""に置き換えます。
次に、コンストラクタをクラスに追加し、コンストラクタ内で状態を初期化します。
最後に、Clockタグで渡されたパラメータはキャンセルされます。
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
コンポーネントがreact.domに渡されると
状態の正しい使い方
1の値を直接変更しないでください。
仕様
this.setState({comment: 'Hello'});
2、非同期更新データ
this.setState((state, props) => ({
counter: state.counter + props.increment
}));
3.データ融合 this.setState 関数が正常に実行されると、状態は完全に新しい状態に置き換えられます。
コンポーネント間の値の受け渡し
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);
