- 2020.06.18
reactでチャット風独り言アプリ-2
前回記事の続編ということになります。まだみていないという方はどうぞ。 独り言を呟いても更新をかけてしまうと、今までボヤいていたことが消えてしまいます。それでもいいならそのままでもOKですが、せっかくなので、更新をかけても消えないように、データベースにボヤいたことを覚えててもらいましょう。 今回はFireBaseを使います。無料で使えますので、こちらより、プロジェクトを立ち上げ、apikey、aut […]
JavaScript
- 2020.06.15
reactでチャット風独り言アプリ-1
下記のようなチャット風アプリを作成したいと思います。 プロジェクト名は任せます。本記事では「chat-app」としています。 下記にてHellowWorldまで出力してください。できる人はそのまま進んでください。 HellowWorldまで表示できましたら、早速作っていきましょう！！ TweetIndex.jsの編集 でsrc直下にファイルを作成します。下記書いていきましょう。 App.jsの編集 […]
- 2020.06.10
Firebase + Reactでログイン④認証の実装
①Firebaseの設定②Reactプロジェクト作成③認証のためのユーザ登録の実装④認証(ログイン・ログアウト)＆ユーザ削除 ← 今ここ 前回の③認証のためのユーザ登録の実装からの続きをしていきます。ユーザが登録できたと思うので、いよいよログインの実装をしていきます。 ファイルを編集 src/auth/AuthProvider.js ２個所追加場所があります。コメントにて記入してあります […]
- 2020.06.10
Firebase + Reactでログイン③ユーザの登録
①Firebaseの設定②Reactプロジェクト作成③認証のためのユーザ登録の実装 ← 今ここ④認証(ログイン・ログアウト)＆ユーザ削除 前回の②Reactプロジェクト作成からの続きをしていきます。 認証に必要なユーザの登録のための実装をしていきます。 ファイルを編集 src/auth/AuthProvider.js src/auth/SignUp.jsx src/App.js アプリを […]
- 2020.06.10
Firebase + Reactでログイン②Reactプロジェクト作成
①Firebaseの設定②Reactプロジェクト作成 ← 今ここ③認証のためのユーザ登録の実装④認証(ログイン・ログアウト)＆ユーザ削除 前回の①Firebaseの設定からの続きをしていきたいと思います。 こちらではReactのプロジェクトの作成＆前準備をしていきます。 Reactプロジェクト作成 コマンド(ターミナル)での操作をしていきます。 任意のディレクトリに移動して、プロジェクトを作成しま […]
- 2020.06.10
Firebase + Reactでログイン①Firebaseの設定
FirebaseとReactを使って簡単な認証機能を作っていきたいと思います。 Firebase初心者やReact初心者向きの記事になります。①〜④のような流れで行っていきたいと思います。 ①Firebaseの設定 ← 今ここ②Reactプロジェクト作成③認証のためのユーザ登録の実装④認証(ログイン・ログアウト)＆ユーザ削除 それではやっていきましょう！ Firebaseでプロジェクトを作成 Fi […]
- 2020.06.07
React + Reduxでメモアプリを作成(情報保持⑧)
機能的にはメモは完成しましたが、このメモにはまだ致命的な弱点があります。ブラウザを更新したら追加したメモを「忘れる」ということです。余裕のある方は+αで「メモを忘れない」機能を追加しましょう。下記の記事からの続きになります。https://kazunaka.com/react-redux-memoapp-seven/ 「redux-persist」というのを使用します。簡単に説明すると、redux […]
- 2020.06.06
React + Reduxで電卓アプリを作成
プロジェクトの作成 コマンドでプロジェクトを作成しましょう。ディレクトリを移動して、以下を実行してプロジェクトを作成します。 「Success!」が表示されたらプロジェクトができていると思うので、コマンド操作で作成したプロジェクトへ移動しましょう。 パッケージを使用するためのコマンドをたたきます。※ない場合はnpmにてインストールしてください。 ファイル構成 src以下のようなファイル構成になりま […]
- 2020.06.05
React + Reduxでメモアプリを作成
React + Reduxを使ってメモアプリを作成していきます。 前準備・表示・新規作成・一覧表示・一件取得・一件更新・一件削除・情報保持・完成版という順でやっていきます。 部分部分でコードを書いてありますが、分からなくなったら完成版を見てもらえればと思います。 では、前準備からやっていきましょう。 前準備 表示 新規作成 一覧表示 一件取得 一件更新 一件削除 情報保持 完成版
- 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を編集 […]