React学習｜環境の下準備｜React

投稿日 2021年6月25日
著者 kngsmym
カテゴリー react

下記ページを参考にまずはチュートリアル

今から始めるReact入門〜 React の基本 – Qiita

目次今から始めるReact入門〜 React の基本 ←★ここ今から始めるReact入門〜 React Router 編今から始めるReact入門〜 flux編今から始めるReact入門〜 Redux…

qiita.com

ほとんど参考サイトそのままになるが、記録のためにターミナルから入力した操作を転記。

下準備

フォルダ作成

react-turotrialというフォルダを作成し、その中にsrc/jsを作成

$ mkdir react-tutorial
$ cd react-tutorial
$ mkdir -p src/js

npm初期化

$ npm init

とりあえずEnter連打。ただし下記一行のみはファイルを指定のこと。
先にwebpack.config.js 作っておけばデフォルトで選択されるとのこと。

entry point: (index.js) webpack.config.js

他にも指定しないとnpm install時点で警告が出る箇所などあるっぽいが、とりあえず動かす目的で指定せず進む。

react, webpack, babel のインストール

$ npm install --save-dev webpack webpack-cli webpack-dev-server
$ npm install -g webpack webpack-cli
$ npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader
$ npm install --save-dev react react-dom

webpack.config.jsの作成

プロジェクトフォルダ直下に以下の内容でファイル作成。

内容はこの時点で理解してないけど、とりあえず動かす目的で全コピー。

var debug   = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path    = require('path');

module.exports = {
  context: path.join(__dirname, "src"),
  entry: "./js/client.js",
  module: {
    rules: [{
      test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        use: [{
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react', '@babel/preset-env']
          }
        }]
      }]
    },
    output: {
      path: __dirname + "/src/",
      filename: "client.min.js"
    },
    plugins: debug ? [] : [
      new webpack.optimize.OccurrenceOrderPlugin(),
      new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
    ]
};

index.html作成

表示のベースとなるindex.htmlをsrc配下に作成。

webpackでビルドして生成されるclient.min.jsを読みこむように記述。

webpackの設定でjs/client.jsを読み込んでsrc/client.min.jsとして吐き出すように設定していて、本index.htmlもsrcフォルダに格納するので、パスは相対でclient.min.jsとなる

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Tutorials</title>
    <!-- change this up! http://www.bootstrapcdn.com/bootswatch/ -->
    <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/cosmo/bootstrap.min.css" type="text/css" rel="stylesheet"/>
  </head>

  <body>
    <div id="app"></div>
    <script src="client.min.js"></script>
  </body>
</html>

client.jsの作成

client.jsを作成して以下を記述。

現時点で内容は今ひとつ理解できていないが、JSXで画面にWelcome!と表示されるはずのコード。

import React from "react";
import ReactDOM from "react-dom";

class Layout extends React.Component {
  render() {
    return (
      <h1>Welcome!</h1>
    );
  }
}

const app = document.getElementById('app');
ReactDOM.render(<Layout/>, app);

Buildして表示を確認

$ webpack --mode development

正常に完了したらsrcフォルダにclient.min.jsが生成されているので、ブラウザでsrc/index.htmlを開いて確認すると、Welcome!が大きな文字で表示されているはず。

開発用webサーバ

webpack-dev-serverで開発サーバを起動できる。

$ ./node_modules/.bin/webpack-dev-server --content-base src --mode development

しかしこれは動かず。webpack4系を使ってる場合はこちらをとのことなので以下を試してみたところ起動できた。

$ webpack serve --content-base src --mode development

この状態でclient.jsを上書き保存すると、再ビルドされて画面も更新される。

npmに組み込み

package.jsonにbuildとサーバ起動を組み込む。

scriptsに以下の記述を追加。

  "scripts": {
    "〜": "〜",
    "start": "webpack serve --content-base src --mode development --inline"
  },

以後、以下のコマンドで起動すれば自動buildしてプレビューできる。

$ npm start