절차

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 );

세 번째 줄에서

src/App.js

를 읽어 생성된 Component 를 6-9 행으로

public/index.html

의

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

에 삽입하는 것 같다.

프록시

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';