- 2021.02.12
Reactで改行コード\nを改行させる方法
デフォルトでは、改行コード『 \n 』が改行されなかったので、解決した方法を共有します。 styleを使用 styleを指定して whiteSpace: ‘pre-line’ を設定します。 表示結果 あいうえおかきくけこ 無事改行されました。 splitでの使用方法。<div>バージョン 改行\nが一個のパターン 改行コード\nで文字列を分割することで改行を表 […]
React
1/2ページ
- 2021.01.28
Reactで時間を表示。momentで日付操作
JavaScriptの日付操作用ライブラリmomentの利用方法です。Reactでの時間表示にも使用できます。 install npmでのインストール方法 yarnでのインストール方法 基本的な使い方 日付の生成 フォーマットを使ってみる 文字列を日付に変更 Dateを日付に変更 加算(足し算) 日付の足し算です。‘years’ の部分は省略も可能です。減算のところは省略系 […]
- 2020.12.28
ReactPaginateを使ってページ移動
ページネーション。サイトで複数のページがあったら出てくるやつです。 ReactPaginateを使えば簡単にできました。 こういうのを作っていきたいと思います。 1からでも表示出来るよう、create-react-appも叩きます。ReactPaginate がすぐ使いたければコードの方へ飛んでください。 create-react-app 適当な場所にappフォルダを作成してcreate-reac […]
- 2020.12.26
React + Flask をExe化して動かしてみる
簡単なReact + Flask をExe化して動かしてみたいと思います。 コードの詳細が見たい方はこちらから見てください。Flask + React でHello World フォルダの階層はこんな感じです。 FrontendのReact側 こちらはjsファイルをbuildして、できたファイルをbackend側に埋め込んでいきます。 ターミナル操作でapp/frontend/src下に移動しまし […]
- 2020.12.13
Reactのinput入力をswitch文とsetStateを使い合わせて値を変更する
Reactを使うと必ずというほど使う、setState。これをinputで入力を受け付けた時に値を保持するために使用します。 入力された文字列をsetStaetで受け付けてあげましょう。 create-react-app コマンドを使用してReactを作ります。設定未だの方はこちらからご覧ください。 ファイル構成の確認とやることの確認 まずは今回作成するファイル階層を確認します。コマンドにて $ […]
- 2020.11.14
Flask + React でHello World
PythonのFlaskとJavaScriptのReactを使ってHello Worldを出力させたいと思います。そしてメッセージを送って、出力させるところまで一気にやります。 簡単なサーバー側とフロント側での実装がこちらの記事でできるようになります。 create-react-app コマンドを使用してReactを作ります。設定未だの方はこちらからご覧ください。 まずは今回作成するファイル階層を […]
- 2020.06.28
React-Redex-Firebase掲示板の作成-6(Firebaseからデータ取得をして表示)
前回までにしたことでFirebaseにデータが登録出来ました。そのデータを表示させていきましょう。 編集ファイル src/store/reducers/rootReducer.js reduxのstateとFirebaseのデータを同期します。 src/components/dashboard/Dashboard.js firestoreのデータを表示するよう編集します。 src/componen […]
- 2020.06.28
React-Redex-Firebase掲示板の作成-5(Firebaseに登録)
前回までの新規作成が無事コンソールに表示されましたら、そちらの情報をFirebaseに登録してみたいと思います。 編集ファイル名 src/index.js Firebaseと繋ぐ設定をします。compose を使用してstoreにまとめます。 src/store/action/index.js 新規作成エラーの為の定数を追加します。 src/store/action/projectActions. […]
- 2020.06.23
React-Redex-Firebase掲示板の作成-4(ローカル新規作成)
前回までのRedex管理まで出来たら、新規作成を作っていきたいと思います。 編集ファイル名 src/index.js thunkはstoreのdispatchメソッドを受け取り、Actionオブジェクトの代わりに渡された非同期関数処理が完了した後に、通常の同期処理をディスパッチするために利用します。 src/store/actions/index.js 新規作成のための定数宣言。 src/stor […]
- 2020.06.21
掲示板アプリの作成-3(Redux・Reducer 一覧表示)
前回で表示まではできたと思いますので、このデータをReduxで管理して、表示させたいと思います。 編集ファイル名 src/store/reducers/projectReducer.js まずはアクションに従って、状態を更新するReducerを作成します。今回はデモデータを持たせて、このデータを一覧に表示させたいと思います。 src/store/reducers/rootReducer.js Re […]
- 2020.06.21
掲示板アプリの作成-２(ローカル 一覧表示)
前回で前準備をしました。 まずはローカルで動くよう作っていきたいと思います。※classNameはMaterializedを使用するための名前です。 編集ファイル名 src/components/layout/Navbar.js 共通のレイアウトのナビゲーションバーを作成します。 src/App.js こちらをsrc/App.jsから呼び出してあげます。 yarn startのコマンドで動いている […]
- 2020.06.21
掲示板アプリの作成-１(下準備)
今回使用する技術・React・Redux・Firebase Firebaseの設定とReactプロジェクトの作成をしていきます。 Firabaseにてプロジェクトの作成 プロジェクトの作成方法は以下を参考にしてください。https://kazunaka.com/firebase-react-loginapp-1/ プロジェクトの名前を「bulletin-board」とします。アプリの名前を「bul […]
- 2020.06.18
reactでチャット風独り言アプリ-2
前回記事の続編ということになります。まだみていないという方はどうぞ。 独り言を呟いても更新をかけてしまうと、今までボヤいていたことが消えてしまいます。それでもいいならそのままでもOKですが、せっかくなので、更新をかけても消えないように、データベースにボヤいたことを覚えててもらいましょう。 今回はFireBaseを使います。無料で使えますので、こちらより、プロジェクトを立ち上げ、apikey、aut […]
- 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以下のようなファイル構成になりま […]