React + Reduxでメモアプリを作成(準備①)

NO IMAGE

reactの環境設定がまだな方はこちらからお願いします。
https://kazunaka.com/react-helloworld/

メモアプリの全体の流れが知りたい方はこちらを見てください。
https://kazunaka.com/react-redux-memoapp-zero/

前準備

インストール未の方はこちらをインストールしましょう。

npm install --save redux
npm install --save react-redux
npm install --save lodash
npm install --save react-router-dom
npm install --save redux-form
npm install --save uuid
npm install --save redux-persist

プロジェクトの作成

コマンドでディレクトリを移動して、プロジェクトを作成しましょう。

$ create-react-app memo

Success!」が表示されたらプロジェクトができていると思いますので、
作成したプロジェクトへ移動します。

$ cd !$

パッケージを使用するためのコマンドをたたきます。

$ yarn add lodash react-redux react-router-dom redux redux-form uuid redux-persist

ファイル構成の作成

以下のようなファイル構成になります。

src
├── actions
    └── index.js
├── components
    └── memoIndex.js
    └── memoNew.js
    └── memoShow.js
├── reducers
    ├── index.js
    └── memo.js  
├── index.js
├── configStore.js  
└── reportWebVitals.js 

このファイル構成をコマンドで作成していきましょう。

$ cd src
$ mkdir actions components reducers
$ touch actions/index.js
$ touch components/memoIndex.js
$ touch components/memoNew.js
$ touch components/memoShow.js
$ touch reducers/index.js
$ touch reducers/memo.js
$ touch configStore.js
$ cd ../

これで準備は終了です。
次は表示させるところまでいきたいと思います。
https://kazunaka.com/react-redux-memoapp-two/

JavaScriptカテゴリの最新記事