ReactJS.NETとASP.NET Coreで作業環境作成

手順メモ的な感じの

1. VisualStudio2019 Communityをインストール 　→今回はこれは既にインストール済みなのでスキップ

2. Node.jsをインストール 　→先にVS2019でReactAppを作ってデバッグしようとしたらNode.js入れな？ 　　とエラーが出たので、プロジェクト作成前にやっておくのが良

3. ReactJSのNugetパッケージをインストール 　→NugetパッケージマネージャでReact.AspNetを検索して最新の安定版インストール

4. ビルドして実行 　→IIS Express＋Google Chromeがデフォルト設定になっていたのでそのままF5で実行

5. windows powershellでプロジェクト作成したフォルダに移動(cd ～)して「npm init -y」 　→package.jsonファイルがプロジェクトで必要になるので初期生成

6. Webpackをインストール

npm install webpack --save-dev

　　ここでそこそこ時間がかかるのでコーヒーでもすすっておく 　　一服でも可。

1. package.jsonを開いてWebpackの設定を追記 　→"scripts": { ～ }に以下追記

　　"wbp": "webpack"

1. webpack.config.jsファイルを作成 　→プロジェクトファイル直下の階層にJavascriptファイル「webpack.config.js」 　　を追加して、内容は以下コピペ。

const path = require('path');

module.exports = {
    // This is our entry point containing the code 
    // required to perform server-side rendering.
    entry: './wwwroot/source/main.js',
    output: {
        path: path.resolve(__dirname, 'wwwroot/dist'),
        filename: 'bundle.js'
    },
    module: {
        // Transform .jsx files.
        rules: [
            { test: /\.jsx$/, use: 'jsx-loader?harmony' }
        ]
    },
    resolve: {
        // Ensure we can deal with .js and .jsx and require files.
        extensions: ['.js', '.jsx']
    },
    // Set mode for development, production or none.
    mode: 'none'
};

1. npmでパッケージを2つほどインストール 　→expose-loderとjsx-loader

npm install --save-dev expose-loader
npm install --save-dev jsx-loader

1. めでたく出来たと思いきや、Home.jsに日本語の全角文字を差し込んだところで文字化け発生。以下の記事を参考にファイルの文字コードをUTF-8に変更 　https://qiita.com/Tood/items/0dbeb532c47df4931503

2. 文字化け解消

やったぜ。

後はここにReactコンポーネントやクライアント/サーバーサイド処理を足してそれっぽいものにしていけばよろしいかもしれないかもしれない。