--- title: 【2019/03| React入門①】ES2015で「Hello World」|静的監視ツール(eslint)の導入 | SCSS tags: React フロントエンド ATOM ESLint scss author: YNanshin slide: false --- # やること ***①「ES2015でHello Worldを出す」*** WebpackやBabelを使って、ローカルにwebserverを立ててブラウザ上にHTMLを表示する ***②静的監視ツール(eslint)の導入*** ATOMに導入するとリアルタイムでエラーを検出してくれ、開発効率が向上する ***③sass/scssを用いたスタイルシートの導入*** CSSの拡張版。入れ子でCSSを指定できる。変数の使い回し。 # 参考 [最短で学ぶReactとReduxの基礎から実践まで/Udemy](https://www.udemy.com/share/1000kqBEAZeVlSRno=/) # ①ES2015で「Hello worldを出す」 ### ①ー①事前準備 * エディタの準備(ATOM) * プロジェクトの作成(ターミナル) * `mkdir project-name` * `cd projet-name` * `git init` * `eho 'project-name' > README.md` * `git status` * `git add .` * `git commit -m "initial commit"` * パッケージマネージャー(yarn)のインストール ###①ー②ES2015に必要なpackageをinstall * `yarn init`ーpackage jsonを作成 * `yarn add ***` * webpack(@3.3.0) * webpack-dev-server(@2.5.1)…WebServerをローカルで動かすライブラリ) * babel-core(@6.25.0) * babel-loader(@7.1.1) * babel-preset-react(@6.24.1) * babel-preset-es2015(@6.24.1) * webpack.config.jsの作成(ソースコードのコピペ) ###①ー③webpack-dev-server(ローカルサーバ)の起動 * `./node_modules/.bin/webpack-dev-server` * ブラウザで`localhost:8080`「Hello World」が表示される ###①ー④webpackそのものを実行【補足1】 * `./node_modules/.bin/webpack` * ビルドだけが実行され、src/index.jsコンパイルされる * コンパイルの成果物(bundle.js)がpublicフォルダにアウトプットされる * bundle.jsはコミットする必要がないのでignore ###①ー⑤webpack-dev-serverコマンドをスクリプトとして登録【補足2】 * `./node_modules/.bin/webpack-dev-server` * package.jsonファイルにコード追加 * `"script:{"start": "./node_modules/.bin/webpack-dev-server"}` * `yarn run start`でローカルを起動可能になる # ②【対応中(エラーが消えない)】静的解析ツール(eslint)の導入 ###②ー①eslintの導入 * `yarn add eslint@3.19.0 eslint-plugin-react@7.1.0` * `./node_modules/.bin/eslint`ーeslintがインストールされてることを確認 ###②ー②eslintの利用方法 * `./node_modules/.bin/eslint [ファイル名](src/index.js)` * `./node_modules/.bin/eslint --init` 設定ファイルを作る * `./node_modules/.bin/eslint src/index.js` * エラー内容が自動出力されるようになる ###②ー③eslintをAtomから使えるようにする * eslintの機能がAtom画面上で有効になる * 開発中にリアルタイムでミスを教えてくれる # ③【対応中(CSSが反映されない)】sass/scssを用いたスタイルシートの導入 ###③ー①scssとは? * CSSの拡張版 * 入れ子でcssを指定できる * 変数を指定できる * mixinー複数のcssを使いまわせる  * cssの可読性が上がる ###③ー②scssパッケージのインストール * SCSSパッケージのインストール * `yarn add node-sass style-loader css-loader sass-loader import-glob-loader extract-text-webpack-plugin` * [webpack.config.js]の書き換え(コピペ) ###③ー③scssファイル作成 * [udemy_react/styleshetts/index.scss] * サーバ起動 `yarn run start` * ブラウザのアドレスバーに `localhost:8080` * [stylesheets/index.scss]にコード追記 * 【パス】`body{background-color:#ccc;}`ーブラウザにCSS反映されない # 【途中】④Reactを使ったHello world * react・react-domパッケージの導入   `$ yarn add react@15.6.1 react-dom@15.6.1 ` * [src/index.js]パッケージのインポート # ソースコード ```html:index.html udemy_react
Hello udemy
``` ```css.index.scss $background-color: #eee; body {  background-color#eee; } ``` ```js:index.jsx import React from 'react'; import ReactDOM from 'react-dom'; import App from './components/app'; ReactDOM.render(, document.querySelector('.container')); ``` ```js:package.json { "name": "udemy_react", "version": "1.0.0", "main": "index.js", "author": "*******", "license": "MIT", "dependencies": { "babel-core": "6.25.0", "babel-loader": "7.1.1", "babel-preset-es2015": "6.24.1", "babel-preset-react": "6.24.1", "babel-preset-react-es2015": "^1.3.0", "webpack": "3.3.0", "webpack-dev-server": "2.5.1" } } ``` ```js:webpack.config.js var publidDir = __dirname + '/public'; module.exports = { entry: [ './src/index.js' ], output: { path: publidDir, publicPath: '/', filename: 'bundle.js' }, module] { loaders: [{ exclude: /node_modules/, loader: 'babel-loader', query: { presents: ['react', 'es2015'] } }] }, resolve: { extensions: ['_js', '_jsx'] }, devServer: { historyApiFallback: true, contentBase: publidDrir } }; ``` # エラーやハマったこと ### 【問題①】Atomに表示されないフォルダがある [対策] Windows版 * [File]-[setting] * [Packages] treeviewで検索 * [tree-view]のSetting * [Settings]-[Hide VCS ignored Files]のチェックを外す [参考] [Atomのツリーに表示されないフォルダやファイルがある?](https://qiita.com/suin/items/f7aa13625c1545d08a8b) ### 【問題②】Shellスクリプトのエラー「このシステムはスクリプトの実行が~」 [原因] shellの権限設定 [対策] shellの実行ポリシー設定を変更する * コマンド画面で下記コマンドを実行 `Set-ExecutionPolicy -Scope CurrentUser RemoteSigned` [参考:PowerShell スクリプトの実行が無効となっている場合の対処法](http://totech.hateblo.jp/entry/2017/09/29/162411#%E6%96%B9%E6%B3%951-%E7%9B%B4%E6%8E%A5%E5%AE%9F%E8%A1%8C%E3%83%9D%E3%83%AA%E3%82%B7%E3%83%BC%E8%A8%AD%E5%AE%9A%E3%82%92%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B) ### 【問題③】webpack起動時エラー >The CLI moved into a separate package: webpack-cli please install 'webpack-cli' in addition to webpack itself to use the CLI -> When using npm: npm i -D webpack-cli -> When using yarn: yarn add -D webpack-cli internal/modules/cjs/loader.js:613 throw err; Error: Cannot find module 'webpack-cli/bin/config-yargs' [原因] webpackのバージョンによってwebpack.config.jsの記述方法が異なる模様(同様エラーの記事が大量に出る) [対処法] * yarnでインストールするパッケージのバージョンを変更 * Udemyの公開段階で使用されているバージョンに合わせる ### 【問題④】yarn add時に「An unexpected error occurred~」エラー [事象] * 静的解析ツール(eslint)の導入 * `yarn add eslint@3.19.0 eslint-plugin-react@7.1.0`を実行 * 下記のエラーメッセージが発生 >error An unexpected error occurred: "C:\./udemy_react\package.json: Unexpected string in JSON at position 220". [原因] package.jsonファイルに scripsを追記したとき(カンマ)をつけ忘れてた ```js:package.json  "scripts": {     "start": "./node_modules/.bin/webpack-dev-server"    } //← ここ!!   "dependencies": { ``` # 自分用メモ ### ①Atomの機能(htmlテンプレート文) ```html:AtomのHTMLテンプレート // Atomエディタでhtmlファイルを作成 // 本文に[html]と打ってからtabを押すと下記のテンプレートが自動表示される ``` ### ②.gitignoreー対象がコミットされなくなる ```:.gitignore node_modules // gitignoreの本文に名前を指定したフォルダはコミットされなくなる。 // node_modulesディレクトリがグレーになる ``` # 終わり 以上です