React
まず、以下が完成品です https://matsudasan.github.io/Trello/使ったライブラリはreact-beautiful-dndです。 https://github.com/atlassian/react-beautiful-dnd最初はreact-dndを使っていたんですが、react-beautiful-dndのサンプルにTrelloに似ているもの…
エディタを作るにあたりreact-aceを使いました。 https://github.com/securingsincity/react-ace完成品 https://matsudasan.github.io/HTMLEditor/本当はリサイズ可能にしたかったんですが、やり方がわかりませんでした。 次は、paiza.ioのようなオンライン…
最近はAtCoderの問題ばかり解いていたので、わすれないように今回はReactでアプリを作ってみました 以下のURLがそのアプリです https://matsudasan.github.io/Folder-Tree/ ただ、バグが1個あって、ツリーの最後がフォルダだと中途半端に縦線が伸びちょうん…
公式サイト https://react-hook-form.com/jp/完成したフォーム コピペOKです。 今回はrect-hooks-formとmaterial-ulを使っています インストールコマンド npm install react-hook-form npm install @material-ui/core npm install @material-ui/icons npm in…
Reactの状態管理ライブラリのRecoilを使っている時にバグに遭遇したので記録として、同じ状況の人がいたら参考にしていただけたら幸いです。バグの内容はRecoilをHMR環境で使うと Duplicate atom key "UserStatus". This is a FATAL ERROR in production. Bu…
練習代わりにTwitter風にルーティングをしてみました。 思ったよりコンポーネントの数が多く、その分名前を決めるのも大変で、所々変な所もありますが、ひとまず完成です。なぜか、bodyのmarginが消えなかったので、デベロッパーツールで各自消してください。
使うファイル index.js App.js Item.js公式サイト https://react-dnd.github.io/react-dnd/about参考動画 https://www.youtube.com/watch?v=aK2PD_REk7A&list=PLmiHocWADqPGYeEqgwl5w9BKCi5ju3_Xj&index=10&t=1s まずはインストールから npm install react-d…
最近、HTML5から追加されたレンジ入力というものを発見したので簡単に使い方をまとめておきます。 <input type="range" min ="10"max="50" step="1"> inputのタイプをrangeに変更するだけです。 基本のプロパティはmin,max,stepの３つ覚えておけば大丈夫です。min :最低値 max :最大値 step :刻むステップ値…
使うファイル index.tsx App.tsx TreeView.tsx index.tsx App.tsx TreeView.tsx index.tsx import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import * as serviceWorker from './serviceWorker'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>…
実行環境 パーケッジ名 バージョン Laravel 7.15.0 React 16.2.0 GraphQL 15.1.0 nuwave/lighthouse 4.14 graphql-tag 2.10.3 react-apollo 3.1.5 apollo-boost 0.4.9 react-router-dom 5.2.0 本当は@apollo/react-hooksを使ってhookをやりたかったのですがR…
Recoilが新しくでたので、使ってみました。まず、フォルダ構成は以下の通り Recoilのフォルダ構成は上記のようにatomのフォルダを作ってその中に書いていた記事が多かったので、それと同じようにしました。create-react-appを使ってTypeScriptを導入する場合…
useEffectを使う時にちょっとわからなかった事があったので、そのメモ用です。 まず、前提としてuseEffectはコンポーネントのレンダリングが終わってから実行されます。 そして、第２引数で実行タイミングを決めます この時の私はこのことも知らなかったです…
まず下記記事を参考に、Gitをインストールして名前とメールアドレスを設定しておいてください。 https://eng-entrance.com/git-install 次に、GitHubでリポジトリを作っておきます。次に公開したいプロジェクトの中でgh-pgaseをインストールします。 npm ins…
今回はLaravel+ReactでLaravelでバリデーションを行い、そのエラーメッセージをReactで表示してみたいと思います。とりあえず、分かりやすいようにReact側では新規登録の画面を作っていきます。 import React from 'react'; import ReactDOM from 'react-dom…
今回でTodoアプリを完成させます前回まで nasubifx.hatenablog.comファイル構成は前回と同じなので省きますまずActions.jsから //Actions.js const ADD_TODO="ADDTODO"; const REMOVE_TODO="REMOVETODO"; const removetodo=(id)=>{ return{type:REMOVE_TODO,…
今回はReact+ReduxでTodoアプリを作っていきます。 Reduxを使ったinput.valueの取得の仕方がなかなか分からなくて結構時間がかかりました。ファイル構成 src以下にいつものファイル構成です ・Actions.js ・Reducers.js ・App.js ・index.jsまずActions.jsか…
今回はReactとReduxで簡単なカウンターアプリを作ってみます。 Reduxを学んで3日目なので間違っているかもしれません。 Reduxを使うにはまず以下のコマンドでReduxに必要なモジュールをインポートしておきます。 npm install redux npm install react-redux …
React Slickに関しては公式のドキュメントを読むのがわかりやすいのでここに載せておきます。 https://react-slick.neostack.com/docs/get-started/これだけで簡単にスライドショーができます。 適当ですいません。
react-router-domのおおまかな使い方を書いて行きます。環境構築は以下参照 itsakura.com 1.react-router-domのインストール 2.ルーティングの設定 1.react-router-domのインストールVscodeでターミナルを開き、npm install react-router-domと入力し、イン…
