SPAにおけるルーティング〜React Router初歩 - Qiita
はじめに Reactで開発を進める上で必ずと言っていいほど使用されているReact Router。 ドキュメントが充実しているので、目を通せば大体のことは、解決すると思いますが、使い方の整理の意味を込めて文章としてまとめます。 公式ドキュメント | React Router 対象読者 React初学者 SPAにおけるルーティングのおさらい さらっとですが、SPAにおけるルーティングについて整理します。 ※ここら辺、理解してる人は読み飛ばして下さい。 SPAにおけるルーティングを一言で説明すると、『DOMの動的な書き換えによってページ遷移を擬似的に実現するとともに、ブラウザのセッション履歴をそれに同期させる事』 です。 SPAはサーバーへの初回リクエストに対して、アプリ全体が記述されたJSのコードと、そこで使用されるアセットファイルがごそっと返されます。 以降、ページ遷移はアプリが動的にDO
Tutorial v6.24.0 | React Router
Tutorial Welcome to the tutorial! We'll be building a small, but feature-rich app that lets you keep track of your contacts. We expect it to take between 30-60m if you're following along. 👉 Every time you see this it means you need to do something in the app! The rest is just there for your information and deeper understanding. Let's get to it. Setup If you're not going to follow along in your ow
React を始める - ウェブ開発を学ぶ | MDN
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
Beginning our React todo list - Learn web development | MDN
Complete beginners start here!Getting started with the webGetting started with the webInstalling basic softwareWhat will your website look like?Dealing with filesHTML basicsCSS basicsJavaScript basicsPublishing your websiteHow the web worksHTML — Structuring the webIntroduction to HTMLIntroduction to HTMLGetting started with HTMLWhat's in the head? Metadata in HTMLHTML text fundamentalsCreating hy
クイックスタート – React
React ドキュメントへようこそ！ このページでは、日々の開発で使用する React のコンセプトのうち 80％ の部分を紹介します。 このページで学ぶこと コンポーネントの作成とネスト マークアップとスタイルの追加 データの表示 条件分岐とリストのレンダー イベントへの応答と画面の更新 コンポーネント間でのデータの共有 コンポーネントの作成とネスト React アプリはコンポーネントで構成されています。コンポーネントとは、独自のロジックと外見を持つ UI（ユーザインターフェース）の部品のことです。コンポーネントは、ボタンのような小さなものである場合も、ページ全体を表す大きなものである場合もあります。 React におけるコンポーネントとは、マークアップを返す JavaScript 関数です。
実装例から見る 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）。 サーバーまた
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SvelteKit is not supported (add to doc) · Issue #547 · quarkiverse/quarkus-quinoa
Using Vercel rewrites as a reverse proxy
React フレームワークの 動向と選定基準
React ベースの単一ページアプリケーションを Amazon S3 と にデプロイする CloudFront - AWS 規範ガイダンス
Vite | 次世代フロントエンドツール
Nextra – Next.js Static Site Generator – Nextra
