.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。

目次

概要

create-react-appを使用した、React の step by step。

このあたりを確認しつつ、下記ステップを進める。

手順1

インストール

  • npmNode.js)をインストールしておく。
  • create-react-app(npm ,etc.のNode.js系のツール)のインストール
    npm install -g create-react-app
  • 以下は、既定の構成
    #カテゴリツール/言語備考
    1開発言語EcmaScript6-
    2トランスパイラBabel-
    3パッケージングWebpack・webpack-dev-server
    ・html-webpack-plugin
    ・style-loader
    4コード解析ESLint-
    5テストツールJest-

サンプルの生成と実行

生成

react-appと言う名称でサンプルを生成する。

create-react-app react-app

構成

create-react-appを使用した場合、configは隠蔽されているので、
カスタマイズする必要がある場合、npm run ejectでエクスポートできる。

react_app
 ├ public
 |  ├ favicon.ico
 |  ├ index.html
 |  └ manifest.json
 ├ src
 |  ├ App.css
 |  ├ App.js
 |  ├ App.test.js
 |  ├ index.css
 |  ├ index.js
 |  ├ logo.svg
 |  ├ Menu.js
 |  └ registerServiceWorker.js
 ├ .gitignore
 ├ package.json
 ├ package-lock.json
 └ README.md

実行

  • サンプルを実行する
    (サンプルのルート・ディレクトリで以下コマンドを実行)。
    npm start
    ※ npm start( ≒ npm run-script start)で、package.jsonの
    "start": "react-scripts start"が実行され、webpack開発サーバが起動する。

手順2

概要

を考慮し、以下のように実装する。

対象

手順1で生成したサンプルに追加実装を行う。

サンプルの実装

App.jsを書換

https://github.com/OpenTouryoProject/SampleProgram/blob/master/Template/SPATemplate/react_app/src/App.js

Menu.jsを追加

手順3

Expressサーバの準備

他のSPAアプリケーションからも利用するので、別フォルダに準備すると良い。

Expressサーバをインストール

JSONを返すExpressサーバを準備

プロジェクト生成

ASP.NET Core React.jsテンプレート

create-react-app

create-react-appなので大文字はNG

create-react-app react-template

比較

Component

CSS

  • create-react-app
    srcフォルダに(componentsと同じフォルダに同じ名称で)格納

移植の方針

Component

componentsフォルダに格納

CSS

  • 共通のCSSはcssフォルダに格納
  • 個別のCSSはcomponentsと同じフォルダに同じ名称で格納

移植の開始

package.json

必要そうなモジュールをインストールするように設定。

  • バージョン番号なども関係するので一筋縄ではいかない。
  • 結局、ReactTemplateを主にして置き換えた。

*.cshtml --- > index.html

土台となる *.html ファイル

  • \Views\Home\Index.cshtml
  • \Views\Shared\_Layout.cshtml
    • --- > \public\index.html

boot.js ---> index.js

土台から呼び出される *.js ファイル

  • \ClientApp?\boot.js --- > \src\index.js
  • 依存関係のコピー
    • \ClientApp?\css\site.css ---> \src\css\site.css
    • \ClientApp?\css\routes.js ---> \src\routes.js

routes.js

ルーティングを行う *.js ファイル

Layout.js

レイアウト部分を移植

  • \src\App.js --- > \src\components\Layout.js
  • 依存関係のコピー
    • \src\App.css --- > \src\components\Layout.css
    • \src\logo.svg --- > \src\components\logo.svg

NavMenu?.js

冗長なコードを削除。

Home.js

冗長なコードを削除。

Counter.js

変更不要。

FetchData?.js

変更不要。

実行

WebAPI側

Expressサーバを起動

>node server/server.js

React側

SPAアプリケーションの起動

>npm start

サンプル

手順4

ここでは、以降、難易度が上がるので、
Visual Studio Codeでのデバッグ設定を行う。

