今更ながらReactに入門してみるも、create-react-appが失敗したので対処メモ

最近の技術動向にここのところついていけてないなー、と感じたので適当に最近の流行を一つ選んで、入門してみる。

最近、フロントエンド開発を全然していないので、適当にReactに入門することにした。

以下はその作業記録である。

node.js環境とnpmが必要

とりあえず必要。なければ入れる。

$ npm -v
5.8.0
$ node -v
v9.10.0

あるのでOK

create-react-appをnpm installする

$ npm install -g create-react-app
/Users/user/.nodebrew/node/v9.10.0/bin/create-react-app -> /Users/user/.nodebrew/node/v9.10.0/lib/node_modules/create-react-app/index.js
+ create-react-app@1.5.2
added 67 packages from 20 contributors in 7.949s

-gオプションでglobalに(私の場合は私物開発機のmac)インストール。
まあcreate-react-appコマンドはわりと使うだろう、ということでglobalに入れておく。

※gオプションについては賛否両論あるのでよく考えて使うべし。
僕がnpm installに-gをつけないわけ | qiita

create-react-appを使って初Reactアプリをつくる

$ create-react-app my-app
Creating a new React app in /Users/user/dev/react/my-app.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...
events.js:165░░░░░░⸩ ⠼ extract:unique-string: sill extract uniq@1.0.1
throw er; // Unhandled 'error' event
^
Error [ERR_STREAM_WRITE_AFTER_END]: write after end
at writeAfterEnd (_stream_writable.js:241:12)
at PassThrough.Writable.write (_stream_writable.js:291:5)
at PassThrough.Writable.end (_stream_writable.js:576:10)
at ReadEntry.entry.on (/Users/user/.nodebrew/node/v9.10.0/lib/node_modules/npm/node_modules/pacote/lib/extract-stream.js:19:41)
at ReadEntry.emit (events.js:185:15)
at ReadEntry.emit (/Users/user/.nodebrew/node/v9.10.0/lib/node_modules/npm/node_modules/tar/node_modules/minipass/index.js:287:25)
at ReadEntry.[maybeEmitEnd] (/Users/user/.nodebrew/node/v9.10.0/lib/node_modules/npm/node_modules/tar/node_modules/minipass/index.js:240:12)
at ReadEntry.end (/Users/user/.nodebrew/node/v9.10.0/lib/node_modules/npm/node_modules/tar/node_modules/minipass/index.js:153:27)
at Unpack.[consumeBody] (/Users/user/.nodebrew/node/v9.10.0/lib/node_modules/npm/node_modules/tar/lib/parse.js:210:13)
at Unpack.[consumeChunkSub] (/Users/user/.nodebrew/node/v9.10.0/lib/node_modules/npm/node_modules/tar/lib/parse.js:391:40)
at Unpack.[consumeChunk] (/Users/user/.nodebrew/node/v9.10.0/lib/node_modules/npm/node_modules/tar/lib/parse.js:362:30)
at Unzip.(anonymous function).on.chunk (/Users/user/.nodebrew/node/v9.10.0/lib/node_modules/npm/node_modules/tar/lib/parse.js:291:59)
at Unzip.emit (events.js:180:13)
at Unzip.emit (/Users/user/.nodebrew/node/v9.10.0/lib/node_modules/npm/node_modules/tar/node_modules/minipass/index.js:287:25)
at Unzip.write (/Users/user/.nodebrew/node/v9.10.0/lib/node_modules/npm/node_modules/tar/node_modules/minipass/index.js:90:17)
at Unzip.write (/Users/user/.nodebrew/node/v9.10.0/lib/node_modules/npm/node_modules/tar/node_modules/minizlib/index.js:284:29)
Emitted 'error' event at:
at writeAfterEnd (_stream_writable.js:243:10)
at PassThrough.Writable.write (_stream_writable.js:291:5)
[... lines matching original stack trace ...]
at Unzip.write (/Users/user/.nodebrew/node/v9.10.0/lib/node_modules/npm/node_modules/tar/node_modules/minizlib/index.js:284:29)
events.js:165░░░░░░⸩ ⠦ extract:eslint: sill extract postcss-modules-values@1.3.0
throw er; // Unhandled 'error' event
^

はい、なぜか失敗。
深く考えず、node.jsのバージョンを最近最新の9.10.0に変えたことを思い出したので次のアクション

nodeのバージョンを変えてみる

私の開発機はnodebrewでnode.jsのバージョンを管理していたので、以前のv8.5.0に変えてみた。
nodebrewの件はこちら

[localhost 20:42:07 ~]$ nodebrew list
v8.5.0
v9.10.0
current: v9.10.0
[localhost 22:01:47 ~]$ nodebrew use v8.5.0
use v8.5.0
[localhost 22:01:57 ~]$ node -v
v8.5.0

再度 create-react-appに挑戦

[localhost 22:13:59 react]$ create-react-app my-app
Creating a new React app in /Users/user/dev/react/my-app.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...
> fsevents@1.1.3 install /Users/user/dev/react/my-app/node_modules/fsevents
> node install
[fsevents] Success: "/Users/user/dev/react/my-app/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile
> uglifyjs-webpack-plugin@0.4.6 postinstall /Users/user/dev/react/my-app/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js
+ react@16.3.1
+ react-dom@16.3.1
+ react-scripts@1.1.4
added 1443 packages in 86.089s
Success! Created my-app at /Users/user/dev/react/my-app
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd my-app
npm start
Happy hacking!

キタ━━━━(゚∀゚)━━━━!!

npm startする

$ cd my-app
$ npm start

すると・・・・

ompiled successfully!
You can now view my-app in the browser.
Local:            http://localhost:3000/
On Your Network:  http://192.168.0.18:3000/
Note that the development build is not optimized.
To create a production build, use npm run build.

ブラウザで下記にアクセスする

http://localhost:3000/

Welcome to React!!

こんどつまづいたら本家のreadmeを読む

https://github.com/facebook/create-react-app
npxというコマンドがnpm 5.2以降で入ったようだ。
本家だとnpxをつかってcreate-react-appをしている。

JavaScript界隈は進歩が早すぎる・・・というか毎回カオスになっているイメージがつくが・・・すこしずつ勉強して簡単にSPA(Single Page Application)をつくってみようと思う。


参考資料

React入門 | とほほのWWW入門

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください