はじめてのReactアプリ（1）

4864 ワード
JSX React JSX テキストリンク

スキルアップのために、Reactを学ぶことがあったので、そのときのメモ

開発準備

PCでの環境をまとめていますが、Reactを学びたいのみだったらCodePenがよいかも

CodePenの設定

New Penから新しいPenを作成し、settingのjavascriptに下記を追加

  • JavaScript Preprocessorを「Babel」を設定
  • Add External Scripts/PensのQuick-addからReactとReactDOMを追加

Node.jsとnpm インストール

Node.js
Node.jsをインストールすればnpmもインストールされている

node -v
v8.9.4

npm -v
5.6.0

必要なnpmパッケージをインストール

npm install react react-dom
npm install webpack webpack-dev-server
npm install babel-cli babel-preset-env babel-preset-react
npm install eslint eslint-loader eslint-plugin-react
npm install css-loader style-loader babel-loader
  • Babel
    • ES6を現状のJavaScritpに変換するツール
  • ESLint
    • JavaScritpt の文法チェックツール
  • Loader(css-loader style-loader)
    • CSSファイルをwebpackが作成するoutputファイルに組み込むツール

Reactで表示してみた

各設定ファイル

.babelrc

{
  "presets": ["env", "react"]
}

.eslintrcjson

{
    "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"
    }
}

webpack.config.js

module.exports = {
  entry: {
    app: "./src/index.js"
  },
  output: {
    path: __dirname + '/public/js',
    filename: "[name].js"
  },
    devServer: {
    contentBase: __dirname + '/public',
    port: 3000,
    publicPath: '/js/'
  },
  devtool: "#inline-source-map",
  module: {
    rules: [{
      test: /\.js$/,
      enforce: "pre",
      exclude: /node_modules/,
      loader: "eslint-loader"
    }, {
      test: /\.css$/,
      loader: ["style-loader","css-loader"]
      }, {
      test: /\.scss$/,
      use: [{
        loader: "style-loader" // creates style nodes from JS strings
      }, {
        loader: "css-loader" // translates CSS into CommonJS
      }, {
        loader: "sass-loader" // compiles Sass to CSS
        }]
      }, {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
     }]
  }
};

public/index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1" />
  <title>React App</title>
</head>
<body>
  <p>hello world</p>
  <script type="text/javascript" src="js/app.js" charset="utf-8"></script>
</body>
</html>

コマンドでnpmをstartし、ブラウザでhttp://localhost:3000/を入力するとhello worldが表示される

npm start

面白い顔文字
高精度「-」アルゴリズム