巷の「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 フレームワークなし 【フレームワークあり】
一休レストランで Next.js App Router から Remix に乗り換えた話 - 一休.com Developers Blog
このエントリーは一休.com Advent Calendar 2023の15日目の記事になります。 CTO 室の恩田です。 現在は一休レストランのフロントエンドのリアーキテクトを手がけています。 今日はその中で Next.js App Router から Remix に乗り換えた話をご紹介したいと思います*1。 背景 6日目の記事で香西から紹介させていただきましたが、2023年10月に一休レストランのスマートフォン用レストラン詳細ページをリニューアルしました。 一休レストランの Rust バックエンドが正式リリースされました。https://t.co/7N4VGv5ej9 このページのスマートフォンビューはバックエンドが Rust で書かれた GraphQL になってます— naoya (@naoya_ito) 2023年10月4日 ちなみにフロントエンドも、旧バージョンは Nuxt v2
Reactベストプラクティスの宝庫！「bulletproof-react」が勉強になりすぎる件
Reactアプリケーションのアーキテクチャの一例として公開されているGitHubリポジトリ「bulletproof-react」が大変勉強になるので、私自身の見解を交えつつシェアします。 ※2022年11月追記 記事リリースから1年ほど経過して、新しく出てきた情報や考え方を盛り込んだ続編記事を書いていただいているので、こちらも併せて読んでいただければと想います（@t_keshiさんありがとうございます！）。 ディレクトリ構造が勉強になる まずはプロジェクトごとにバラつきがちなディレクトリ構造について。 ソースコードはsrc以下に入れる bulletproof-reactでは、Reactに関するソースコードはsrcディレクトリ以下に格納されています。逆に言えば、ルートディレクトリにcomponentsやutilsといったディレクトリはありません。 たとえばCreate Next Appで作成
Reactでの認証時にJWTをCookieに設定する方法
SPAでの認証といえばJWTを使うことが多いと思いますが、 localStorageに保存するとセキュリティリスクが高いとかで、 CookieにHttpOnlyな値として保存するのが良いとしばしば言われることもあります。 今回はReact × ExpressでJWTをCookieに保存する具体的な方法を紹介します。 （そもそもJWTを使うべきかとか、localStorageを使うことのリスクなどについては要件次第なのであまり言及しません） 調査にあたっては以下の記事を参考にしました。 React Authentication: How to Store JWT in a Cookie 記事の方法そのままでは自分の環境では上手くいかなかったので、ハマりポイントも含めて手順を解説します。 最終的に出来上がったもの JWTをCookieに保存する https://github.com/Kanat
ReactコンポーネントをブルブルさせながらReduxのパフォーマンスチューニング - カミナシ エンジニアブログ
はじめに こんにちは、カミナシ社でソフトウェアエンジニアをやっている浦岡です。 我々は「ノーコードでユーザー独自の現場アプリを作成できる」サービスを開発しています。 そのサービスのフロントエンドの開発にはReact×Reduxを使っているのですが、 サービス特性のため「Reduxのstateがファットになりがち」であったり「コンポーネント間のデータの依存関係が多くなりがち」といった状態に陥ります。 その結果、アプリの反応速度が遅くなりがちです... この記事では、上のような状態に陥った「React×Redux」アプリの高速化の一例をサンプルアプリを用いて説明します。 サンプルアプリについて 今回、Reduxのチュートリアルにあるカウンターアプリを改良し、下のような「モンスターの捕獲記録」アプリを作ります。 サンプルアプリについて Version1(コンポーネントをブルブルさせてみる) まず
ReactとVueの比較、全く同じアプリを作成してみて分かった相違点 2019年Edition
日常的にVueを使用している開発者が、ReactとVueで全く同じアプリを作成した時のそれぞれの工程を比較して分かった相違点を紹介します。 特に、Reactのフックについて具体的な使い方が解説されています。 I created the exact same app in React and Vue. Here are the differences. [2019 Edition] by Sunil Sandhu 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 本記事は以前翻訳した記事の2019年Editionで、Reactのフックが追加されています。以前の記事は下記をご覧ください。 ReactとVueってどう違う？全く同じアプリをReactとVueで作成してみて分かった相違点 隣の家の芝生は青く見える ReactとVueで作成し
Laravel5.7でVueを利用した開発をしてみる - Qiita
やりたいこと Laravel + vue + axiosの連携 Laravel mixを利用したワークフローの確認 React版もいちおう書きました。 やること サンプルとして下記のようなTodo管理システムを作ります。 こちらの記事が特に参考になりました。ありがとうございます。 前提知識 vueの開発環境はwebpackやCLIを利用して行うことが普通ですが、LaravelにはLaravel Mixというwebpackを簡単に取り扱うためのラッパーがあります。動作は、webpack.mix.jsに下記のように定義されています。 mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css'); resources/js/app.jsをいじってnpm run devを実行すると
ReactとVueってどう違う？全く同じアプリをReactとVueで作成してみて分かった相違点
日常的にVueを使用している開発者が、Reactはどうなのだろうと思い、ReactとVueで全く同じアプリを作成した時のそれぞれの工程を比較して分かった相違点を紹介します。 I created the exact same app in React and Vue. Here are the differences. 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 隣の家の芝生は青く見える VueとReactで作成したアプリの見た目を比較 VueとReactはデータをどのように変更させるか アイテムの新規作成 アイテムの削除 イベントリスナーを渡す 子コンポーネントにデータを渡す 親コンポーネントにデータを戻す 終わりに 隣の家の芝生は青く見える 私は現在の職場でVueを使用しており、Vueがどのように機能するかかなり理解してい
アメブロ2016 ~ React/ReduxでつくるIsomorphic web app ~ | CyberAgent Developers Blog | サイバーエージェント デベロッパーズブログ
みなさんこんにちは、サイバーエージェントでフロントエンドを中心に開発しています原(@herablog)です。 アメブロでは、2016年9月にフロントエンドをJavaベースのアプリから、node.js・Reactベースのアプリへとシステムの移行をおこないました。本記事では、その移行へといたる経緯やゴール、システム設計、その結果についてお伝えします。 リリース直後に気づいているツワモノな方もいらっしゃいました。 アメブロのSP版がReactのSSRでフルリニューアルしたのを観測した — hr (@hrloca) 2016年9月1日 システム移行へといたる経緯 2004年から始まり、日本国内で最大規模のブログサービスとなったアメブロは、システムの肥大化や多数の関係者が存在したことによるモジュール・導線の急増などの理由により、ページ表示スピードが遅くなり、ページビュー数にも明らかに影響を与えるよう
React Server
Getting Started with React Server The easiest way to get started is with our yeoman generator. Open your terminal and type: # install yeoman npm install -g yo # install the react-server generator npm install -g generator-react-server # make a new react-server project in the CURRENT directory yo react-server # run the new app npm run start # go to http://localhost:3000 That hooks you up with react-
https://www.prakard.com/viewtopic.php?f=1004&t=1884764
VersatileTerminal emulation programs with the versatility to communicate with a wide variety of systems and devices. Award winning terminal emulation for WindowsConnect using Serial, Modem, or TCP/IP NetworksUpdated for compability with Windows 10, 8, 7, and moreSupports many terminal emulation and file transfer optionsActively supported & easy to use CommunicationCommunicate with other computer s
React + Reduxでマウスについてくる星を作る - 俺、サービス売って家買うんだ
さて、皆様七夕の夜をいかがお過ごしでしょうか？ 七夕ということで、マウスの軌跡を星が追従するJavaScriptを書きました。 作ったもの www.youtube.com DEMO ※一旦PCのみ もうホント簡単なんですが、Web1.0時代に流行していたマウスに画像を追従させるあれです。あれ。JavaScriptと言ったらこれですよね。最高！ 本当にやりたっかたこと React + Reduxの勉強 設計 - 実装 - テストまで一通りの流れの経験 ここ一年ぐいらフロントエンドを書くときは「慣れてるから」という理由でVue.jsを利用していたのですが、最近はReact + Reduxで実装しているサービスが増えており、そろそろ勉強しないとという焦燥感がでてきて何かいいアイディアはないかと考えていた折に、某同僚と 「React + Reduxを使ってマウスについてくる星実装してようぜ」 とな
Fullstack React: React Tutorial: Cloning Yelp
As we're writing the Fullstack React book, we get a lot of questions about how to build large applications with React and how to integrate external APIs. tl;dr - This post will guide you through building a full React app, even with little to no experience in the framework. We're going build a Yelp clone in React You can get the completed code here Try the demo here Download the first chapter of ou
Meteor-React-Ionic Mobile App Part 1: The Basic Template
Meteor now has reasonable support for React.js, so it’s about time to start using it for hybrid mobile apps, which is one of the huge advantages of using Meteor. This template app (repo) will use React.js in place of Meteor’s built-in templating engine Blaze, ReactRouter instead of iron:router or meteorhacks:flow-router, and will use Ionic, which is a widely used hybrid mobile app framework. This
「ネイティブアプリかWebアプリか」の争いはいい加減やめにしよう | readwrite.jp
Mozillaの開発者であり、Webの支持者であるジェームズ・ロングは、モバイルWebアプリはネイティブアプリに敵うことはないと主張する。ロングの挑発的な物言いはわざとかもしれないが、彼の言ってる事も一理ある。 しかしながら同時に、こういった事はますます論争の種では無くなってもきている。 Forresterは「クライアント・サーバー時代はネイティブが制したが、Webに取って代わられた。歴史は繰り返す」と主張する。そうなのかもしれない。 もしフェイスブックのReactJSが何かの兆しなのだとしたら、それはネイティブ及びWebの未来はハイブリッドにあるということなのかもしれない。実際、そういったことは今現在でも見受けられる。 Webは「遅すぎる」Webアプリの問題とは、ロングが言うようにDOM（ドキュメント・オブジェクトモデル。ドキュメントやWebページ/アプリをどの様にプログラムがアクセスす
React Native for Android: How we built the first cross-platform React Native app
React Native for Android: How we built the first cross-platform React Native app Earlier this year, we introduced React Native for iOS. React Native brings what developers are used to from React on the web — declarative self-contained UI components and fast development cycles — to the mobile platform, while retaining the speed, fidelity, and feel of native applications. Today, we’re happy to relea
Electron で Live Dwango Reader（旧 Live Door Reader）クライアントを作ってみる - Qiita
Electron で Live Dwango Reader（旧 Live Door Reader）クライアントを作ってみるJavaScriptNode.jsReactElectron まだまだ機能は乏しいし、既読化も実装していません（テストでフィードがなくなっちゃうと痛いので後回し）が、ぼく自身、常用しているショートカットまでを実装できたので、ご紹介。 レポジトリはこちら。 使っている npm パッケージ React：コンポーネントとかレンダリングとか react-modal：元記事表示用のモーダルを作る時に mousetrap：キーボードショートカットで request：API と通信 lodash：なんやかんやでいつも使う できること フィード一覧の取得、表示 選択されたフィードを読み込んで、記事一覧を表示 元記事の表示 最低限のキーボードショートカット （まだ）できないこと 認証 そ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
hitobase - アプリ・配信・最新技術に強い開発チーム
TwitterによるReactベースのモバイルWebスタックはネイティブのパフォーマンスに匹敵する
GitHub - infinitered/reactotron: A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.
