狠狠撸

Copyright ? Virtual Technology, Inc
React初?者勉强会とLT?会
2017/10/25
1

?嵜伸?郎（たけざきしんいちろう）
twitter id:stakezaki
（有）バーチャルテクノロジー代表取締役
2

ビジョン
”もうフルスタックエンジニアはいらない。
HTMLとJSの知識さえあればWebサービスを
開発できる。
そのような世界を私たちは?指しています。”
3

API以外の余計なことは考えたくない
4
適当に分散して勝?にスケールすることを期待
これが真のサーバレスではないのか！？

React初?者勉强会とLT?会
5

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

?順
? 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

もし、?覧にデータが表?されない場合
? データを再投?してみてください
– gulp upload:data XXXXXXX
8

バンドラ(Webpack)とタスクランナ(Gulp)
9
ES2015
React(JSX)
Flow
トランスパイル
Css/Sass
ビルド?
モジュール結合
JavaScript
(ES5)
ローカルPC
サーバ(vte.cx)
Import/
export
モジュール結合
② GulpによるDeploy ① Webpackによるビルド?バンドル

Reactの概要
? ReactはFacebookが公開しているライブラ
リでUIを効率的に構築することができる
– HTMLに似たJSXのテンプレートを使うことで
直感的にUIを記述できる(仮想DOM)
– コンポーネントの組み合わせで全体のアプリを
構築する
10

Reactの最も効率的な学習?法
? Quick Startを?通り動作確認する
– https://facebook.github.io/react/docs/hell
o-world.html
11

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をレンダリング
ボタンクリックで実行(ユーザ関数)

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

Copyright ? Virtual Technology, Inc14
? URLをフォルダに??てて?由に設定?追加可能
? リソースを様々なフォーマットに変換可能
? XML、JSON、MessagePack等などのデータ
? HTMLやCSS、JavaScript、PDF、画像などの静的コンテンツ
REST APIと直感的な規約

エンドポイントURL(初期フォルダ)
? setup/_settings/folderacls.xml
15
/_htmlを除くものが実際にアクセスできるエンドポイント

vte.cx スキーマ
? シンプルなシンタックス
– 「項?名（型）＝正規表現」の形式で記述
– Indexを指定可能
– 正規表現でバリデーション
? ソフトスキーマ
– 項?の追加が可能
– 運?中でも変更可
? setup/_settings/template.xml
16

ReactRouterの
ハマリどころと解決策
17

React Router
18
Link toで遷移先を定義
Route pathで呼び出すコンポーネントを定義
pathを指定しないとデフォルト表示

他の画?からの遷移
? this.props.history.push()
– ただし、historyを親から渡さないといけない
19

propsを渡せない問題の対応?法
20
? propsを渡すコンポーネントを別に作成

リロードで404エラー回避
? BrowserRouterではなくHashRouterを使う
21

激速！
React V16のサーバサイドレン
ダリングでPDF帳票を作成する
22

Reactで作る帳票システムの衝撃
? 詳しくはBlogで
– https://t.co/WKirbmr06s
23

動的PDF帳票出?をReactで
? ReactのSSRでHTMLを?成し、それをvte.cxのPDF
変換機能(reflex itext)を使ってPDFにする
24
Reflex iText
(弊社プロダクト)

サーバサイドJSとして実装する
? /server/ssrdemo.js
25
Server Side RenderingでHTMLに
HTMLをPDFに
Styleの指定

実??法
? https://{サービス}.1.vte.cx/s/ssrdemo
? https://{サービス}.1.vte.cx/s/ssrdemo2
26

HTMLタグ、Styleの書き?の詳細
? Reflex iText仕様(pageタグ、HTML互換タグ)
– http://reflexworks.jp/documentation.html
#reflexitext.html#G
– http://reflexworks.jp/documentation.html
#reflexitext.html#H
27

次回、11/29 やります！
https://vtecx.connpass.com/event/70544/
28
LTにぜひご応募ください

Copyright ? Virtual Technology, Inc29
support@virtual-tech.net
ご質問はこちらまで

狠狠撸

React vtecx20171025

Recommended

More Related Content

What's hot (20)

Similar to React vtecx20171025 (20)

More from Shinichiro Takezaki (13)

React vtecx20171025