React– category –

デフォルトでは、改行コード『 \n 』が改行されなかったので、解決した方法を共有します。 【styleを使用】 styleを指定して whiteSpace: 'pre-line' を設定します。 const text = 'あいうえお\nかきくけこ'; return ( <div style={{whiteSpace...

JavaScriptの日付操作用ライブラリmomentの利用方法です。Reactでの時間表示にも使用できます。 【install】 npmでのインストール方法 npm install moment --save yarnでのインストール方法 yarn add moment 【基本的な使い方】 日付の生成フォーマットを...

ページネーション。サイトで複数のページがあったら出てくるやつです。ReactPaginateを使えば簡単にできました。 こういうのを作っていきたいと思います。 1からでも表示出来るよう、create-react-appも叩きます。ReactPaginate がすぐ使いたければコード...

簡単なReact + Flask をExe化して動かしてみたいと思います。 コードの詳細が見たい方はこちらから見てください。Flask + React でHello World フォルダの階層はこんな感じです。 app ├── backend └── main.py └── frontend ├── node_modules ├── package....

Reactを使うと必ずというほど使う、setState。これをinputで入力を受け付けた時に値を保持するために使用します。入力された文字列をsetStaetで受け付けてあげましょう。 create-react-app コマンドを使用してReactを作ります。設定未だの方はこちらからご...

PythonのFlaskとJavaScriptのReactを使ってHello Worldを出力させたいと思います。そしてメッセージを送って、出力させるところまで一気にやります。簡単なサーバー側とフロント側での実装がこちらの記事でできるようになります。create-react-app コマン...

前回までにしたことでFirebaseにデータが登録出来ました。そのデータを表示させていきましょう。 【編集ファイル】 src/store/reducers/rootReducer.js reduxのstateとFirebaseのデータを同期します。 import projectReducer from './projectReducer'; imp...

前回までの新規作成が無事コンソールに表示されましたら、そちらの情報をFirebaseに登録してみたいと思います。 【編集ファイル名】 src/index.js Firebaseと繋ぐ設定をします。compose を使用してstoreにまとめます。 import React from 'react'; import ...

前回までのRedex管理まで出来たら、新規作成を作っていきたいと思います。 【編集ファイル名】 src/index.js thunkはstoreのdispatchメソッドを受け取り、Actionオブジェクトの代わりに渡された非同期関数処理が完了した後に、通常の同期処理をディスパッ...

前回で表示まではできたと思いますので、このデータをReduxで管理して、表示させたいと思います。 【編集ファイル名】 src/store/reducers/projectReducer.js まずはアクションに従って、状態を更新するReducerを作成します。今回はデモデータを持たせて、...

前回で前準備をしました。 まずはローカルで動くよう作っていきたいと思います。※classNameはMaterializedを使用するための名前です。 【編集ファイル名】 src/components/layout/Navbar.js 共通のレイアウトのナビゲーションバーを作成します。 import Re...

今回使用する技術・React・Redux・FirebaseFirebaseの設定とReactプロジェクトの作成をしていきます。 Firabaseにてプロジェクトの作成 プロジェクトの作成方法は以下を参考にしてください。https://kazunaka.com/firebase-react-loginapp-1/プロジェクト...

前回記事の続編ということになります。まだみていないという方はどうぞ。 https://kazunaka.com/react-chat-app/ 独り言を呟いても更新をかけてしまうと、今までボヤいていたことが消えてしまいます。それでもいいならそのままでもOKですが、せっかくなの...

下記のようなチャット風アプリを作成したいと思います。 プロジェクト名は任せます。本記事では「chat-app」としています。 下記にてHellowWorldまで出力してください。できる人はそのまま進んでください。 https://kazunaka.com/react-helloworld/ Hellow...

①Firebaseの設定②Reactプロジェクト作成③認証のためのユーザ登録の実装④認証(ログイン・ログアウト)＆ユーザ削除 ← 今ここ前回の③認証のためのユーザ登録の実装からの続きをしていきます。ユーザが登録できたと思うので、いよいよログインの実装をし...

①Firebaseの設定②Reactプロジェクト作成③認証のためのユーザ登録の実装 ← 今ここ④認証(ログイン・ログアウト)＆ユーザ削除前回の②Reactプロジェクト作成からの続きをしていきます。認証に必要なユーザの登録のための実装をしていきます。 ファイルを...

①Firebaseの設定②Reactプロジェクト作成 ← 今ここ③認証のためのユーザ登録の実装④認証(ログイン・ログアウト)＆ユーザ削除前回の①Firebaseの設定からの続きをしていきたいと思います。こちらではReactのプロジェクトの作成＆前準備をしていきます。 React...

FirebaseとReactを使って簡単な認証機能を作っていきたいと思います。Firebase初心者やReact初心者向きの記事になります。①〜④のような流れで行っていきたいと思います。 ①Firebaseの設定 ← 今ここ②Reactプロジェクト作成③認証のためのユーザ登録の実装④認...

機能的にはメモは完成しましたが、このメモにはまだ致命的な弱点があります。ブラウザを更新したら追加したメモを「忘れる」ということです。余裕のある方は+αで「メモを忘れない」機能を追加しましょう。下記の記事からの続きになります。https://kazunak...

【プロジェクトの作成】 コマンドでプロジェクトを作成しましょう。ディレクトリを移動して、以下を実行してプロジェクトを作成します。 create-react-app calculator 「Success!」が表示されたらプロジェクトができていると思うので、コマンド操作で作成...