Edited at

【2019/03| React入門①】ES2015で「Hello World」|静的監視ツール(eslint)の導入 | SCSS


やること

①「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ディレクトリがグレーになる



終わり

以上です