1. YNanshin

    No comment

    YNanshin
Changes in title
-【2019/03| React入門①】ES2015で「Hello World」を出すまで
+【2019/03| React入門①】ES2015で「Hello World」|静的監視ツール(eslint)の導入 | SCSS
Changes in tags
Changes in body
Source | HTML | Preview
@@ -1,187 +1,275 @@
# やること
***「ES2015でHello Worldを出す」***
WebpackやBabelを使って、ローカルにwebserverを立ててブラウザ上にHTMLを表示する
# 参考
[最短で学ぶReactとReduxの基礎から実践まで/Udemy](https://www.udemy.com/share/1000kqBEAZeVlSRno=/)
-# ES2015で「Hello worldを出す」までにやったこと
+# ES2015で「Hello worldを出す」までにやこと
-* エディタ(ATOM)のインストール
-* プロジェクトの作成
+### ①事前準備
+
+* エディタの準備(ATOM)
+* プロジェクトの作成(ターミナル)
* `mkdir project-name`
* `cd projet-name`
* `git init`
* `eho 'project-name' > README.md`
* `git status`
* `git add .`
* `git commit -m "initial commit"`
-* ES2015に必要なpackageをinstall
-* `yarn init`ーpackage jsonを作成)
- * `yarn add ***`
- * package.jsonに必要なパッケージをインストール&直接記述)
-
+* パッケージマネージャー(yarn)のインストール
+
+###②ES2015に必要なpackageをinstall
+
+* `yarn init`ーpackage jsonを作成
+* `yarn add ***`
* webpack(@3.3.0)
- * webpack-dev-server(@2.5.1)
- * WebServerをローカルで動かすライブラリ)
+ * 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.config.jsの作成(ソースコードのコピペ)
+
+###③webpack-dev-server(ローカルサーバ)の起動
+
+* `./node_modules/.bin/webpack-dev-server`
+ * ブラウザで`localhost:8080`「Hello World」が表示される
+
+###【補足1】webpackそのものを実行
+
+* `./node_modules/.bin/webpack`
+ * ビルドだけが実行され、src/index.jsコンパイルされる
+ * コンパイルの成果物(bundle.js)がpublicフォルダにアウトプットされる
+ * bundle.jsはコミットする必要がないのでignore
+
+###【補足2】webpack-dev-serverコマンドをスクリプトとして登録
+* `./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
<!DOCTYPE html>
<html lang="" dir="ltr">
<head>
<meta charset="utf-8">
<title>udemy_react</title>
</head>
<body>
<div class="container">
Hello udemy
</div>
<script src="bundle.js" charset="utf-8"></script>
</body>
</html>
```
```js:package.json
{
"name": "udemy_react",
"version": "1.0.0",
"main": "index.js",
"author": "*******<mail>",
"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)
-### 【問題②】PowerShell スクリプトのエラー「このシステムはスクリプトの実行が~」
+### 【問題②】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起動時エラー
+### 【問題③】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を押すと下記のテンプレートが自動表示される
<!DOCTYPE html>
<html lang="" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
```
### ②.gitignoreー対象がコミットされなくなる
```:.gitignore
node_modules
// gitignoreの本文に名前を指定したフォルダはコミットされなくなる。
// node_modulesディレクトリがグレーになる
```
# 終わり
以上です