実装例から見る React のテストの書き方 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！フロントエンドエキスパートチームの@nus3_です。 kintone のフロントエンド刷新プロジェクト（フロリア）では、品質を保ったまま開発を加速させるためにフロントエンドのテストを積極的に行っています。 今回はそんなフロントエンドのテストの実装例をいくつか紹介します。この記事がフロントエンドのテストを行う上での参考になれば幸いです。 テストに使用する主なパッケージ コンポーネントのテスト 補足: Testing Library の記法をチェックしてくれるeslint-plugin-testing-library カスタムフックのテスト 補足: React v18 では @testing-library/react の renderHook を使う 参考リンク 色々なテスト事例 setTimeout を使うコンポーネントのテスト 補足: Storybook の story を使
React Libraries for 2024
Follow on FacebookReact has been around for a while. Since then, a well-rounded yet overwhelming ecosystem of libraries evolved around the component driven library. Developers coming from other programming languages or libraries/frameworks often have a hard time figuring out all the libraries for creating web applications with React. At its core, React enables one to create component-driven user i
2024年 React 環境構築 with Vite
はじめに 書いていて気づいたのですが、この記事に特に目新しいものはありません。コピペで最速環境構築をしたい方向けです。それぞれのツールについて細かい解説はしていないため、詳細は公式ドキュメントをご参照ください。 リポジトリはこちら。 Node.js この記事では Node.js のバージョン管理に volta を使用しますが、nvm や nodebrew などでも問題ありません。パッケージマネージャーには pnpm を使用したいところですが、2024 年 1 月現在、volta の pnpm サポートは実験段階のため、今回は npm を使用します。(そこまでして volta を使用したい理由はないのですが...) curl https://get.volta.sh | bash source ~/.zshrc # or ~/.bashrc volta install node # LTS版
React 製アプリケーションのビルドシステムを webpack から Vite に移行して爆速な開発体験を手に入れよう | Recruit Tech Blog
React 製アプリケーションのビルドシステムを webpack から Vite に移行して爆速な開発体験を手に入れよう wakamsha Vite （ヴィート）とは Vue.js の作者である Evan You 氏が中心となって開発されているビルドツールです。 Vite - Next Generation Frontend Tooling ES Modules 形式のままブラウザからインポートする Dev サーバを搭載し、ソースコードをバンドルすることなく高速で動作させるのが特徴です。もちろん npm パッケージもブラウザから読み込み可能な ES Modules 形式に変換します。プロダクションビルド時は Rollup を使ってバンドルします。 Vue.js だけでなく React、Preact、Svelte のビルドもサポートしており、GitHub トレンドの上位にも頻繁に登場している
Vite + React で新規プロジェクトの開発環境を作ろう
2022年5月1日 JavaScript, React Viteは2020年に発表されたフロントエンドのビルドツールです。最初「ヴァイト」と読んでたんですが、「ヴィート」と読むみたいですね。フランス語で「速い」という意味だそうです。絶賛Reactのお勉強中なので、ViteでReactの環境を作る流れを備忘録的にまとめておきます！ ↑私が10年以上利用している会計ソフト！ この記事は動画でも解説しています。動画派の方はぜひご覧ください！ Viteとは？ Viteを使えばベースのプログラムを予め準備しておいてくれているので、開発をすぐに始められるようになります。スターターキットとか、テンプレートみたいなものですね。他にも複数のファイルをひとつにまとめたり、SassをCSSに変換するなどの作業を爆速でできるようになります。 また、ファイルを保存すると同時に、確認画面も自動的に更新されます。ホット
Next.js 13
As we announced at Next.js Conf, Next.js 13 (stable) lays the foundations to be dynamic without limits: app Directory (beta): Easier, faster, less client JS. Layouts React Server Components Streaming Turbopack (alpha): Up to 700x faster Rust-based Webpack replacement. New next/image: Faster with native browser lazy loading. New @next/font (beta): Automatic self-hosted fonts with zero layout shift.
react.dev のご紹介 – React
本日、React とそのドキュメントの新しいホームとなる react.dev の立ち上げを発表することができ、大変うれしく思います。この記事では、新しいサイトの見どころをご紹介します。 tl;dr 新しい React サイト (react.dev) では、関数コンポーネントとフックを用いて、モダンな React を学べます。 図解、イラスト、チャレンジ問題、そして 600 以上の新しいインタラクティブなサンプルが含まれています。 これまでの React ドキュメントサイトは、legacy.reactjs.org に移転しました。 新しいサイト、新しいドメイン、新しいホームページ まずは少々事務的なところから。 新しいドキュメントの立ち上げを祝うために、そして何よりも、古いコンテンツと新しいコンテンツを明確に分離するために、より短い react.dev ドメインに移行しました。古い reac
チュートリアル：三目並べ – React
このチュートリアルは、実践しながら学ぶことを好む方や、今すぐ何か具体的に動くものを作ってみたいと考えている方向けに設計されています。一歩ずつ概念を学びたい場合は、UI の記述から始めてください。 このチュートリアルはいくつかのセクションに分かれています。 チュートリアルのセットアップは、以下のチュートリアルを進めていく出発点です。 概要では、React の基礎であるコンポーネント、props、および state を学びます。 ゲームを完成させるでは、React 開発における最も一般的な手法を学びます。 タイムトラベルの追加では、React の独自の強みに関する深い洞察を得ることができます。 チュートリアルで作成するもの このチュートリアルでは、React を使ってインタラクティブな三目並べゲームを作成します。 完成したときにどのような見た目になるか、以下で確認できます。 import {
既存プロジェクトに React を追加する – React
ローカル環境で開発するには Node.js をインストールする必要があります。React をオンラインや単純な HTML ページで試すことも可能ですが、現実的には開発時に利用する大抵の JavaScript ツールには Node.js が必要です。 既存のウェブサイトの一部に React を使う 例えば Rails などの他のサーバテクノロジで構築されている example.com というウェブアプリがあり、example.com/some-app/ から始まる全ルートを React で完全に実装したいとします。 以下の手順に従って設定することをお勧めします。 React ベースのフレームワークのうちひとつを使い、アプリの React 部分をビルドします。 フレームワークの設定で /some-app を base path に指定します（方法：Next.js、Gatsby）。 サーバーまた
PR TIMESのCDNをCloudFrontからFastlyに移行しました | PR TIMES 開発者ブログ
こんにちは、インフラチームテックリードの櫻井です。 今回はプレスリリース配信サービスの prtimes.jp で使用しているCDNをCloudFrontからFastlyに移行したことについて紹介します。 CDNの基本的な情報は割愛するので、もしCDNについて基本的なことを知りたいという方はググるなりChatGPTるなりしてください。 なぜ移行する必要があったのか まずCloudFrontからFastlyに移行した理由について説明します。 prtimes.jp のプレスリリース詳細ページは現在SmartyテンプレートとjQueryというレガシーな技術で構成されています。 今後このプレスリリース詳細ページをReact化することでフロントエンドの開発スピードを向上させることを予定しています。 しかしReact化を行うと、検索エンジンのクローラーがJavaScriptを実行できない場合にページの内
React.js開発当初、「そんなものが使えるはずがない」とFacebook社内で評価されていた。React.jsの開発経緯を振り返る「React.js: The Documentary」YouTube公開
React.js開発当初、「そんなものが使えるはずがない」とFacebook社内で評価されていた。React.jsの開発経緯を振り返る「React.js: The Documentary」YouTube公開 代表的なJavaScriptのフレームワークの1つであるReact.jsがどのように生まれ、発展してきたのかが、React開発当時の関係者やメンテナーなどへのインタビューによって語られる動画「React.js: The Documentary」がYouTubeで公開されています。 動画の作成と公開を行ったのは、ITエンジニア向けの転職紹介などキャリアサービスを提供しているHoneypot社。同社は以前にもKubernetesの歴史を紹介したドキュメンタリー動画「Kubernetes: The Documentary」を公開しています。 参考：KubernetesをGoogleが開発し、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Using Vercel rewrites as a reverse proxy
React フレームワークの 動向と選定基準
React ベースの単一ページアプリケーションを Amazon S3 と にデプロイする CloudFront - AWS 規範ガイダンス
Vite | 次世代フロントエンドツール
Nextra – Next.js Static Site Generator – Nextra
Adding Eyecandy to your Quarkus App with React and Patternfly
React/Next によるアプリケーション開発のこれから
GitHub - vintasoftware/django-react-boilerplate: Django 4, React, Bootstrap 5 with Python 3 and webpack project boilerplate
ReactではじめるChrome拡張開発入門
