11月21日の学び（React）

Reactを実行した。やはり手を動かさないとわかったという資格はない。
全てコマンドを打つだけで実行できるところに感激した。
「reacのアプリ」と「公開するwebページ」の差分がいまいち見えない。前者は後者の一部にすぎないのでは？？？

npmをインストール

省略

create-react-appをインストール

$ npm install -g create-react-app

アプリケーションの作成

以下のコマンド実行後3000番にアクセスするとアプリが動いている

$ create-react-app react_test
$ cd react_test
$ npm start

Compiled successfully!

You can now view react_test in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://10.0.1.3:3000/

Note that the development build is not optimized.
To create a production build, use npm run build.

ディレクトリ構成

ディレクトリ構成も自動で作成される

$ ls
README.md         package-lock.json public
node_modules      package.json      src

パッケージ化

$ npm run build

> react_test@0.1.0 build **********/react_test
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  34.45 KB  build/static/js/1.2dd891c4.chunk.js
  763 B     build/static/js/runtime~main.229c360f.js
  711 B     build/static/js/main.dfde7675.chunk.js
  512 B     build/static/css/main.3335127e.chunk.css

The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:

  "homepage" : "http://myname.github.io/myapp",

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

Find out more about deployment here:

  http://bit.ly/CRA-deploy

$ ls
README.md         node_modules      package.json      src
build             package-lock.json public
pidepide-no-MacBook-Air:react_test pide$ ls build/
asset-manifest.json
favicon.ico
index.html
manifest.json
precache-manifest.a902ec76247e158cc6af7751031476f5.js
service-worker.js
static

生成されたbuildディレクトリ内のindex.htmlは人が読める形式ではない。

$ less index.html
<!doctype html><html lang="en"><head><meta charset="utf-8"><link rel="shortcut icon" href="/favicon.ico"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/manifest.json"><title>React App</title><link href="/static/css/main.3335127e.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(l){function e(e){for(var r,t,n=e[0],o=e[1],u=e[2],f=0,i=[];f<n.leng

React 版の Hello, world! - React 入門

次回予告？

次はこのあたりかも qiita.com