[react&NodeJS]学習#4

日付:21.06.23
参考講義

[React.js]

1. Proxy Server

ロール
1)ファイアウォール機能
2)Webフィルタ機能
3)キャッシュデータ、共有データ

を提供する.

2. Concurrently

使用理由:フロントエンドサーバとバックエンドサーバを一度に開きます.

Concurrent取付

npm install concurrently --save

[package.json]scriptの

に追加

"dev": "concurrently \"npm run backend\" \"npm run start --prefix client\""

3. CSS Framework

And UI

を使用

npm install antd --save

[client]-[index.js]のimport

import 'antd/dist/antd.css';

4. Redux

なぜReduxを使うのか(Stateで使う)
->STORE階層化なしで直接アクセス可能

Redux取付

npm install redux react-redux redux-promise redux-thunk --save

[client]-[src]-[reducers]-[index.js]生成

import { combineReducers } from "redux";
// import user from './user_reducer';
// 나중에 사용될 함수이므로 미리 입력해놓기

const rootReducer = combineReducers({
    //user,
})

export default rootReducer;

Chrome拡張プログラムからredux devツールをダウンロード

[クライアント]-[src]-[index.js]の変更

import { Provider } from 'react-redux';
import { applyMiddleware, createStore } from 'redux';
import promiseMiddleware from 'redux-promise';
import ReduxThunk from 'redux-thunk';
import Reducer from './_reducers';

const createStoreWithMiddleware = applyMiddleware(promiseMiddleware, ReduxThunk)(createStore)

ReactDOM.render(
  <Provider
    store={createStoreWithMiddleware(Reducer,
      // for redux devtools
      window.__REDUX_DEVTOOLS_EXTENSION__ &&
      window.__REDUX_DEVTOOLS_EXTENSION__()
    )}
  >
    <App />
  </Provider>,
  document.getElementById('root')
);

Full Code

Walang Github

Walang Notion