reactでハローアンサーズをやってみる

/ JavaScript / By
ショコラ
ショコラ

reactでハローアンサーズをやってみる

昔、react やったけど、今はまた違ってみえるかな？
参考書みながら、ハローアンサーズやってみます。

もっさん先輩
もっさん先輩

プロジェクトのディレクトリを作成します。

mkdir hello-answorz
cd .\hello-answorz\

「npm init」を実行すると、package.jsonのファイルが作成されます。それだけです。

npm init -y
{
  "name": "hello-answorz",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

↓下のように書き換えます。

{
  "name": "hello-answorz",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start":"webpack-dev-server",
    "webpack":"webpack -d"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

パッケージをインストールします。

※「–save-dev」オプション（開発環境用）で、パッケージの情報を package.json に記録できます。package.json に記録しておけば、「npm install」で同じ環境を用意することができます。本番環境用は「–save」オプションを使い、「npm install –production」で環境を用意できます。

npm install react react-dom --save-dev
npm install webpack webpack-dev-server webpack-cli --save-dev
npm install @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev
npm install eslint eslint-loader eslint-plugin-react --save-dev
npm install css-loader style-loader babel-loader --save-dev

ディレクトリを作成します。

mkdir src
mkdir public

設定ファイルを作成します。

.babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

.eslintrc.json

{
  "env":{
    "browser":true,
    "es6":true
  },
  "parserOptions":{
    "sourceType":"module",
    "ecmaFeatures":{
      "experimentalObjectRestSpread":true,
      "jsx":true
    }
  },
  "extends":["eslint:recommended","plugin:react/recommended"],
  "plugins":["react"],
  "rules":{
    "no-console":"off"
  },
  "settings": {
    "react": {
       "version": "detect"
    }
  }
}

webpack.config.js

const path = require('path');
module.exports = {
  mode: 'development',
  entry:path.join(__dirname,"src","index.js"),
  output: {
    path: path.join(__dirname,"public/js"),
    filename:"main.js"
  },
  devServer: {
    static: path.join(__dirname,"public"),
    devMiddleware: {
      publicPath:'/js/'
    },
    port: 80,
  },
  module: {
    rules: [{
      test: /\.js$/,
      enforce:"pre",
      exclude: /node_modules/,
      loader:"eslint-loader"
    },{
      test: /\.css$/,
      use: ["style-loader","css-loader"]
    },{
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader:"babel-loader"
      }
    }]
  }
}

public/index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <div id="root"></div>
  <script src="js/main.js"></script>
</body>
</html>

src/index.js

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
  <h1>Hello Answorz!</h1>,
  document.getElementById('root')
)

src/index.js

npm run
npm start

http://localhost/ にアクセスします。

以上

Scroll to Top