1. YNanshin

    Posted

    YNanshin
Changes in title
+【2019/03| React入門①】ES2015で「Hello World」を出すまで
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,187 @@
+# やること
+
+***「ES2015でHello Worldを出す」***
+WebpackやBabelを使って、ローカルにwebserverを立ててブラウザ上にHTMLを表示する
+
+
+# 参考
+[最短で学ぶ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"`
+* ES2015に必要なpackageをinstall
+* `yarn init`ーpackage jsonを作成)
+ * `yarn add ***`
+ * package.jsonに必要なパッケージをインストール&直接記述)
+ * 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」が表示される
+
+
+# ソースコード
+
+```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の実行ポリシー設定を変更する
+* コマンド画面で下記コマンドを実行
+
+`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の公開段階で使用されているバージョンに合わせる
+
+# 自分用メモ
+
+### ①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ディレクトリがグレーになる
+
+
+```
+
+# 終わり
+以上です