すべての項目1-Concurry、Andd CSS、Redux

📕Concurrently

複数のコマンドを同時に実行できるツール
クライアントを開くために端末の位置をクライアントに変えて開きます
サーバーをつけるために、また電源を入れる面倒があります.

npm install concurrently --save

インストール先をプロジェクトフォルダにダウンロード
クライアントフォルダにダウンロードしない
使い方はパッケージです.jsonファイルにscriptセクションに追加

"all": "concurrently \"npm start\" \"npm start --prefix client\"",

ルートフォルダのパッケージ.このようにjsonのスクリプト部分に追加します
前の名前は自分の欲しいものにすればいい
ファイルを保存すると、npm run名が2つ同時に開きます.

📘Antd CSS Framework

CSSで作成できますが、時間がかかります.
フレームワークを使用した機能の作成
CSSフレームワークには多くの種類があり、Ant Designを使用して作成しています.
クライアントフォルダにインストールする必要があります

npm install antd --save

インストールが完了すると、クライアントフォルダのインデックスが表示されます.jsファイルで
import 'antd/dist/antd.css'; 追加
Ant Designのサイトに行きました.そこにはすでに作成されたコードがあります.見てみましょう.

📗Redux

reduceはステータス管理ライブラリです
リデスの内容を説明しようと思ったのですが、絵を見て聞いていると、
私は理解できると思いますので、リンクを残します.
リデックスを使用するためにインストールする必要があるものがあります.

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

このように4種類のdependencyをダウンロードしましょう.
後ろの2つはミドルウェアです
reduceの過程でstoreはオブジェクトしか受信できません
ただし、プロセス、関数などを使用する必要がある場合があります.
中級ソフトウェアを2種類追加

きほんこうぞう

クライアントのインデックス.jsから、リドスを連絡しなければなりません.

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

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

もともとはcreateStoreを使用してショップを作成するだけでしたが、プロセスと機能も提供されています.
ミドルウェアとともに生成されたと考えられる
また、srcで作成したフォルダには、reduceというフォルダにindexがあります.jsファイル
次のコードを作成して挿入

import { combineReducers } from "redux";
//import user from './user_reducer';

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

export default rootReducer;

注釈処理の部分は、後で作成するファイルであるため、まだありません.
ショップは複数のReducerの状態を管理し、組合せReducerを使用する
二つを一つにする
次にリンクキーを押して入り、Reduxを使用できます.
これもダウンロードして
およびsrcフォルダのindex.jsセクションでreact domレンダリングセクションを次のように変更します.

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

これで基本構造の設定が終わります
今日は設定のみして、次の記事でreduceを作成します