やること

①「ES2015でHello Worldを出す」
WebpackやBabelを使って、ローカルにwebserverを立ててブラウザ上にHTMLを表示する

②静的監視ツール(eslint)の導入
ATOMに導入するとリアルタイムでエラーを検出してくれ、開発効率が向上する

③sass/scssを用いたスタイルシートの導入
CSSの拡張版。入れ子でCSSを指定できる。変数の使い回し。

参考

最短で学ぶReactとReduxの基礎から実践まで/Udemy

①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]パッケージのインポート

ソースコード

index.html


<!DOCTYPE html>
<html lang="" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>udemy_react</title>
    <link rel="stylesheet" href="bundle.css">
  </head>
  <body>
    <div class="container">
      Hello udemy
    </div>
    <script src="bundle.js" charset="utf-8"></script>
  </body>
</html>

css.index.scss


$background-color: #eee;

body {
　background-color#eee;
}

index.jsx


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

import App from './components/app';

ReactDOM.render(<App />, document.querySelector('.container'));

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

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のツリーに表示されないフォルダやファイルがある？

【問題②】Shellｽｸﾘﾌﾟﾄのエラー「このｼｽﾃﾑはｽｸﾘﾌﾟﾄの実行が～」

[原因]
shellの権限設定

[対策]
shellの実行ポリシー設定を変更する

コマンド画面で下記ｺﾏﾝﾄﾞを実行

Set-ExecutionPolicy -Scope CurrentUser RemoteSigned

参考:PowerShell スクリプトの実行が無効となっている場合の対処法

【問題③】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を追記したとき(カンマ)をつけ忘れてた

package.json


 "scripts": {
    "start": "./node_modules/.bin/webpack-dev-server"
   } //← ここ！!
  "dependencies": {

自分用メモ

①Atomの機能(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ディレクトリがグレーになる

終わり

以上です