More than 5 years have passed since last update.

[2019年版]create-react-appしないでReactの環境構築してみるメモ

Last updated at 2019-02-27Posted at 2019-02-26

#環境

$node -v
v11.10.0

$npm -v
6.8.0

$yarn -v
1.13.0

yarnを初期化

yarnはbrewでいれてます

$yarn init

とりあえず全部Enter

question name (learn-js):
question version (1.0.0):
question description:
question entry point (index.js):
question repository url:
question author:
question license (MIT):
question private:

reactいれる

$yarn add react react-dom

webpackいれる

$yarn add -D webpack webpack-cli webpack-dev-server html-webpack-plugin

babel入れる

$yarn add -D @babel/core @babel/preset-env @babel/preset-react babel-loader @babel/register

eslintのルールに従って、prettierでフォーマットする

$yarn add -D eslint
$yarn add -D prettier eslint-plugin-prettier eslint-config-prettier

index.htmlつくる

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Learn JS</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

src/index.jsxをかく

src/index.jsx

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

const title = 'Learn js';

ReactDOM.render(
  <div>{title}</div>,
  document.getElementById('root')
);

server立ち上げるコマンド書く

package.json

"scripts": {
    "start": "webpack-dev-server --mode=development --open"
}

webpack.config.jsかく

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')

const src  = path.resolve(__dirname, 'src')
const dist = path.resolve(__dirname, 'dist')

module.exports = {
  mode: 'development',
  entry: src + '/index.jsx',

  output: {
    path: dist,
    filename: 'bundle.js'
  },

  module: {
    rules: [
      {
        test: /\.jsx$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },

  resolve: {
    extensions: ['.js', '.jsx']
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'index.html')
    })
  ]
}

.babelrcかく

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

アプリケーションがうごきました！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up