12,504
回編集
差分
ナビゲーションに移動
検索に移動
ReactDOM[[React]]DOM.render(
ReactDOM[[React]]DOM.render(
ReactDOM[[React]]DOM.render(
ReactDOM[[React]]DOM.render(
ReactDOM[[React]]DOM.render(
ReactDOM[[React]]DOM.render(
ReactDOM[[React]]DOM.render(
ReactDOM[[React]]DOM.render(
ReactDOM[[React]]DOM.render(
ReactDOM[[React]]DOM.render(
ReactDOM[[React]]DOM.render(
ReactDOM[[React]]DOM.render(
ReactDOM[[React]]DOM.render(
ReactDOM[[React]]DOM.render(
ReactDOM[[React]]DOM.render(
ReactDOM[[React]]DOM.render(
ReactDOM[[React]]DOM.render(
ReactDOM[[React]]DOM.render(
ReactDOM[[React]]DOM.render(
ReactDOM[[React]]DOM.render(
ReactDOM[[React]]DOM.render(
ReactDOM[[React]]DOM.render(
ReactDOM[[React]]DOM.render(
ReactDOM[[React]]DOM.render(
ReactDOM[[React]]DOM.render(
編集の要約なし
==[[React]]==
[[Node.js]] |
==導入==
*https://facebook.github.io/react/docs/installation.html
*https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README[[R]]EADME.md#table-of-contents*ReactのSPAを作成するのによい方法[[React]]のSPAを作成するのによい方法 [[npm ]] install -g create-react-app*Reactはバックエンドロジックやデータベースを持たないが、使いたいものを使えばよい。[[React]]はバックエンドロジックやデータベースを持たないが、使いたいものを使えばよい。
*Babelやwebpackのようなビルドツールも設定なしに利用できる。
PS C:\workspaces\vscode\reactlesson> create-react-app react-lesson
Creating a new [[React ]] app in C:\workspaces\vscode\reactlesson\react-lesson.
Installing packages. This might take a couple minutes.
*アプリケーションが作成されたら実行
PS C:\workspaces\vscode\reactlesson> cd react-lesson
PS C:\workspaces\vscode\reactlesson> [[npm ]] start
*実行された
[[File:1086_react01.jpg]]
*/src/App.js を書き換えてみる
import [[React]], { Component } from 'react';
import logo from './logo.svg';
import './App.css';
[[File:1087_react02.jpg]]
*リリース準備ができたら、以下を実行することで、buildフォルダ以下に最適化されたアプリケーションを作成する
[[npm ]] run build
==クイックスタート==
===JSX===
const element = <h1>Hello,world!</h1>;
*文字列でも、HTMLでもなく、JSX文字列でも、[[HTML]]でもなく、JSX*JavaScriptの拡張文法[[JavaScript]]の拡張文法*テンプレートと思われるかもしれないが、完全なJavaScriptテンプレートと思われるかもしれないが、完全な[[JavaScript]]*JSXはReactの要素を生成するJSXは[[React]]の要素を生成する
===JSX表現===
*どのようなJavaScriptの表現も、中括弧で囲むことでJSXに埋め込むことができるどのような[[JavaScript]]の表現も、中括弧で囲むことでJSXに埋め込むことができる
*const element = (<h1>Hello, {formatName(user)}!</h1>);
const user = {firstName:'Hiroto', lastName:'Yagi'};
const element = (<h1>Hello, {formatName(user)}!</h1>);
element,
document.getElementById('root')
</html>
*コンパイルされたJSXは通常のJavaScriptオブジェクトコンパイルされたJSXは通常の[[JavaScript]]オブジェクト
*JSXをif文やforループ、変数への割り当て、引数や戻り値に利用できる
const user = {firstName:'Hiroto', lastName:'Yagi', webpageUrl:'http://typea.info'};
const element = (<h1>{greeting(user)}</h1>);
element,
document.getElementById('root')
[[File:1089_react04.jpg]]
====子要素====
*子要素がない場合、XML同様 子要素がない場合、[[XML]]同様 /> で閉じる
*子要素を含む
*JSXはHTMLよりJavaScriptにより近い。ReactDOMはキャメルケースプロパティJSXはHTMLより[[JavaScript]]により近い。ReactDOMはキャメルケースプロパティ(HTMLでは、class がclassName、HTMLではtabindexがtabIndexなど)を持つ
function greeting(user) {
return <div>
const user = {firstName:'Hiroto', lastName:'Yagi', webpageUrl:'http://typea.info'};
const element = (greeting(user));
element,
document.getElementById('root')
);
[[File:1090_react05.jpg]]
====インジェクション攻撃の予防インジェクション[[攻撃]]の予防====*デフォルトでReact デフォルトで[[React]] DOMは、JSXに埋め込まれた値をレンダリング前にエスケープする
*明示的にアプリケーションに記述しなくてもインジェクションされないことを保証する
*XSS攻撃の予防を助けるXSS[[攻撃]]の予防を助ける
function greeting(user, title) {
return <div>
const user = {firstName:'Hiroto', lastName:'Yagi', webpageUrl:'http://typea.info'};
const element = (greeting(user,title));
element,
document.getElementById('root')
);
[[File:1091_react06.jpg]]
====JSX Represent [[R]]epresent オブジェクト====*Babelは、ReactBabelは、[[React]].createElement()を呼び出しコンパイルを行う
*以下の2つは同じ意味
const element1 = (<h1 className='greeting'>hello</h1>);
const element2 = [[React]].createElement('h1',{className:'greeting'},'hello');*[[React]].createElement()は、バグを防ぐ手助けをするが、本質的には以下のようなオブジェクトを生成する
// 簡易表現
const element = {type:'h1',props:{className:'greeting',children:'hello'}};
*これらの要素を"[[React ]] elements"と呼ぶ
*画面に表示させたいものの記述と考えることができる
*Reactはこれらのオブジェクトを読み、DOMの構築と最新化に利用する [[React]]はこれらのオブジェクトを読み、DOMの構築と最新化に利用する
===Elementsのレンダリング===
*Elements はReact は[[React]] アプリケーションの最小のビルディングブロック
*1つの要素は、画面上に表示するものを表現する
*ブラウザのDOM要素と異なり、React ブラウザのDOM要素と異なり、[[React]] Elements はプレーンなオブジェクトで生成のコストは小さい*[[React DOMは、DOMをReact ]] DOMは、DOMを[[React]] Elementsに一致するように取り扱う====1つの要素をDOMの中にレンダリング1つの要素を[[DOM]]の中にレンダリング====*HTMLどこかに記述する、以下のDIV要素をroot [[HTML]]どこかに記述する、以下のDIV要素をroot DOM ノードと呼ぶ*[[React ]] DOM が管理するすべてが、この要素の中にある
<div id="root"></div>
====React要素の更新[[React]]要素の更新====*React要素は不変。一旦生成したら、子要素、属性などは変更できない。[[React]]要素は不変。一旦生成したら、子要素、属性などは変更できない。*UIを更新するには、新しい要素を作成し、ReactDOMUIを更新するには、新しい要素を作成し、[[React]]DOM.rendar()に引き渡す。
function tick() {
const element = (<div>{(new Date()).toLocaleTimeString()}</div>);
element,
document.getElementById('root')
setInterval(tick,1000);
[[File:1092_react07.jpg]]
<blockquote>通常のReact アプリケーションでは、ReactDOM通常の[[React]] アプリケーションでは、[[React]]DOM.rendar()は 一度しか呼びださない。</blockquote>====Reactは必要なもののみ更新する[[React]]は必要なもののみ更新する====*[[React ]] DOMは、要素および子要素を前の状態と比較し、DOMの更新が必要な個所にのみ適用する。
*ブラウザツールで、上記のソースコードを確認する
[[File:1093_react08.jpg]]
<blockquote>毎tick()の呼び出しで、すべてのUIツリーを生成するよう記述してるが、変更が発生したテキストノードのみReact の呼び出しで、すべてのUIツリーを生成するよう記述してるが、変更が発生したテキストノードのみ[[React]] DOMにより更新されている。</blockquote>
===コンポーネントと Props===
*コンポーネントはUIを独立し再利用可能な部分に分割する。
*概念的にコンポーネントはJavaScriptの関数のようなもの。概念的にコンポーネントは[[JavaScript]]の関数のようなもの。*コンポーネントはpropsと呼ばれる任意の入力を受け付け、React コンポーネントはpropsと呼ばれる任意の入力を受け付け、[[React]] Elementを返す。
====コンポーネントの機能とクラス====
*JavaScriptの関数としてコンポーネントを定義する[[JavaScript]]の関数としてコンポーネントを定義する*この関数は有効なReactコンポーネント、なぜなら、単一のprops引数を引数として取り、React この関数は有効な[[React]]コンポーネント、なぜなら、単一のprops引数を引数として取り、[[React]] Elementを返す。
*このようなコンポーネントを"functional"と呼ぶ。
function Welcome(props) {
}
*ES6のクラスをコンポーネントの定義として利用できる
class Welcome extends [[React]].Component {
render() {
return <h1>Hello,{props.name}</h1>;
}
}
*上記2つのコンポーネントはReactの視点からは同じ上記2つのコンポーネントは[[React]]の視点からは同じ
====コンポーネントのレンダリング====
*Elementは、ユーザー定義コンポーネントも表すことができる
}
const element = <Welcome name='Hiroto' />
element,
document.getElementById('root')
);
*Reactがユーザー定義コンポーネントを表示するときに、JSXの属性からコンポーネントへ[[React]]がユーザー定義コンポーネントを表示するときに、JSXの属性からコンポーネントへ"props"としてオブジェクトが渡される。
<blockquote>コンポーネント名はいつも大文字から始める。DOM コンポーネント名はいつも大文字から始める。[[DOM]] タグは、<div /> だが、<Welcome /> はコンポーネントを表現する。Welcomeがスコープに存在すること。</blockquote>
====コンポーネントの構成====
*コンポーネントはその出力において、他のコンポーネントに影響を与えることができる
*同じコンポーネントをどんなレベルの詳細にも抽象的に利用できる、ボタン、フォーム、ダイアログ、スクリーン
*Reactでこれらは、一般にコンポーネントで表現される[[React]]でこれらは、一般にコンポーネントで表現される
function Welcome(props) {
return <h1>Hello,{props.name}</h1>;
</div> );
}
<App />,
document.getElementById('root')
);
*一般的に新しいReactアプリケーションは、一つのAppコンポーネントを最上位に持つ。既存のアプリケーションにReactを統合する場合は、小さなコンポーネント、例えばButtonなど、ボトムアップから開始し、徐々にView階層の最上位にいたる。一般的に新しい[[React]]アプリケーションは、一つのAppコンポーネントを最上位に持つ。既存のアプリケーションに[[React]]を統合する場合は、小さなコンポーネント、例えばButtonなど、ボトムアップから開始し、徐々にView階層の最上位にいたる。
<blockquote>コンポーネントは、一つのroot要素を返さなければならない。上記で、Welcome要素を div に含めたのはこのため</blockquote>
====Propsは読み取り専用====
**Reactはかなりフレキシブルだが、1つ厳格なルールがある。function [[React]]はかなりフレキシブルだが、1つ厳格なルールがある。function だろうと class だろうとコンポーネントはpropsを編集できない。
===状態とライフサイクル===
*次のClockコンポーネントを再利用可能にカプセル化する
}
function tick() {
<Clock date={new Date()} />,
document.getElementById('root')
*クラス宣言したコンポーネントにはいくつかの追加的な機能があるが、local state はこれにあたる
====関数をクラスに変更する====
#[[React]].Component を継承して同名のES6クラスを作成する
#render()メソッドを作成し、処理を移動、functionを削除
#propsをthis.propsに変更
class Clock extends [[React]].Component {
render() {
return (
#クラスにコンストラクタを追加し、this.stateの初期状態を記述する
#<Clock date={new Date()} /> から dateを削除
class Clock extends [[React]].Component {
constructor(props) {
super(props);
====クラスにライフサイクルメソッドを追加する====
*多くのコンポーネントを使用するアプリケーションでは、破棄されたコンポーネントのリソースの解放が重要
*ClockがDOMに最初にレンダリングされるときには、必ずタイマーをセットアップしたい。これをReactでは、ClockがDOMに最初にレンダリングされるときには、必ずタイマーをセットアップしたい。これを[[React]]では、"mounting" という*また、ClockがDOMから取り除かれるときには、タイマーをクリアしたい。これをReactでは、また、ClockがDOMから取り除かれるときには、タイマーをクリアしたい。これを[[React]]では、"unmounting"という
*コンポーネントが、mount/unmount されるときに実行される特別なメソッドをクラスに宣言できる
*componentDidMount()、componentWillUnmount() これらのメソッドはライフサイクルフックと呼ばれる
*どのようにtimer IDを thisに保存するか
**this.propsがReactによりセットアップされる間、thispropsが[[React]]によりセットアップされる間、this.stateは特別な意味を持つ
**表示に使用しないならば、クラスに自由にフィールドを追加できる
**render()の中では、それらは利用できないし、ステートも持たない
*this.setState()でローカルコンポーネントの状態を更新する
class Clock extends [[React]].Component {
constructor(props) {
super(props);
}
}
<Clock />,
document.getElementById('root')
<blockquote>this.stateを割り当てることができるのは、コンストラクタのみ</blockquote>
=====stateは、非同期に更新される=====
*Reactは、複数のsetState[[React]]は、複数のsetState() をパフォーマンスのためにまとめて一度に処理する。
*このため、this.propsとthis.stateは非同期に更新される
*これらの値を信頼して、次の状態への計算を行うべきではない
});
=====状態の更新はマージされる=====
*setState()を呼び出すと、Reactは、現在のstateに提供したオブジェクトをマージするを呼び出すと、[[React]]は、現在のstateに提供したオブジェクトをマージする
*例えば、いくつかの独立した変数を含む場合
constructor(props) {
*データやUIは状態に由来し、ツリーのより下のコンポーネントにのみ影響を与えることができる
===イベントの処理===
*[[React ]] 要素のイベント処理は、DOMでの処理ととても似ているが、いくつかシンタックスの差異がある。**Reactイベントは、ロウアーケースではなく、キャメルケース[[React]]イベントは、ロウアーケースではなく、キャメルケース
**JSXでは、stringではなく、関数をイベントハンドラーとして渡す。
=====[[HTML]]=====
<button onclick="test()" />
=====[[React]]=====
<button onClick={test} />
*もう一つの違いは、Reactでは、falseを返しデフォルトのふるまいを防止することができない。もう一つの違いは、[[React]]では、falseを返しデフォルトのふるまいを防止することができない。
*明示的に、preventDefault を呼び出す必要がある。
=====HTMLでデフォルトの新しいページを開くリンクのふるまいを防止する[[HTML]]でデフォルトの新しいページを開くリンクのふるまいを防止する=====
<a href="#" onclick="console.log('hoge'); return false" >Click</a>
=====[[React]]=====
function ActionLink() {
function handleClick(e) {
*e は、本物ではないイベント。Reactでは、[https://www.w3.org/TR/DOM-Level-3-Events/ W3C]に合わせるために定義している。
*なので、ブラウザの互換性を心配する必要はない。[https://facebook.github.io/react/docs/events.html リファレンス]を参照
*Reactでは、addEventListenerを通常呼び出す必要はない。要素が最初にレンダリングされるときに提供される[[React]]では、addEventListenerを通常呼び出す必要はない。要素が最初にレンダリングされるときに提供される
*ES6のクラスを使用するときの一般的なパターン、例えば、Toggle ボタン
class Toggle extends [[React]].Component {
constructor(props) {
super(props);
}
}
<Toggle />,
document.getElementById('root')
*コンストラクタでバインドするか、プロパティイニシャライザでバインドすることを推奨する。
===条件付きのレンダリング===
*Reactでは、必要なら、振る舞いがカプセルかされた他と異なったコンポーネントを作成できる。[[React]]では、必要なら、振る舞いがカプセルかされた他と異なったコンポーネントを作成できる。*Reactの条件付きレンダリングは、JavaScriptの条件が動作するのと同じ方法で動作する。Reactの条件付きレンダリングは、[[JavaScript]]の条件が動作するのと同じ方法で動作する。*JavaScriptのifのような演算子もしくは、条件演算子は、現在の状態を表した要素を作成するための、ReactがUIをそれに一致させることを許す。[[JavaScript]]のifのような演算子もしくは、条件演算子は、現在の状態を表した要素を作成するための、ReactがUIをそれに一致させることを許す。
=====以下の2つのコンポーネントについて考える=====
*ユーザーがログインしているか否かによって使い分けたい。
}
}
<Greeting isLoggedIn={true} />,
document.getElementById('root')
);
}
class LoginControl extends [[React]].Component {
constructor(props) {
super(props);
}
<LoginControl />,
document.getElementById('root')
[[File:1085_react_debug.jpg]]
====インラインif と 論理 && 演算子====
*true && 演算子の場合評価され、false && の場合、falseとなりReactは無視するの場合、falseとなり[[React]]は無視する
function MailBox(props) {
const unreadMessages = props.unreadMessages;
}
const messages = ['message1','message2'];
<MailBox unreadMessages={messages} />,
document.getElementById('root')
);
}
<Greeting isLoggedIn={false} />,
document.getElementById('root')
);
}
class Page extends [[React]].Component {
constructor(props) {
super(props);
}
<Page />,
document.getElementById('root')
[[File:1095_react10.jpg]]
===リストとキー===
=====JavaScriptでリストの変換には、map[[JavaScript]]でリストの変換には、map()を利用する=====
const numbers = [1,2,3,4,5];
const doubled = numbers.map((number)=> number * 2);
console.log(doubled)
> [2, 4, 6, 8, 10]
*[[React ]] では同様に配列をリストに変換する
====複数のコンポーネントをレンダリングする====
const fruits = ['apple','orange','grape','banana'];
const listItems = fruits.map((fruit) => <li>{fruit}</li>);
<ol>{listItems}</ol>,
document.getElementById('root')
=====Keys=====
*keyを指定しないと警告がでる
*keyは、Reactが、どのアイテムが登録、変更、削除されたのか特定するのに役立つkeyは、[[React]]が、どのアイテムが登録、変更、削除されたのか特定するのに役立つ
*文字列で兄弟間でユニークな値を設定するのが望ましい
function FruitList(props) {
}
const fruits = ['apple','orange','grape','banana'];
<FruitList fruits={fruits}/>,
document.getElementById('root')
}
const fruits = ['apple','orange','grape','banana'];
<FruitList fruits={fruits}/>,
document.getElementById('root')
}
const fruits = ['apple','orange','grape','banana'];
<FruitList fruits={fruits}/>,
document.getElementById('root')
);
===Form===
*HTML Formは、Reactでは、少し他のDOMとは動作が異なる。Formは、[[React]]では、少し他のDOMとは動作が異なる。
*なぜなら Fromは通常内部状態をもつから。
====コントロールされたコンポーネント====
*HTMLでFormは、自身の状態を維持しユーザー入力に基づいて状態を更新する。[[HTML]]でFormは、自身の状態を維持しユーザー入力に基づいて状態を更新する。*Reactでは、変化可能な状態はコンポーネントのstateプロパティに保持し、setState[[React]]では、変化可能な状態はコンポーネントのstateプロパティに保持し、setState()からのみ更新される。*"single source of truth"としてReact として[[React]] stateを作成することにより2つを結びつけることができる。*ReactコンポーネントはFormまたコントロールでユーザー入力により、何が起きたかを描画する。[[React]]コンポーネントはFormまたコントロールでユーザー入力により、何が起きたかを描画する。*input Form 要素の値は、Reactによりこの方法で制御される。要素の値は、[[React]]によりこの方法で制御される。
*これは、「コントロールされたコンポーネント」と呼ばれる。
class NameForm extends [[React]].Component {
constructor(props) {
super(props);
}
}
<NameForm />,
document.getElementById('root')
[[File:1097_react12.jpg]]
*valueが、Form要素に設定されると、表示されるvalueは、常にthis.state.valueとなる
*すべてのキーストロークで、handleChangeが起動し、Reactのstateを更新するすべてのキーストロークで、handleChangeが起動し、[[React]]のstateを更新する
*表示されるvalueも更新される
handleChange(event) {
}
====textarea/select タグ====
class SelectParts extends [[React]].Component {
constructor(props){
super(props);
}
}
class TextareaParts extends [[React]].Component {
constructor(props){
super(props);
}
}
<div>
<SelectParts />
*ハンドラー関数で、event.target.name の値に基づいて、どの要素か判定
*ES6 [https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names 計算されたプロパティ名]構文をkey状態を更新するのに使用
class Reservation extends [[React]].Component {
constructor(props) {
super(props);
}
}
<div>
<Reservation [[R]]eservation />
</div>,
document.getElementById('root')
return <p>The water would not boil.</p>
}
class Calculator extends [[React]].Component {
constructor(props) {
super(props);
}
}
<div>
<Calculator />
====2つ目の入力を追加する====
*華氏の入力を追加し同期させる
*Reactでstateを共有するには、共通の祖先に移動させることで実現でき、「状態の持ち上げ」という[[React]]でstateを共有するには、共通の祖先に移動させることで実現でき、「状態の持ち上げ」という
*TempratureInputのローカルstateをCalcuratorへ移動させる
*Calucratorの共有stateは、「真の情報源」となる
return rounded.toString();
}
class TempratureInput extends [[React]].Component {
constructor(props) {
super(props);
}
}
class Calculator extends [[React]].Component {
constructor(props) {
super(props);
}
}
<div>
<Calculator />
[[File:1100_react15.jpg]]
===コンポジションと継承===
*Reactは強力なコンポジションモデルをもつ。コンポーネントの再利用には継承よりコンポジションを推奨する[[React]]は強力なコンポジションモデルをもつ。コンポーネントの再利用には継承よりコンポジションを推奨する
====封じ込める====
*一部のコンポーネントは自身の子供を事前に知ることができない
);
}
<div>
<WelcomDialog />
====特殊化====
*コンポーネントを他のコンポーネントの特殊なものとして考えることがある、例えば、WelcomDialogはDialogの特殊な例として。
*Reactでは、コンポジションを使って実現する[[React]]では、コンポジションを使って実現する
*クラスを用いても同様に記述できる
function Dialog(props) {
}
===[[React Router]]===*[[React Router]]===[[Redux]]===*[[Redux]]===[[Tips]]===
*[http://typea.info/blg/glob/2017/06/react.html React のシンタックスエラーをデバッグ]
© 2006 矢木浩人
