- 2020.06.05
React + Reduxでメモアプリを作成
React + Reduxを使ってメモアプリを作成していきます。 前準備・表示・新規作成・一覧表示・一件取得・一件更新・一件削除・情報保持・完成版という順でやっていきます。 部分部分でコードを書いてありますが、分からなくなったら完成版を見てもらえればと思います。 では、前準備からやっていきましょう。 前準備 表示 新規作成 一覧表示 一件取得 一件更新 一件削除 情報保持 完成版
React
2/2ページ
- 2020.06.05
React + Reduxでメモアプリを作成(完成版)
メモアプリ完成版ということで、全部のコードを載せておきたいと思います。 動かない場合や参考になれば幸いです。 *ディレクトリ「src」以下のファイルの編集になります。 ファイル名 action/index.js reducers/index.js reducers/memo.js index.js components/memoIndex.js conponents/memoShow.js com […]
- 2020.06.05
React + Reduxでメモアプリを作成(一件削除⑦)
一件更新⑥からの続きをしていきます。https://kazunaka.com/react-redux-memoapp-six/ 一件の削除ができるところまでいきます。(デザインはないです。) ファイルを編集 ＊コードの重複部分もありますが、どこに記載していいかを分かりやすくしたくて重複部分を書いているので、全部コピペでは完成はできないです。ご注意ください。 ディレクトリ「src」以下のファイルを編 […]
- 2020.06.05
React + Reduxでメモアプリを作成(一件更新⑥)
一件取得⑤からの続きをしていきます。https://kazunaka.com/react-redux-memoapp-five/ 一件の更新ができるところまでいきます。 ファイルを編集 ディレクトリ「src」以下のファイルを編集していきます。 ＊コードの重複部分もありますが、どこに記載していいかを分かりやすくしたくて重複部分を書いているので、全部コピペでは完成はできないです。ご注意ください。 ac […]
- 2020.06.05
React + Reduxでメモアプリを作成(一件取得⑤)
新規作成④からの続きをしていきます。https://kazunaka.com/react-redux-memoapp-four/ 一件の取得ができるところまでいきたいと思います。 ファイルを編集 ディレクトリ「src」以下のファイルを編集していきます。 ＊コードの重複部分もありますが、どこに記載していいかを分かりやすくしたくて重複部分を書いているので、全部コピペでは完成はできないです。ご注意くださ […]
- 2020.06.05
React + Reduxでメモアプリを作成(一覧表示④)
新規作成③からの続きをしていきたいと思います。https://kazunaka.com/react-redux-memoapp-three/ 一覧が表示できるとこまでやっていきたいと思います。 ファイルを編集 ディレクトリ「src」以下のファイルを編集していきます。 ＊コードの重複部分もありますが、どこに記載していいかを分かりやすくしたくて重複部分を書いているので、全部コピペでは完成はできないです […]
- 2020.06.05
React + Reduxでメモアプリを作成(新規作成③)
表示②からの続きをしていきたいと思います。https://kazunaka.com/react-redux-memoapp-two/ ファイルを編集 ディレクトリ「src」以下のファイルを編集していきます。 ＊コードの重複部分もありますが、どこに記載していいかを分かりやすくしたくて重複部分を書いているので、全部コピペでは完成はできないです。ご注意ください。 actions/index.jsを編集し […]
- 2020.06.05
React + Reduxでメモアプリを作成(表示②)
準備①からの続きをしていきたいと思います。https://kazunaka.com/react-redux-memoapp-one/ ファイルを編集 ディレクトリ「src」以下のファイルを編集していきます。 actions/index.jsを編集していきます。メモのアクションを書いていきます。まずは表示ができるようになるとこまでいきたいと思います。 続いて、reducers/index.jsを編集 […]
- 2020.06.05
React + Reduxでメモアプリを作成(準備①)
reactの環境設定がまだな方はこちらからお願いします。https://kazunaka.com/react-helloworld/ メモアプリの全体の流れが知りたい方はこちらを見てください。https://kazunaka.com/react-redux-memoapp-zero/ 前準備 インストール未の方はこちらをインストールしましょう。 プロジェクトの作成 コマンドでディレクトリを移動して […]
- 2020.06.01
Reduxとは？
前回の記事でカウントアプリを Reactバージョンとhttps://kazunaka.com/react-count-app/ React + Reduxバージョンhttps://kazunaka.com/react-redux-count-app/ を作成しました。 どちらも同じ動きをしますが、Reduxの方がごちゃごちゃして分かりづらいかと思います。 何故Reduxを使うのか？ ということで、 […]
- 2020.05.31
React + Reduxでカウントアプリ
reactの環境設定がまだな方はこちらからお願いします。https://kazunaka.com/react-helloworld/ 前準備 今回「redux, react-redux」を使うので、インストール未の方は以下を実行してください。分からない方はとりあえずinstallを実行してもらって問題ないと思います。 プロジェクトの作成 コマンドでディレクトリを移動して、プロジェクトを作成しましょ […]
- 2020.05.31
reactでカウントアプリを作ってみよう
reactの環境設定がまだな方はこちらからお願いします。https://kazunaka.com/react-helloworld/ プロジェクトの作成 コマンドでcreate-react-appを実行して、プロジェクトを作成していきます。 「Success!」が表示されたらプロジェクトができていると思いますので、作成したプロジェクトへ移動します。 カウントアプリの実装 src/App.jsを編集 […]
- 2020.05.30
React環境設定をしてHelloWorldを表示しよう
面倒な環境設定。 既にインストール済みの場合もあると思います。バージョンの確認をしてインストール済みかどうかを確認してください。 Node.jsのインストール 下記のURLをクリックします。https://nodejs.org/ja/LTS版をダウンロード インストールが完了したら、ターミナルにコマンドを入力して、無事にインストールをしているかを確認します。 無事バージョンが表示されていればOKで […]