Skip to content

DNET_ReactFirstStep

Jump to bottom
nishi_74322014 edited this page Sep 11, 2026 · 1 revision

Reactのファースト・ステップ

概要

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

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

手順１

インストール（手順１）

  • npm（Node.js（JavaScriptの該当節を参照））をインストールしておく。

  • 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

実行（手順１）

  • Gitなどから復元した場合は、事前に、
    npmのインストール・コマンド（npmのコマンドの該当節を参照）で
    node_modulesを復元する必要がある。

    npm i

  • サンプルを実行する
    （サンプルのルート・ディレクトリで以下コマンドを実行）。

    npm start

    ※ npm start（ ≒ npm run-script start）で、package.jsonの
    "start": "react-scripts start"が実行され、webpack開発サーバが起動する。

手順２

概要（手順２）

を考慮し、以下のように実装する（いずれも React の該当節を参照）。

対象

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

サンプルの実装

App.jsを書換

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

Menu.jsを追加

手順３

サーバの準備

Express

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

  • Expressサーバをインストール（Expressの該当節を参照）
  • JSONを返すExpressサーバを準備（Expressの該当節を参照）

ASP.NET Core

ASP.NET Coreで実装する場合、以下を流用するなどする。

プロジェクト生成

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

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

create-react-app

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

create-react-app react-template

比較

Component（比較）

CSS（比較）

移植の方針

Component（移植の方針）

componentsフォルダに格納

CSS（移植の方針）

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

移植の開始

package.json

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

*.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](#routesjs)

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側

React側

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

>npm start

サンプル（手順３）

手順４

ここでは、以降、難易度が上がるので、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初心者のまとめ

今からはじめるReact.js

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（create-react-app）

移行メモ

  • 「デバッグ実行の開始の開始前に、npm startを実行しておく。」は 「開始」が重複していたため「デバッグ実行の開始前に、」とした。
  • 「0からreact習得記 まとめ」「React初心者のまとめ」「今からはじめるReact.js」は、 見出しと本文が 1 行ずつ交互に並ぶ構成だったため箇条書きにまとめた。
  • 同名の見出し（「インストール」「実行」「概要」「参考」「Component」「CSS」「サンプル」）が 複数あり GitHub Wiki でアンカが衝突するため、括弧で文脈を補って一意にした。
  • マイクロソフト系技術情報 Wiki（techinfoofmicrosofttech.osscons.jp）への URL リンクは、移行済みの ASP.NET Core SPAテンプレート / ASP.NET Core React.jsテンプレート / ASP.NET Core に張り替えた。
  • PukiWiki のページ内アンカ（#xxxxxxxx）は GitHub Wiki では再現できないため、 同一ページ内のアンカは見出しから生成されるアンカに張り替え、 他ページのアンカを指すリンクは「〜（ページ名 の該当節を参照）」の形に置き換えた。
  • 添付は 1 点で、DNET_ReactFirstStep_1.png として取得した。

Tags: 移行, React, create-react-app, npm, SPA, Visual Studio Code, デバッグ, ASP.NET Core

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

NetDevInfraWiki

マイクロソフト系技術情報 Wiki
Open 棟梁 Wiki

（未着手）

開発基盤部会 Wiki

移行管理: DONE ／ TODO

Clone this wiki locally