Reactは悪い意味でも現在のjQueryだし、それを受け止めないと前に進めないということ
HTMXのCEOに就任したので[1]、記念に記事を書きたいと思います。 HTMXサイトのエッセイ[2]はどれも珠玉の出来で評判ですが、それらを読んでもわかるとおり、HTMXは「Webはこうあるべき」という主義主張のあるライブラリです。その主義主張のかなり初歩的な前提を書きたいと思います。 Reactはなぜだめか、という話です。 21日追記 ちょっと誤解が生じているために書き足しますが、Reactのパフォーマンス(及びそれ以外のこと)への批判というのはHTMX固有のものではありません。SvelteやSolidJSといった新興JSフレームワークやRails等の非JS WEBフレームワーク、SSG開発者たち、それからReact開発者たち自身といった多様なWEB開発者たちに共有されている見方です。この記事の最後の方でReact批判記事のリンク集を引用していますが、そういった多様なバックボーンの人た
クイックスタート – React
React ドキュメントへようこそ！ このページでは、日々の開発で使用する React のコンセプトのうち 80％ の部分を紹介します。 このページで学ぶこと コンポーネントの作成とネスト マークアップとスタイルの追加 データの表示 条件分岐とリストのレンダー イベントへの応答と画面の更新 コンポーネント間でのデータの共有 コンポーネントの作成とネスト React アプリはコンポーネントで構成されています。コンポーネントとは、独自のロジックと外見を持つ UI（ユーザインターフェース）の部品のことです。コンポーネントは、ボタンのような小さなものである場合も、ページ全体を表す大きなものである場合もあります。 React におけるコンポーネントとは、マークアップを返す JavaScript 関数です。
React入門 (全23回) - プログラミングならドットインストール
高機能なUI部品を作るために広く使われているJavaScriptライブラリのReactについて見ていきます。
Material-UI で並べ替え可能なリストを作る - Qiita
Material-UI では、Material Design Guidelines で定められているドラッグ＆ドロップで並べ替えられるリストが提供されていません。ドラッグ＆ドロップの機能を提供するライブラリと組み合わせることで、これを実現できます。 ドラッグ＆ドロップ React でドラッグ＆ドロップを実現するライブラリは数多ありますが、今回は以下の4つを比較・検討しました。箇条書きはあくまで個人的な感想です。 react-dnd react-dnd/react-dnd: Drag and Drop for React 一番有名どころ。オリジナルの作者は、React や Redux の Dan Abramov (gaearon) 氏。 拡張性が高いので、その気になればいろんなことができそう。一方で、アニメーションなど自力で実装しなければならない部分が多い。 記述量は多め。 react-be
React向け 状態管理ライブラリ「Zustand」の紹介 - devlog [開発部門ブログ]
今回紹介したいこと 突然ですが、皆さまはReactでフロントエンドを開発するうえで、状態をどのように管理されてますでしょうか？ 「実績と信頼のあるReduxで管理している」 「外部ライブラリなんて必要ない、useContextで十分」 「recoilの様な分散型の状態管理を行いたい」 いろいろなご意見があると思います。 どの方法も一長一短で、ベストプラクティスが無い状況の様な気がします。 私は以前にReduxを使用した経験から、Reduxの素晴らしさを理解しつつも、Fluxに基づいたアーキテクチャーの理解や、ボイラープレートコードの記述量の多さに煩わしさを感じ・・・ 「Reduxは数年後には別のライブラリーにシェアを奪われて消えるに違いない」 と考えておりましたが、現実はそうなりませんでした。 依然としてReduxは人気No1を維持しつつ、その他状態管理ライブラリが乱立する状態（状態管理の
React で ChatGTP API を利用した AI 連携プログラムを作成してみる
今話題沸騰中の OpenAI が開発した人工知能(AI)チャットボット「ChatGPT」のAPI が公開されました。 これにより、今後加速度的にあらゆる開発言語で ChatGPT の API が利用され、様々なアプリやサービスに組み込まれて便利になっていくと思います。 そこで、今回は試しに ChatGPT API を利用した、誰でもゼロから作れる簡単なチャットプログラムを React で作ってみたいと思います。 2023/3/14 に最新の言語モデル GPT-4 が公開されました。 GPT-4 では、テキストだけでなく、画像、音声、動画もインプットとして渡すことができるようになっています。 例えば、手書きのメモやスケッチをスマホで撮影した画像を送るだけで AI が回答や成果物を提示してくれます。
React、過剰に複雑な代物。 - Qiita
はいさい！ちゅらデータぬオースティンやいびーん！ 今回の記事は筆者に珍しく、技術紹介ではなく、僕の個人的な意見を書きます。あくまでも、自説です。 React自体は画期的で、プログラミング界に貢献したプロジェクトだと思っていますし、完全に否定したいわけではありません。 Reactに対する違和感＝芽生えては大きく育った種 筆者はReactがとても好きでした。JavaScriptが好きになったきっかけもReactでした。何から何までもReactで書き直して、Custom Hooksを作って、refを子部品に渡したり、バリバリ満喫していました。 Vueも仕事の関係で習得せざるを得なくなったのですが、Vueは最高に大嫌いでした。これならReactで書き直してやるぅ！と思ったりも。 Reactについて社内でも導入を推進したり、React入門の勉強会を開いたりもしています。 しかし、そんな筆者は、最近に
Vue.jsやReactなど、JavaScriptライブラリのコードスニペットを利用できるVS Codeの拡張機能 -Snipsnap
サポートしているJavaScriptライブラリの一覧（上記以外にもたくさんあります） Snipsnapは現在のプロジェクトで使用している言語やパッケージに基づいて、ライブラリで使用可能なスニペットをナビゲートし、必要なスニペットを選択します。 Snipsnapのインストール Snipsnapのインストールは、VS Code Marketplaceから。 VS Codeで開いたら、「Install」をクリック Snipsnapの使い方 Snipsnapは、手動でアクティブ化する必要はありません。ワークスペースフォルダにpackage.jsonファイルが含まれ、すぐに使用できます。トリガーが必要な場合は、コマンドパレットのReload Windowを使用します。 設定 利用可能な設定オプションは、スニペットのリクエストから特定のライブラリを除外することだけです。Snipsnapはロックファイル
React – ユーザインターフェース構築のための JavaScript ライブラリ
React は、インタラクティブなユーザインターフェイスの作成にともなう苦痛を取り除きます。アプリケーションの各状態に対応するシンプルな View を設計するだけで、React はデータの変更を検知し、関連するコンポーネントだけを効率的に更新、描画します。 宣言的な View を用いてアプリケーションを構築することで、コードはより見通しが立ちやすく、デバッグのしやすいものになります。 自分自身の状態を管理するカプセル化されたコンポーネントをまず作成し、これらを組み合わせることで複雑なユーザインターフェイスを構築します。 コンポーネントのロジックは、Template ではなく JavaScript そのもので書くことができるので、様々なデータをアプリケーション内で簡単に取り回すことができ、かつ DOM に状態を持たせないようにすることができます。
デザイナーがデザインツールを使わずに、React を使ってデザインした話 | MEDLEY Developer Portal
2020-06-19デザイナーがデザインツールを使わずに、React を使ってデザインした話メドレーのデザイナー酒井です。最近、JobMedleyからCLINICSに異動しました。 自分はデザインはもちろん、HTML/CSS/JS 実装してプルリク送ったりしているちょっとフロントエンド実装領域に軸足が寄ったタイプのデザイナーです。 ここでは以前所属していた JobMedley 事業部の話をさせていただきます。 当時、JobMedley の社内システムのリニューアルプロジェクトにデザイナーとして参加していました。通常、デザイナーがデザインをするときには Skecth や Figma のようなデザインツールを利用するのが一般的かと思います。 弊社でも基本的にはデザインツールでデザインを行うことが多いのですが、プロジェクトによっては、よりリアルなモックアップが必要なため、デザイナー自身がコーディ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Mezze – Convert and Export Icons as React Components | Figma
const Hoge: React.FC<Props>=()=>って書いてたら思考停止系と言われたので調べた
RGL Example 0 - Showcase
GitHub - react-grid-layout/react-grid-layout: A draggable and resizable grid layout with responsive breakpoints, for React.
react-beautiful-dnd/docs/patterns/multi-drag.md at master · atlassian/react-beautiful-dnd
ワークスクールでスキルとシゴトを手に入れよう | Workschool（ワークスクール）
Examples | Keen-Slider