!!!React
[Node.js]
{{amazon 4873117887}}
!!スケルトン作成
+[React 開発の全体像を把握しつつ開発環境を整える|http://typea.info/blg/glob/2017/08/react-1.html]
+[React の単純なサンプルに React Router を適用する|http://typea.info/blg/glob/2017/08/react-router.html]
+[React の単純なサンプルに React Router を組み込んだものに Redux-Saga を適用する|http://typea.info/blg/glob/2017/08/react-react-router-redux-saga.html]
+[React の単純なサンプルに React Router を組み込んだものに Redux-Saga を適用したものからAjax通信を組み込む|http://typea.info/blg/glob/2017/08/react-react-router-redux-saga-ajax.html]
+[React環境->React Router->Redux-Saga->SuperAgent に Bootstrapを適用する|http://typea.info/blg/glob/2017/08/react-react-router-redux-saga-superagent-bootstrap.html]
!!!導入
*https://facebook.github.io/react/docs/installation.html
*https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#table-of-contents
*ReactのSPAを作成するのによい方法
npm install -g create-react-app
*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.
Installing react, react-dom, and react-scripts...
:
*アプリケーションが作成されたら実行
PS C:\workspaces\vscode\reactlesson> cd react-lesson
PS C:\workspaces\vscode\reactlesson> npm start
*実行された
{{ref_image react01.jpg}}
*/src/App.js を書き換えてみる
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
const element = (Hello,world
);
class App extends Component {
render() {
return (
element
);
}
}
export default App;
*反映された
{{ref_image react02.jpg}}
*リリース準備ができたら、以下を実行することで、buildフォルダ以下に最適化されたアプリケーションを作成する
npm run build
!!!クイックスタート
!!JSX
const element = Hello,world!
;
*文字列でも、HTMLでもなく、JSX
*JavaScriptの拡張文法
*テンプレートと思われるかもしれないが、完全なJavaScript
*JSXはReactの要素を生成する
!!JSX表現
*どのようなJavaScriptの表現も、中括弧で囲むことでJSXに埋め込むことができる
*const element = (Hello, {formatName(user)}!
);
Hello World
*コンパイルされたJSXは通常のJavaScriptオブジェクト
*JSXをif文やforループ、変数への割り当て、引数や戻り値に利用できる
function greeting(user) {
var now = new Date();
if (5 <= now.getHours() && now.getHours() <= 12) {
return Good morning {user.firstName + ' ' + user.lastName}.
;
} else {
return Hello {user.firstName + ' ' + user.lastName}.
;
}
}
!属性に利用
*中括弧を利用して、二重引用符なし(使用すると文字列リテラルとして扱われる)で直接利用できる。