Mais conteúdo relacionado
Semelhante a React vtecx20171025 (20)
Mais de Shinichiro Takezaki (13)
React vtecx20171025
- 2. Copyright © Virtual Technology, Inc
⽵嵜 伸⼀郎 (たけざき しんいちろう)
twitter id:stakezaki
(有)バーチャルテクノロジー代表取締役
2
- 3. Copyright © Virtual Technology, Inc
ビジョン
”もうフルスタックエンジニアはいらない。
HTMLとJSの知識さえあればWebサービスを
開発できる。
そのような世界を私たちは⽬指しています。”
3
- 4. Copyright © Virtual Technology, Inc
API以外の余計なことは考えたくない
4
適当に分散して勝⼿にスケールすることを期待
これが真のサーバレスではないのか!?
- 6. Copyright © Virtual Technology, Inc
vte.cxアプリのセットアップ
• Visual Studio Codeの導⼊
– https://code.visualstudio.com/download
• Windowsの場合、git for windowsの導⼊
– https://git-for-windows.github.io/
• あとは、以下のqiitaの記事を⾒ながらセット
アップ
– http://qiita.com/stakezaki/items/0401d79d
392b081fb85e
6
- 7. Copyright © Virtual Technology, Inc
⼿順
• nodeのインストール(⼊れていない⽅のみ)
– https://nodejs.org/ja/
• gulpとflowのインストール
– npm install -g gulp
– npm install -g flow-bin
• vtecxblankのclone
– git clone https://github.com/reflexworks/vtecxblank.git
• vscodeでプロジェクトを開きコンソールでビルド
– npm install
• vtecxにユーザ登録後サービスを作成してデプロイ
– https://admin.1.vte.cx/login.html
– gulp deploy xxxxxxxxx / gulp serve xxxxxxx
7
- 8. Copyright © Virtual Technology, Inc
もし、⼀覧にデータが表⽰されない場合
• データを再投⼊してみてください
– gulp upload:data XXXXXXX
8
- 9. Copyright © Virtual Technology, Inc
バンドラ(Webpack)とタスクランナ(Gulp)
9
ES2015
React(JSX)
Flow
トランスパイル
Css/Sass
ビルド・
モジュール結合
JavaScript
(ES5)
ローカルPC
サーバ(vte.cx)
Import/
export
モジュール結合
② GulpによるDeploy ① Webpackによるビルド・バンドル
- 10. Copyright © Virtual Technology, Inc
Reactの概要
• ReactはFacebookが公開しているライブラ
リでUIを効率的に構築することができる
– HTMLに似たJSXのテンプレートを使うことで
直感的にUIを記述できる(仮想DOM)
– コンポーネントの組み合わせで全体のアプリを
構築する
10
- 11. Copyright © Virtual Technology, Inc
Reactの最も効率的な学習⽅法
• Quick Startを⼀通り動作確認する
– https://facebook.github.io/react/docs/hell
o-world.html
11
- 12. Copyright © Virtual Technology, Inc
Reactの基本構⽂
class Setup2 extends React.components {
constructor(props:Props) {
super(props)
this.state = { isConfirmed: false }
}
componentWillMount() {
}
handleSubmit(e: InputEvent) {
}
render() {
}
}
ReactDOM.render(<Signup />, document.getElementById('signform'))
// SignupコンポーネントをHTMLのid:signformに挿⼊
12
ReactComponentを継承してclassを定義
Constructorで初期値を設定
Stateは更新されるとrender()が実行される特殊な変数
表示前に実行される(component関数)
JSXをレンダリング
ボタンクリックで実行(ユーザ関数)
- 13. Copyright © Virtual Technology, Inc
Component Lifecycle
• componentWillMount()
– ComponentがDOMツリーに追加される前に⼀度だけ呼ばれます。
• componentDidMount()
– ComponentがDOMツリーに追加された状態で呼ばれます
• componentWillReceiveProps(nextProps)
– Propが更新される時に呼ばれます。
• shouldComponentUpdate()
– falseを返すとVirtualDOMの⽐較を⾏わずにrerenderされない
• componentWillUpdate(nextProps, nextState)
– Componentが更新する前に呼ばれます。
• componentDidUpdate(prevProps, prevState)
– Componentが更新された後に呼ばれます。
• componentWillUnmount()
– ComponentがDOMから削除される時に呼ばれます。
13
- 14. Copyright © Virtual Technology, Inc14
• URLをフォルダに⾒⽴てて⾃由に設定・追加可能
• リソースを様々なフォーマットに変換可能
• XML、JSON、MessagePack等などのデータ
• HTMLやCSS、JavaScript、PDF、画像などの静的コンテンツ
REST APIと直感的な規約
- 15. Copyright © Virtual Technology, Inc
エンドポイントURL(初期フォルダ)
• setup/_settings/folderacls.xml
15
/_htmlを除くものが実際にアクセスできるエンドポイント
- 16. Copyright © Virtual Technology, Inc
vte.cx スキーマ
• シンプルなシンタックス
– 「項⽬名(型)= 正規表現」の形式で記述
– Indexを指定可能
– 正規表現でバリデーション
• ソフトスキーマ
– 項⽬の追加が可能
– 運⽤中でも変更可
• setup/_settings/template.xml
16
- 18. Copyright © Virtual Technology, Inc
React Router
18
Link toで遷移先を定義
Route pathで呼び出すコンポーネントを定義
pathを指定しないとデフォルト表示
- 19. Copyright © Virtual Technology, Inc
他の画⾯からの遷移
• this.props.history.push()
– ただし、historyを親から渡さないといけない
19
- 23. Copyright © Virtual Technology, Inc
Reactで作る帳票システムの衝撃
• 詳しくはBlogで
– https://t.co/WKirbmr06s
23
- 24. Copyright © Virtual Technology, Inc
動的PDF帳票出⼒をReactで
• ReactのSSRでHTMLを⽣成し、それをvte.cxのPDF
変換機能(reflex itext)を使ってPDFにする
24
Reflex iText
(弊社プロダクト)
- 25. Copyright © Virtual Technology, Inc
サーバサイドJSとして実装する
• /server/ssrdemo.js
25
Server Side RenderingでHTMLに
HTMLをPDFに
Styleの指定
- 26. Copyright © Virtual Technology, Inc
実⾏⽅法
• https://{サービス}.1.vte.cx/s/ssrdemo
• https://{サービス}.1.vte.cx/s/ssrdemo2
26
- 27. Copyright © Virtual Technology, Inc
HTMLタグ、Styleの書き⽅の詳細
• Reflex iText仕様(pageタグ、HTML互換タグ)
– http://reflexworks.jp/documentation.html
#reflexitext.html#G
– http://reflexworks.jp/documentation.html
#reflexitext.html#H
27
- 28. Copyright © Virtual Technology, Inc
次回、11/29 やります!
https://vtecx.connpass.com/event/70544/
28
LTにぜひご応募ください