yucatio@システムエンジニア

趣味で作ったものいろいろ

React + Reduxプロジェクトの準備 (STEP 1 : 誰でも読み込み・書き込みできるタスク管理アプリを作る - React + Redux + Firebase チュートリアル)

★前回の記事

yucatio.hatenablog.com

今回のチュートリアルでは、Reduxの公式ページのサンプルコードを使用するので、準備をします。

React + Reduxプロジェクトの作成

React + Reduxのプロジェクトの作成をします。

create-react-appを使用してReactアプリの雛形を作った後、reduxとreact-reduxモジュールをインストールします。Redux公式に記載されている、Reactと併用するサンプル(https://redux.js.org/basics/exampletodolist)をコピペしてください。

# "todo-sample"というディレクトリにReactの雛形を作成する
$ yarn create react-app todo-sample
$ cd todo-sample

# redux と tract-redux をインストールする
$ yarn add redux react-redux
# サーバを起動する
$ yarn start
# http://localhost:3000/ でサーバが立ち上がる

# サンプルコードを書き写す

コードの一覧はこのようになります → Initial commit · yucatio/todo-sample@dcef604 · GitHub

http://localhost:3000/ にアクセスしてアプリが完成したか見てみましょう。

f:id:yucatio:20180923233920p:plain

できました!

★次回の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com