ついに、フロント初心者の私がReactに挑戦してみた!

· ☕ 4
🏷️
  • #aws
  • #s3
  • #React
  • ついに!なかなか手が付けられていなかったフロントのお勉強を本格的に始めました。

    いろんな人がいろんなものを言いよっていうので、何しようかすごい悩んだんですが、ネイティブアプリにつなげたい(React native)想いと、次の現場で使うらしいことを踏まえて、ちょっと微妙だけどReactを選択しました。

    コードはここにおいてあります。

    入門者向けのサイトを探す

    どんなものかもよく分かっていないので、とりあえず、このページに従ってみる!

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

    環境

    target command varsion
    node node -v v8.10.0
    npm npm -v 3.5.2
    OS cat /etc/lsb-release DISTRIB_ID=Ubuntu
    DISTRIB_RELEASE=18.04
    DISTRIB_CODENAME=bionic
    DISTRIB_DESCRIPTION="Ubuntu 18.04.2 LTS”

    プロジェクトの作成

    適当にリポジトリを作って、それをcloneしてきて始める。

    もちろん、ローカルでmkdir reactから始めても構いません!

    $ git clone 適当に作ったリポジトリ.git
    $ cd react
    $ mkdir -p src/js
    

    npm initする

    入力を求められるので都度入力していく。私の場合は↓のように入れました。

    $ npm init
    This utility will walk you through creating a package.json file.
    It only covers the most common items, and tries to guess sensible defaults.
    
    See `npm help json` for definitive documentation on these fields
    and exactly what they do.
    
    Use `npm install <pkg> --save` afterwards to install a package and
    save it as a dependency in the package.json file.
    
    Press ^C at any time to quit.
    name: (react) scheduler
    version: (1.0.0) 
    description: スケジュール管理をする
    entry point: (index.js) 
    test command: 
    git repository: (https://github.com/runau/react.git) 
    keywords: 
    author: 
    license: (ISC) 
    About to write to /mnt/c/github/runau/react/package.json:
    
    {
      "name": "scheduler",
      "version": "1.0.0",
      "description": "スケジュール管理をする",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "repository": {
        "type": "git",
        "url": "git+https://github.com/runau/react.git"
      },
      "author": "",
      "license": "ISC",
      "bugs": {
        "url": "https://github.com/runau/react/issues"
      },
      "homepage": "https://github.com/runau/react#readme"
    }
    
    
    Is this ok? (yes) yes
    

    これで勝手にpackage.jsonが作られる。

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

    ちょっと何言ってるか分かんないけど、とりあえずそのままやる。

    $ npm install --save-dev webpack webpack-cli webpack-dev-server
    $ sudo 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 -g webpack
     webpack-cli
    npm WARN deprecated mkdirp@0.5.3: Legacy versions of mkdirp
     are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
    loadDep:binary-extensions ▄ ╢█████████████░░░░░░░░░░░░░░░░░loadDep:binary-extensions ▄ ╢█████████████░░░░░░░░░░░░░░░░░
    loadDep:enhanced-resolve  ▄ ╢█████████████░░░░░░░░░░░░░░░░░
    loadDep:yargs → request   ▄ ╢█████████████░░░░░░░░░░░░░░░░░
    loadDep:yargs → get       ▄ ╢█████████████░░░░░░░░░░░░░░░░░
    loadDep:yargs → network   ▐ ╢█████████████░░░░░░░░░░░░░░░░░
    loadDep:yargs → network   ▄ ╢█████████████░░░░░░░░░░░░░░░░░
    loadDep:yargs → resolveWi ▌ ╢█████████████░░░░░░░░░░░░░░░░░
    loadDep:yargs → get       ▄ ╢█████████████░░░░░░░░░░░░░░░░░
    /usr/local/lib
    ├── UNMET PEER DEPENDENCY webpack@4.x.x
    └─┬ webpack-cli@3.3.11 
    ~略~
    
    npm WARN optional Skipping failed optional dependency /webp
    ack/chokidar/fsevents:
    npm WARN notsup Not compatible with your operating system o
    r architecture: fsevents@1.2.12
    npm ERR! Linux 4.4.0-18362-Microsoft
    npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "install" "-g" "webpack" "webpack-cli"
    npm ERR! node v8.10.0
    npm ERR! npm  v3.5.2
    npm ERR! path ../lib/node_modules/webpack/bin/webpack.js
    npm ERR! code EACCES
    npm ERR! errno -13
    npm ERR! syscall symlink
    
    npm ERR! Error: EACCES: permission denied, symlink '../lib/node_modules/webpack/bin/webpack.js' -> '/usr/local/bin/webpack'
    npm ERR!  { Error: EACCES: permission denied, symlink '../lib/node_modules/webpack/bin/webpack.js' -> '/usr/local/bin/webpack'
    npm ERR!   errno: -13,
    npm ERR!   code: 'EACCES',
    npm ERR!   syscall: 'symlink',
    npm ERR!   path: '../lib/node_modules/webpack/bin/webpack.js',
    npm ERR!   dest: '/usr/local/bin/webpack' }
    npm ERR! 
    npm ERR! Please try running this command again as root/Administrator.
    
    npm ERR! Please include the following file with any support request:
    npm ERR!     /mnt/c/github/runau/react/npm-debug.log
    

    sudo必要だったみたい。

    エラー②

    プロジェクトの名前をReactにしていたので、謎のエラーに悩まされた…。

    $ npm install --save-dev react react-dom
    npm ERR! Linux 4.4.0-18362-Microsoft
    npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "install" "--save-dev" "react" "react-dom"
    npm ERR! node v8.10.0
    npm ERR! npm  v3.5.2
    npm ERR! code ENOSELF
    
    npm ERR! Refusing to install react as a dependency of itself
    npm ERR! 
    npm ERR! If you need help, you may report this error at:
    npm ERR!     <https://github.com/npm/npm/issues>
    
    npm ERR! Please include the following file with any support request:
    npm ERR!     /mnt/c/github/runau/react/npm-debug.log
    

    この記事で解決。

    プロジェクトの名前はライブラリの名前と同じにしてはいけない!ww

    各種ファイルの用意

    $ vim 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 }),
        ]
    };
    
    $ 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="client.min.js"></script>
      </body>
    </html>
    
    vim src/js/client.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 コマンドでclient.min.js ファイルを作成。

    デプロイみたいなもんかな?

    $ webpack --mode development
    Hash: f97a4ff0cc28741ce49d
    Version: webpack 4.6.0
    Time: 995ms
    Built at: 2018-04-29 11:18:20
            Asset      Size  Chunks             Chunk Names
    client.min.js  1.66 MiB    main  [emitted]  main
    Entrypoint main = client.min.js
    [./js/client.js] 2.31 KiB {main} [built]
        + 21 hidden modules
    

    chromeで動作確認。

    エラー①

    $ google-chrome-stable ./src/index.html
    google-chrome-stable: command not found
    

    google-chrome-stable入ってなかった。こちらの記事でインストール

    エラー②

    それでも何かエラー

    $ google-chrome-stable .
    /src/index.html
    Failed to move to new namespace: PID namespaces supported, Network namespace supported, but failed: errno = Permission denied
    Trace/breakpoint trap (core dumped)
    

    --no-sandbox付ければいいみたいな情報もあったけど、ダメでした…。

    $ google-chrome-stable ./src/index.html --no-sandbox
    [20656:20656:0321/090117.412811:ERROR:browser_dm_token_storage_linux.cc(103)] Error: /etc/machine-id contains 0 characters (32 were expected).
    [20656:20656:0321/090118.593304:ERROR:browser_main_loop.cc(1512)] Unable to open X display.
    [0321/090118.617621:ERROR:nacl_helper_linux.cc(308)] NaCl helper process running without a sandbox!
    Most likely you need to configure your SUID sandbox correctly
    

    ただの動作確認だし諦めたww

    普通に./src/index.htmlをchromeで開く。

    できた

    !!

    出来てたww

    独り言

    明日は、↑で作ったのを色々仕組みを理解していこうー

    今日はこれから那須に温泉旅//楽しみー//

    最終的にはこれがしたいメモ!

    AWS CodePipelineでReactをs3に保存してCloudFrontで公開する手順


    るな
    るな
    エンジニア