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/
コメント