search

sumakokima2 / resium-sample2

0 stars 0 forks source link

[TASK] React 1-0. Reactプロジェクトを始める #21

Open sumakokima2 opened 4 years ago

sumakokima2 commented 4 years ago

Wikiの項目

該当項目なし

構成

ワークスペースの作成

ディレクトリの作成
$ mkdir react-practice1
$ cd react-practice1
$ mkdir -p src/js
npminitでpackage.jsonを作る
$ npm init
パッケージのインストール
$ 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
$ npm install --save-dev eslint
$ npm install --save-dev babel
$ npm install --save-dev prettier
yarnを導入
$ yarn install
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/js.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: "js.js"
    },
    plugins: debug ? [] : [
      new webpack.optimize.OccurrenceOrderPlugin(),
      new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
    ]
};
src/index.htmlを作成
<!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="js.js"></script>
  </body>
</html>
js.jsを作成
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);
表示確認
$ webpack --mode development

index.htmlをブラウザで見ることができます。

次回はこの基本を井上君webpack.config.jsにアレンジしてReactを実装する準備をします。