create-react-app を触ってみる。

5173 ワード
Materialize React JavaScript jQuery material-ui JavaScript テキストリンク

手順

Node がなければインストール

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

npm install create-react-app -g

アプリの作成

create-react-app <フォルダ名>

こんなフォルダ構成になる


.
├── node_modules
│   :
│   : 略
│
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── README.md
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    └── logo.svg

動かしてみる

cd <フォルダ名>
npm start

確認してみる

ブラウザで localhost:3000

仕組み

npm start

をシェルから実行して、localhost:3000 にアクセスすると、ブラウザには

public/index.html

の内容に

<script type="text/javascript" src="/static/js/bundle.js">

がインサートされたものが返される。このインサートされたもの（bundle）が react-app 全体を Webpack でまとめたやつ。

またこの中で

19     <div id="root"></div>

が定義されていて、ここが render されるターゲットとなる。

アプリのメイン？は

src/index.js

自動で生成されてる内容は

1 import React from 'react';
2 import ReactDOM from 'react-dom';
3 import App from './App';
4 import './index.css';
5 
6 ReactDOM.render(
7   <App />,
8   document.getElementById('root')
9 );

3 行目で

src/App.js

を読み込んで生成された Component を 6-9 行目で

public/index.html

の

<div id="root"></div>

にインサートしているようだ。

proxy

package.json に以下のように proxy を設定して

"proxy": "http://localhost:1234",

App.js などで

fetch( '/api/sample' )

とやると

http://localhost:1234/api/sample

にアクセスできる。

サードパーティーのコンポーネントを使う

Material-ui を使う

npm install material-ui --save
  • タップとかに反応するものを作る場合は（今の所とりあえず）、react-tap-event-pluginが必要。
npm install react-tap-event-plugin --save

してソースで

import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

コンポーネントじゃないのを使う

生 DOM は触らない方がよさそう。
火急の場合とかのために。

jQuery を使う

cd <フォルダ名>
npm install jquery --save

して、

import $ from 'jquery';

Materialize を使う

cd <フォルダ名>
npm install materialize-css --save

して、

import 'materialize-css';
import 'materialize-css/dist/css/materialize.min.css';