[B! React] nabeatsu1のブックマーク

React Hooksのみでドラッグ＆ドロップの並び替えを実装する

この記事について上記のようなドラッグ&ドロップを使った並び替えの処理を自作したは良いものの、使うことが無くなってしまったので、供養の意味を込めて、その時に得た知見をこの記事で共有したいと思います 💪 実装する条件この記事で実装する処理は以下の条件のもと実装してきます。サードパーティ製のライブラリを使用しない React Hooks を使って実装する並び替えするときにアニメーションさせる簡単に扱えるようにする！アニメーションは CSS を使って行いますが、今回は簡略化の為に CSS ファイルは扱わずにインライン CSSを用いる事とします。どのように使えるか考えるでは早速、「実装していくぞー 💪 」と行きたい所ですが、今回のような汎用的な処理を自作する時は、「どういう感じで使いたいか？」という所から考えた方が、色々とやりやすいと思っています。なので、今回はそこから考え

nabeatsu1 2021/04/02

React

リンク

Reactで開発するチームが共通認識しておきたい重要な概念 - KitchHike Tech Blog

SFC, Redux, HOCなどコンポーネント指向とReact開発のキーワード CTOの Shoken です。キッチハイクでは2年前にRailsへのReact導入、1年半前に0ベースからReact Nativeでアプリ開発を始めました。この記事では、React, React Nativeで開発しているチームが共通認識したいReactの重要な概念について紹介します。 2018/11/07 追記（はてブコメントより） Reactリポジトリで名称の変更が行われ、変数名やクラス名が変更されました。いままでの Functional Component が Function Component となり、 Stateless は使わなくなって Function に統一されるようです。 Terminology: Functional -> Function Component #13775 Before

nabeatsu1 2018/11/06

リンク

Introduction · Webフロントエンドパフォーマンス改善ハンドブック

Webフロントエンドパフォーマンス改善ハンドブックこのパフォーマンス改善ハンドブックでは、ウェブアプリケーションにおけるフロントエンドのパフォーマンス改善について扱っています。ダウンロード版埋め込み動画を再生できないなど一部制限がありますが、ダウンロード版を配布しています。 PDF版 EPUB版 MOBI版目的このハンドブックでは過去に行った改善の事例を中心に紹介しています。そのため、現在の最適な解決方法を提案するものではありません。また、アプリケーションによっても最適な解決方法は異なります。今回の事例ではViewライブラリにReactを使い映像再生プレイヤーなどある程度複雑な機能を持ったウェブアプリケーションのフロントを扱います。具体的にはニコニコ生放送（以下「生放送」）で行った事例を中心に書かれています。開発と平行して行われていたため、React 15から16の間

nabeatsu1 2018/09/15

リンク

Rails 5.1 API mode + webpacker + react + reactstrap で ToDO アプリを書く - Qiita

Rails 5.1 API mode + webpacker + react + reactstrap で ToDO アプリを書くRails Bootstrap React Rails5webpacker モチベーション Rails 5.1 がリリースされて webpacker が入りました http://edgeguides.rubyonrails.org/5_1_release_notes.html 5.1 もある程度リリースが重なってきたので、まともに使えると思うので使ってみたい 2018/4/4 時点で 5.1.6 が最新 ( https://github.com/rails/rails/releases ) ついでに API mode も試せるといいなぁというわけで、1時間くらいで試した記録を残しておくことにしました。追加記事今回の実装に JWT 認証を追加した記事を書きました

nabeatsu1 2018/08/04

rails
React

リンク

Ruby on Rails+ReactでCRUDを実装してみた - Qiita

Ruby on Rails+ReactでCRUDを実装してみた ReactとRailsの勉強を兼ねて、CRUDを実装してみました!Viewはテキトーです。 (React歴2ヶ月目なのでコードの品質は大目にみてください。) 読者の対象レベル Reactのコンポーネントを理解している人 RailsでCRUDを実装できるくらいの人実行環境 Reduxを使わずReactだけで実装しています。バックエンド　Ruby on Rails 5.1.5 フロントエンド React 16.2.0 RailsでReactを使う方法はいくつかありますが、今回はwebpack + babel-loaderを利用してバックエンドとフロントエンドを切り離して作成し巻いた。RailsはAPIだけです。デモディレクトリ構成ディレクトリ構成はこのような感じです。webpackの環境はcrud_frontにあります。

nabeatsu1 2018/08/04

リンク

Reactコンポーネント内でjavascript製エディタaceを使う - Qiita

今回は、react-aceというreactでaceを使うための専用ライブラリを紹介します。リポジトリ:https://github.com/securingsincity/react-ace 今回はes6で書いてます。使い方大まかな導入方法はREADME読めば大体分かりますね。npm install react-aceでインストールして、importするだけです。テーマや言語のシンタックスハイライトは明示的にimportする必要があります。 import React from 'react'; import brace from 'brace'; import AceEditor from 'react-ace'; import 'brace/mode/ruby'; import 'brace/theme/github'; class Editor extends React.Co