LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@YNanshin(yokota nanshin)

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

Last updated at Posted at 2019-03-01

やること

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

終わり

以上です

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?