インストール

Debugger for Chrome extensionをインストールする。

デバッグ・ビューを表示

Debug viewを表示。

  • 「Ctrl+Shift+D」押下
  • 若しくは左のデバッグ・マークを押下

歯車マークを押下

Debug viewの歯車マークを押下してlaunch.jsonを新規作成する。

launch.jsonの設定

launch.jsonのconfigurationsセクションに以下の要素を追加する。

{
  "type": "chrome",
  "request": "launch",
  "name": "Launch Chrome against localhost",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}"
}

デバッグ実行

デバッグ実行の設定

  • Visual Studio的操作性で、
    ソース・コードにブレーク・ポイントを設定できる。
  • console.logでデバッグ情報を出力できる。
    console.log("XXX: " + JSON.stringify(state));

デバッグ実行の開始

  • デバッグ実行の開始の開始前に、npm startを実行しておく。
  • 次いで、Debug viewで、[▶](デバッグの開始)ボタンを
    DDLから「Launch Chrome against localhost」を
    選択した状態で押下してデバッグ実行を開始する。

デバッグ実行の確認

  • ブレーク・ポイントでブレークする。
  • デバッグ・コンソールにデバッグ情報が出力される。
    デバッグ実行

参考

セカンド・ステップ

参考

React初心者のまとめ

基本編:1/3

https://qiita.com/tomi_shinwatec/items/6563eacd88e63bda5de3

基本編:2/3

https://qiita.com/tomi_shinwatec/items/cdd319d8fce8bdb829d0

基本編:3/3

https://qiita.com/tomi_shinwatec/items/975eceda3d07b152547c

今からはじめるReact.js

〜準備〜

https://qiita.com/kuniken/items/19fccc27b8bfa8068d22

〜初めてのコンポーネント〜

https://qiita.com/kuniken/items/963cb977dffd3e662e40

〜コンポーネントをまとめる〜

https://qiita.com/kuniken/items/c0f5ed06695ce52d4854

〜スタイルの適用〜

https://qiita.com/kuniken/items/b06de893c22f33499a22

〜React ver0.14〜

https://qiita.com/kuniken/items/2fc5b782da5d302247ab

〜propsとstate、それからrefs〜

https://qiita.com/kuniken/items/a22adda392ccc30011b1

〜・・・〜

https://qiita.com/kuniken/items/・・・

〜画面遷移〜

https://qiita.com/kuniken/items/89c8bbef3b71d2af662d

〜Flux〜

https://qiita.com/kuniken/items/b532d4fa980b53fd6bd5

0からreact習得記 まとめ

https://qiita.com/ryo_t/items/67e319f8cc41c2d96eb9

[DAY 01]

ReactでHelloWorld?とカードアプリ作成

[DAY 02]

手軽にes2015を実行する為にreplツールを調査しました

[DAY 03]

styled-componentsを使用してスタイリングを行う

[DAY 04]

ES2015を覚えるならコレ!ES2015のおすすめ学習リソース一覧

[DAY 05]

JavaScriptの関数を簡単にまとめる

[DAY 06]

JavaScriptの高階関数って何ですか?

[DAY 07]

Reactでカウンターアプリを作る!

[DAY 08]

ReactのStateとPropsの違いについて

[DAY 09]

Reactのコンポーネントをステートレスに!!!recomposeとは?

[DAY 10]

recomposeを使って電卓アプリを作る!

[DAY 11]

React Storybookを使って開発効率を爆速に!!

[DAY 12]

結局どれを使うのがいいの?Reactスターターキット比較

[DAY 13]

Prettierで書いたコードを見やすく綺麗に!

[DAY 14]

ダミーデータを簡単に生成するライブラリ、faker.jsを使ってみる

[DAY 15]

Next.jsを使ってみる

create-react-app

Qiita


添付ファイル: fileDebug.png [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2018-07-05 (木) 23:45:14 (14d)