巷の「ReactとNext.jsの比較」はここがおかしい、というか比較すること自体が微妙 - honey32
(WIP まとまったら Qiita とかに上げるかも) TLDR; 「React と Next.js を比較」という記事で、 Next.js と比較できるのは「フレームワークなしで React を使うという選択肢」であって、「React そのもの」ではない。 ✅️ React を使うのに 「フレームワークあり」 vs 「フレームワークなし」 ❌️「React」 vs 「Next.js」 それはそうと、「create-react-app の機能・特徴」のことを、「React の機能・特徴」であるかのように書いてしまっている記事が多い create-react-app 自体が擬似的なフレームワーク（といえそう） そもそも、create-react-app は今は更新されてないので create-vite-app を使うべき フレームワークあり or フレームワークなし 【フレームワークあり】
React for Web/React Native両対応のUIフレームワーク「Tamagui 1.0」正式リリース。最適化コンパイラで高速なレンダリングなど実現
React for Web/React Native両対応のUIフレームワーク「Tamagui 1.0」正式リリース。最適化コンパイラで高速なレンダリングなど実現 React for WebとReact Nativeの両方に対応しオープンソースで開発されているクロスプラットフォーム対応のUIフレームワーク「Tamagui 1.0」が正式にリリースされました。 Tamaguiを用いると、レスポンシブデザインに対応し高速にレンダリングされるアプリケーションのルック＆フィールやUIをシンプルなコードで記述できるなどの利点が得られます。 Glad to finally get 1.0 out the door, definitely the hardest thing I’ve shipped. Proud!!https://t.co/d6M9KUWJYD — Nate (@natebirdman
Reactで作る気持ちいいUI | 株式会社CAM
｜はじめに こちらはCAM advent calendar 2022の19日目の記事です。 CAMでWebフロントエンドエンジニアをやっています。うぴまるです。 この記事では筆者が体験した気持ちいいと感じたUIを、React で実際に再現してみたものを、コードも交えて2つ紹介していきます。 ｜目次 ・モチベーション ・実装環境 ・今回取り扱うアニメーションライブラリ ・気持ちいいUIの紹介 ・Twitterのいいね風リアクションアニメーション ・ページ遷移フェードトランジション ・終わりに ｜モチベーション 普段スマホでWebサービスやアプリを利用しているなかで、何気なく使ったり出会うUI/UXに改めて注目し、自分で実装して再現してみたいと思い立ちました。 そして、今後作るWebサービスのクオリティ向上や自分のスキルアップに繋がればいいなと思い今回アドベントカレンダーの記事にしました。 ま
React開発を快適にするChrome拡張を公開したので見てください！
React Inspector というChrome拡張機能を作りました。 Chrome上でインスペクタを起動し、クリックしたReactコンポーネントのソースコードをピンポイントでエディターで開きます。(現在はVSCodeのみ対応) 追記: ↑2022/09/12 オプションページから "Open in Editor URL" を設定できるようにし任意のエディターのURLスキーマで開くことができるようになりました...! Chrome web store: https://chrome.google.com/webstore/detail/react-inspector/gkkcgbepkkhfnnjolcaggogkjodmlpkh GitHub: https://github.com/hand-dot/react-inspector Reactのソースコードに直接ジャンプできるのでUIか
実装例から見る React のテストの書き方 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！フロントエンドエキスパートチームの@nus3_です。 kintone のフロントエンド刷新プロジェクト（フロリア）では、品質を保ったまま開発を加速させるためにフロントエンドのテストを積極的に行っています。 今回はそんなフロントエンドのテストの実装例をいくつか紹介します。この記事がフロントエンドのテストを行う上での参考になれば幸いです。 テストに使用する主なパッケージ コンポーネントのテスト 補足: Testing Library の記法をチェックしてくれるeslint-plugin-testing-library カスタムフックのテスト 補足: React v18 では @testing-library/react の renderHook を使う 参考リンク 色々なテスト事例 setTimeout を使うコンポーネントのテスト 補足: Storybook の story を使
【入門】Figmaで作ったデザインをReactアプリに連携する - Qiita
はじめに 今回はAWS Amplify Studioを利用してFigmaで作成したデザインをReactアプリに連携する方法について解説します。 「AWSなんて触ったことないよ！」「Reactも触ったことないでやんす！」って人でもサクッとできるような内容なので読んでいただければなと思います。 目標成果物 Figmaで作成したカードコンポーネントのデザインをReactアプリ上で表示させる Figmaで作成したボタンコンポーネントでクリックイベントを試す この記事でやること AWS Amplify Studioの解説 Figmaでのデザイン作成とコードの自動生成方法の解説 Reactアプリとの連携 この記事の対象者 AWSの初心者だけどFigmaで作成したデザインをReactアプリと連携してみたい人 将来的に流行りそうな技術をサクッと試してみたい人 AWS Amplify Studio AWS
Rails 7とReactによるCRUDアプリ作成チュートリアル（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: How to Create a CRUD App with Rails and React · James Hibbard 原文公開日: 2022/04/01 原著者: James Hibbard 日本語タイトルは内容に即したものにしました。 React logo is licensed under Creative Commons — Attribution 4.0 International — CC BY 4.0. ほとんどのWebアプリケーションでは、何らかの形式でデータを永続化する必要があります。これは、サーバーサイド言語で作業する場合はシンプルにやれるのが普通です。しかし、そこにフロントエンドのJavaScriptフレームワークも加わってくると、少しややこしくなり始めます。 本チュートリアルでは、Ruby on Rai
textareaをカスタマイズできるReact用のライブラリを作成しました
HTMLのtextarea要素では、テキスト単位で色をつけたりイベントハンドリングしたりなどすることは、通常の方法では出来ないことは皆さんご存知かと思います。それを(擬似的に)可能にするライブラリを作成しました。 もしよろしければスター、使用した上でフィードバックなどいただけると非常にありがたいです。 Demo テキストを装飾したり(textareaに見えないかもしれないですがtextareaです)、 キャレットの位置にメニューを表示したり、 テキストにカーソルを乗せた時にTooltipを出したり、 アイデア次第で色々と出来ると思います(もちろん原理上不可能なことはありますが…)。 同様のことは、例えばSlateなどのライブラリを使用しても実現可能だと思いますが、こちらの方が断然軽量でバンドルサイズに何倍も差があります(現在約3.0kB gzipped)。なのでエディタライブラリを持ち出す
React + TypeScript: React Hook Formでフォーム入力値をまとめて簡単に取得・検証する - Qiita
React Hook Formは、フォームの入力データを検証まで含めて、まとめて簡単に扱えるライブラリです。ただ、導入のページ(「はじめる」)にコード例は示されているものの、説明があまりありません。本稿は、その中から基本的なコード例8つを採り上げ、公式ドキュメントの引用やリンクも加えて解説します。コード例はわかりやすい(あるいは動く)ように手直しし、CodeSandboxにサンプルを掲げました。 インストール React Hook Formは、npm installコマンドでつぎのようにインストールします。 アプリケーションを手もとでつくるには、Create React Appを使うのがよいでしょう。本稿のコード例の場合には、TypeScriptのテンプレートを加えてください(「React + TypeScriptのひな形作成とFullCalendarのインストール」参照)。 基本的な使い
Next.jsでMaterial-UIを使う
Material-UIは、マテリアルデザインのReactコンポーネントを簡単に取り入れられるライブラリです。 MUI: The React component library you always wanted MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design. 特に何も気にせずNext.jsのアプリにMaterial-UIを取り入れると以下のようなエラーが出てきます。 公式のドキュメントには以下のように説明されています。 Material-UIは、サーバーでのレンダリングの制約を考慮してゼロから設計されましたが、正しく統合されるかどうかはユーザー次第です。
りあクト! 第3版がすごくよかった - happy developing
会社のフロントエンドエンジニアの方にReact/Typescript関連のおすすめのドキュメントを聞いたところりあクトを教えてもらいました。 読んでみてとてもおもしろく、おおげさですが感動してしまったので感想を書きます。 読んだ本りあクト！ TypeScriptで始めるつらくないReact開発 第3版(200912) りあクト!第3版Ⅰ. 言語・環境編Ⅱ. React基礎編Ⅲ. React応用編私とフロントエンド 普段仕事ではmovoという物流業界向けのSaaSのバックエンドでGoを書いています。 各種プロダクトのフロントエンドはReact(16.9)/Typescript(3.7)で書かれているのですが、swagger/openapiの生成までしかタッチしていないので フロントのコードを読めるようになりたいと思っていました。 ReactについてはUdemyのコースを買ってみてTODOを中
ハンバーガー屋で隣の女子高生が語るReact 第1話｜erukiti
ハンバーガー屋さんで隣の女子高生がReactを語っていました。 ・ 第二話 隣の女子高生が語るデータの持ち方 ・ 第三話 React Hooks ・ 予定 React Hooks チューニング ・ 予定 React 自動テスト このシリーズを加筆・修正して、働きアップグレードガイド2020 〜楽しく働くために取り組めること〜という合同誌に収録することが決まりました。この合同誌、フルリモート・フルフレックスの会社でどうやって楽しく働くのか？2020年代の働き方についててんこ盛りの本なので、興味ある人はぜひチェックリストに追加してみてください。 ReactとはR子「最近さー、うちReact書いてんねん」 Reactは、Facebook社が開発しているウェブブラウザ向けのユーザーインターフェースライブラリ。同種のモノにVueやAngularなどがあるが、現時点で世界シェアトップはReactである
React / Redux を実務で使うということは
注意 この記事に書いてあることは古い情報になっている可能性があります 最近ReduxToolkit周りの進化がめざましく、更に追加されたReduxのドキュメントの項目がかなりわかりやすく書かれているため、基本的にこちらを推奨します 既にRTKなどの概要を知っているひとは特に Tutorials > Redux Essentials のセクションを読んでほしいです こんにちは、すずです Reactを使い始めて2年半経ち、その間に3つのサービス(SPA)を立ち上げてきました その経験から、 React や Redux を実務でしっかり使ってく上でのノウハウを紹介していきます （この記事ではある程度ReactやReduxの記事・ドキュメントを読んだ初学者を対象としています） 序 フロントエンド、モノを作ったはいいものの、「変更しづらい」「スケールしない」「この作りではパフォーマンスが出ない」って
React今昔物語 - ICS MEDIA
機能改善だけでなく、非推奨になった機能も多いですね。 2015年〜 ES2015の正式リリース前 2015年6月まではES2015が正式リリースされていなかったため、Reactのコンポーネントの作成にはReact.createClassが使われていました。 React独自のクラスコンポーネントを生成する機能です。 var Component = React.createClass({ render: function() { return ReactDOM.tagName({options, "Hello"}) } }); React.renderComponent( Component(null), document.getElementById("root") ) 2016年〜 クラスコンポーネントの時代 Reactバージョン15.0.0からはReact.createClassはほとん
Theme UI で Theme Driven な快適 React スタイリング生活 - Qiita
こんにちは。YAMAP でフロントエンドエンジニアをしている @SotaSuzuki と申します。 この記事は YAMAP エンジニア Advent Calendar 2019 の 9日目の記事となります。 拙い文章で恐縮ですが何卒よろしくお願いいたします。 tl;dr Styled System の Theming は Emotion の Theming と比べて 3倍便利 Theme UI の Theming はさらにその 2倍高機能 Styled System の Style Prop API と TypeScript の併せ技で 3倍高速なマークアップ Theme UI はいいぞ Styled System とは 本題の Theme UI に入る前に、Theme UI のベースとなるライブラリ Styled System について簡単に説明します。 Styled System は
React製 SPA における パフォーマンスチューニング - SSSSLIDE
nodefest@2018.11.23 html5j@2018.11.25
Create React App 2.0: Babel 7, Sass, and More – React Blog
This blog site has been archived. Go to react.dev/blog to see the recent posts. Create React App 2.0 has been released today, and it brings a year’s worth of improvements in a single dependency update. While React itself doesn’t require any build dependencies, it can be challenging to write a complex app without a fast test runner, a production minifier, and a modular codebase. Since the very firs
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.js 13で開発方法はどう変わる？
Building a Next.js Dashboard with Dynamic Charts and SSR - Cube Blog
Agrippa 1.3 is out 🎉🎉🎉