React
fullcalendar reactでfullcalendarを利用してみたが、カレンダー上でイベントを追加できるようにするには４８０ドルを支払わないといけないので見送る。 fullcalendar.io パッケージインストール npm install --save @fullcalendar/react @fullcalendar/dayg…
はじめに 前回、Redux Tool Kitでstoreを作成したので、作成したstoreを利用したコンポーネントを作成してみる コード app/features/task/TaskItem.jsというコンポーネントを作成する。このコンポーネントは１つのタスクを表示及び削除する/完了ステータスを…
はじめに 前回、ReduxToolkitの件を簡単に調べてので今度は実際に実装してみる px-wing.hatenablog.com コード app/features/task/taskSlice.jsファイルを作成する import { createSlice } from '@reduxjs/toolkit'; export const taskSlice = createSlice({…
はじめに Redux Toolkitを調べてみる。 インストール 下記のようにインストールすると、Redux Toolkitをインストールすることができる。 npx create-react-app my-app --template redux-typescript Redux DevToolsインストール Reduxを開発する際はRedux Dev…
はじめに 前回、TypescriptでReactコンポーネントを作成したので試しにグラフのコンポーネントを作成する 利用するライブラリ 下記のreact-chartjs-2を使ってみる github.com インストール 下記のコマンドを実行する yarn add react-chartjs-2 chart.js 折れ…
はじめに 前回発生したエラーを解消できたので、今回はTypeScriptでfunctional componentを作成してみる。 px-wing.hatenablog.com コード App.tsx 下記コードでTypeScriptを利用している箇所はReact.FCの部分のみです。 React.FC はReact.FunctionComponent…
はじめに 久しぶりにReactを触ろうとした時に、yarn startの時にエラーが発生したので、そのエラーの対処方法をまとめる reactのプロジェクトの作成 下記の手順でプロジェクトを作成して # npx create-react-app <my_app> --template typescript # cd <my_app> # yarn start </my_app></my_app>…
はじめに 前回までgraphqlの調査していたので、今回から実際に実装してみる Apollo clientを利用してみる Apollo Clientのインストール yarn add apollo-boost graphql react-apollo apollo-boostはもう廃止らしい Apollo Client 3.0が同様に簡単なセットア…
はじめに 前回、Ｃａｎｖａｓに絵を書くコンポーネントを作成したので、その延長でカラーパレットで線の色を変えてお絵描きできるコンポーネントを作成する お絵描きした絵はＪｐｅｇでダウンロードできるようにする インストール npm install react-color -…
はじめに ReactでCanvasに絵を書くコンポーネントを作成してみました。 サンプルコード import React,{useEffect} from 'react' const Canvas = () =>{ let canvas, ctx, drawFlag = false, prevX = 0, currX = 0, prevY = 0, currY = 0, dotFlag = false; /…
はじめに -ReactからPDFを出力できないか調査したところ、Reactから出力できるパッケージをみつけたので、試しに使ってみる stackoverflow.com テキストや画像は利用できるが、表形式のコンポーネントがないため、CSSを駆使したサンプルが提供されていた。 r…
はじめに 久しぶりにバーコード読み込み機能を動作させたらエラーが何件が発生した px-wing.hatenablog.com １件目は下記のエラー index.js:1 Warning: validateDOMNesting(...): <tr> cannot appear as a child of <table>. Add a <tbody>, <thead> or <tfoot> to your code to match the DO</tfoot></thead></tbody></table></tr>…
はじめに 駅JPのデータを利用して駅検索機能を作成する バックエンド側でMySQLに登録されている駅JPのデータをjsonで返す フロント側でバックエンド側のURLへアクセスしてjson形式でデータを取得してreact-selectで実装する 過去の記事をベースに実装 px-win…
はじめに 前回、駅JPの情報をbackend側でjson形式で返す処理を実装したので、そのJSONをフロント側で取得する 取得したデータをプルダウンで表示できるようにする react-selectパッケージを利用する 過去の記事 px-wing.hatenablog.com px-wing.hatenablog.c…
はじめに Reactでブラウザの音声認識機能を実装してみる。 Web Speech API Speech Recognitionを利用する。Chromeにしか対応していない。またiOSのChromeには対応していない 機種判定やOS判定が必要のため、前回調べた下記のパッケージを利用する px-wing.ha…
はじめに 前回にRust環境をつくるためにDockerfileでRust/Rocketをインストールして動かした自動で環境構築できる状態ではなかった。 今回はDocker Composeを利用してコマンド数回で環境構築できる環境を構築する 前回の記事 DockerでRustのRocketフレームワ…
はじめに SpeechRecognition を利用したいと思ったらChromeでしか動作しないため、ブラウザ判定したいとおもいpackageを探してみた。 developer.mozilla.org ua-parserというものがあり、こちらを利用すると機種判定およびブラウザ判定が容易にできそうなの…
はじめに 以前、フロント側でバーコードスキャンを実装したので、読み込んだ時にYahooAPIを利用してバーコード検索して読み込んだ結果を表示する px-wing.hatenablog.com 実装内容 Backend側はexpressを利用してAPIをコールして結果をフロントに返す スキャ…
はじめに Redux7.1からHooksのAPIがつかる https://react-redux.js.org/api/hooks useDispatch Reduxストアからディスパッチ関数への参照を返します。必要に応じて、アクションをディスパッチするために使用できます。 import React from 'react' import { u…
はじめに ReactからQuaggajsライブラリを利用してバーコードをスキャンする serratus.github.io サンプルコード import React , { useState,useEffect } from 'react' import Quagga from "quagga"; const Scan = (props) => { const [barcode,setBarcode] =…
はじめに 会員登録機能でユーザーに誕生日を登録して持ったので、誕生日までのカウントダウンコンポーネントを作成しようと思いましたが、 指定の時間を入力して、入力した時間のカウントダウンのコンポーネントを作成することにしました。 時間の操作はmome…
はじめに 前回ログイン画面を作成したので、今度はログイン画面の実装をする px-wing.hatenablog.com px-wing.hatenablog.com Reactでログイン画面を実装する -front側 import React,{useState, useContext } from 'react' import { BrowserRouter as Router…
はじめに 下記のサンプルのようにログイン済みのユーザーのみ閲覧できるページを実装したかった。 reacttraining.com 理想は下記のように実装したかった。 import React from "react"; import { BrowserRouter as Router, Switch, Route, Link, Redirect, us…
はじめに デザインが全くできないエンジニアとしては、少しでもデザインをよくするために無料のアイコンなどでUIをほんの少しだけよくしたい。 下記の無料枠で利用できるアイコンを画面に表示させる https://iconscout.com/ 利用するパッケージのインストー…
はじめに ReactHooksでBMI計算で1日ごとの結果を一覧で表示する（redux/useContext使用）を作成したので、そのデータをグラフで表示してみる。 下記のサンプルは下記の過去記事を続きの実装となります。 利用したパッケージは下記の２つとなります。 yarn ad…
はじめに 前回、BMIの計算フォームを作成しましたが、日付事に結果を残すものにバージョンアップする px-wing.hatenablog.com 同じ日付を入力したら、以前のデータを上書きする reduxも利用してデータの持ち回りをする。日付事に一覧を表示させる 登録したデ…
はじめに Reactを触り始めたので何度か復讐のために同じようなフォームを何度も作ってみることを目的としています。 ※前回は会員登録フォームを作成したので今回はBMI計算 px-wing.hatenablog.com 今回はBMIの計算だけですが、この情報をローカルストレージ…
はじめに 前回の記事で登録フォームの未入力チェックしか実装できなかったので、今回は半角チェックや文字数チェックおよびエラーメッセージの調整、独自の入力チェックを追加するなど実装しました。 px-wing.hatenablog.com コード import React from 'reac…
はじめに 前回の記事でreactから強引にgoogle mapを表示する方法を調べました。 こちらの記事では表示位置が画面下になっていたので、コンポーネント化して表示位置を調整したい 現在地を取得してgoogle mapに現在地のマーカーを表示したい サンプルコード …
はじめに 前回の記事でdocker にNginxをインストールしてSSLの環境を構築しました。 px-wing.hatenablog.com 理由は位置情報を取得して現在地にマーカーを表示したいと考えておりました。 実装 自分の実装方法が正しいとは思いませんが、もっと良い方法があ…
