- import { useState } from 'react' - import reactLogo from './assets/react.svg' - import viteLogo from '/vite.svg' - import './App.css' + import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live"; function App() { - const [count, setCount] = useState(0) return ( - <> - <div> - <a href="https://vitejs.dev" target="_blank"> - <img src={viteLogo} className="logo" alt="Vite logo" /
We’re excited to announce that we are partnering with the React team to build and maintain the react-codemod repo, offering open-source codemods to enhance the migration experience for React 19 and beyond. React 19 MigrationTo kick things off, we've released 10 new codemods and recipes to assist with upgrading to React 19. Upgrade your React project with the following command: For more details, re
【2024年版】JavaScript(React)におけるリーダブルコードのチートシート10~13章 - Qiita
2024/3/18 コードの再構成 10章 無関係の下位問題を抽出する 10.1 入門的な例: findClosestLocation() const findClosestLocation = (lat, lng array) => { let closest; let closes_dist = Number.MAX_VALUE; for(var i = 0; i < arrya.length; i += i){ //2つの地点をラジアンに変換する const lat_rad = radians(lat); const lat_rad = radians(lnt); const lat2_rad = radians(array[i].latitude); const lat2_rad = radians(array[i].longitude); //「球面三角法の第二余弦定理」の公式を
Spring BootによるAPIバックエンド構築実践ガイド 第2版 何千人もの開発者が、InfoQのミニブック「Practical Guide to Building an API Back End with Spring Boot」から、Spring Bootを使ったREST API構築の基礎を学んだ。この本では、出版時に新しくリリースされたバージョンである Spring Boot 2 を使用している。しかし、Spring Boot3が最近リリースされ、重要な変...
React SaaS website blocks to copy/pasteBeautifully designed website blocks for your SaaS website. Easily customizable with shadcn-ui themes and works in dark- and light mode.
なぜReactを学び始めたのか
Reactの学習を始めて2ヶ月少々経ったので、 現時点でのこれまでの学習を少し振り返っていこうと思います。 〜きっかけ〜 学び始めたきっかけは、単にWebアプリケーションを作ってみたいという興味からでした。 元々2023年の6月までWeb制作を学ぶためにスクールに通っており、 紹介もあって制作会社のアシスタントとしてもHPの制作に携わっておりました。 HP制作をしていくうちに、JsvaScriptをもっと深く学んでみたいという気になり本格的に学習を始めました。 当初はフロントエンドエンジニア転職という事は何も考えていなかったので、 とりあえずVueかReactの基礎講座みたいなものをYoutubeを使って学習して楽に感じた方を使っていこう。 と思い2つを比べた結果、 Reactが自分には合ってると思いReactのフレームワークを勉強していこうという事になった訳です。 こちらは自分のGitH
astroでthree.jsを動かす方法
検索しても出てこなかったので。 Reactを使います(React Three Fiberは後述) astroにReactをインストール ドキュメントを見るとReactをインストールする方法は自動と手動の2つあって、今回は自動で行います。手動だと、reactをブラウザで解釈するためのreact/domというライブラリを入れたり、コンフィグいじったりしなければならないですが、自動だと全部よろしくやってくれます。 npx astro add react ✔ Resolving packages... Astro will run the following command: If you skip this step, you can always run it yourself later ╭───────────────────────────────────────────────────
Mezze – Convert and Export Icons as React Components | Figma
It's a chore keeping icons updated cross-functionally. Mezze allows you to convert and export icons as React components, and pushes changes directly to your Git repos. See Mezze in action 🎬 ⚡ Benefits: Designers no longer have to export icons from Figma every time there are changes or additions...
背景 業務上、グラフを作成することが多いのですが、毎回機能の調査をしている気がしたので、ざっくり特徴をまとめました。 調査したライブラリ Recharts サンプル https://recharts.org/en-US/examples 最終リリース 2023/3/16 SVGベース その他 APIは使いやすく、コード量も少なくて済みそう 機能は意外と少ない コンポーネントの種類は最低限 例えば、Zoom/Pan機能はないため、やろうとすると結構コードを書く必要がありそう 実装予定ではある？ https://github.com/recharts/recharts/issues/710#issuecomment-1469068212 スター数やリリースの頻度を見ると、Reactのチャートライブラリの中では一番最初に検討すべきか React18対応済み？ https://github.com
// ✅ データ取得とフォーム用のコンポーネントに分離 function PersonDetail({ id }) { const { data } = useQuery({ queryKey: ['person', id], queryFn: () => fetchPerson(id), }) // データ読み込みが完了したらレンダー if (data) { return <PersonForm person={data} /> } // 読み込みが未完了ならフォールバックコンテンツを表示 return 'loading...' } function PersonForm({ person }) { const { register, handleSubmit } = useForm({ defaultValues: person }) return ( <form onSubmit={
はじめに Reactを学習していましたが、JavaScriptの記法についてフワッとしている部分がよくあったので、簡単ですが今回は関数について少し調べました。 関数の種類
More Than You Need to Know About ReactDOM.flushSync | JulesBlom.com
flushSync is part of what I like to call “Rare React”; the curious & uncommon parts, the outer circle of the API, the rarely needed sharp knives. That just so happens to be a thing that I enjoy diving into and writing a blog post about. So what does ReactDOM.flushSync do and when is it useful? The names suggest it flushes synchronously. But what is flushing, what is being flushed, and when should
はじめに こちらの記事は、@Sicut_studyさんがアップしている【Reactアプリ100本ノック】シリーズに相乗りし、アウトプットを行うための記事になります。 実装ルールや成果物の達成条件は元記事に従うものとします。 元記事との差別点として、具体的に自分がどんな実装を行ったのか（と必要に応じて解説）を記載します。 @Sicut_studyさんのノック100本についていき、Reactを100日間学ぶのが目標です。 今回の元記事はこちら 問題 "Hello World" React コンポーネントの作成 ルール 元記事より引用 主要なライブラリやフレームワークはReactである必要がありますが、その他のツールやライブラリ（例: Redux, Next.js, Styled Componentsなど）を組み合わせて使用することは自由 TypeScriptを利用する 達成条件 元記事より引用
Windows、macOS、LinuxにReactをインストールする方法 Reactは現代のウェブ開発に欠かせないツールとなっており、これをマシンにセットアップすることは、優れたユーザーインターフェース構築を始めるための第一歩となります。 パフォーマンスと再利用性に重点を置いたUI構築のための人気のJavaScriptライブラリで、人々のために本当に役立つ、高速で応答性が高く、メンテナンス可能なインターフェースを簡単に作成できるようになり、ウェブ開発に革命をもたらしました。 コンポーネントベースのアーキテクチャと、実際の環境でどのように動作するかに重点を置いているため、モダンなウェブアプリケーションの構築を目指す開発者にとって、魅力的な選択肢となっています。 この包括的なガイドでは、Windows、macOS、およびLinuxオペレーティングシステムにReactをインストールする手順を説明
はじめに はじめまして、損保ジャパンDX推進部の辻です。普段はフロントエンドでリードを担当させていただいています。 弊部は約3年前に生まれた新しい組織であり、積極的に内製開発の取り組みを行っています。そんな3年間という短い間でも、MUIを採用して乗り換えるという事象が発生しており、ライブラリ選定における失敗について振り返っていきます。 組織におけるライブラリ採用の参考にしていただければと思います。 最新の状態 ライブラリはなるべく最新に追従していく方針です 言語：TypeScript UI全般：React UIコンポーネント：Radix UI、(+MUI) スタイル：Tailwind CSS グローバルstate：TanStack Query APIキャッシュ：TanStack Query ルーティング：React Router GraphQLクライアント：graphql-request
How to manage state in Next.js 13 using Redux Toolkit | HackerNoon
Too Long; Didn't ReadWith server and client components in next.js 13, this tutorial will take you through integrating and managing state using redux toolkit in your project.
【React 18 新機能】Automatic Batching って何?【初心者にも分かりやすく】 - Qiita
はじめに 前回に続いて,Reactの新機能のAutomatic Batchingついて解説していきます！！ React18の中でもかなり重要な機能になっているので、今回の記事を見て概要だけでも 理解しておいてください！ Automatic Batchingとは...? 以下公式より引用 バッチングとは React がパフォーマンスのために複数のステート更新をグループ化して、単一の再レンダーにまとめることを指します。自動バッチング以前は、React のイベントハンドラ内での更新のみバッチ処理されていました。promise や setTimeout、ネイティブのイベントハンドラやその他あらゆるイベント内で起きる更新はデフォルトではバッチ処理されていませんでした。自動バッチングにより、これらの更新も自動でバッチ処理されるようになります 端的にいうと、更新を1回の再レンダリングにまとめることでパフ
JSON Web Tokens (JWT) have become a popular method for implementing authentication in web applications due to their simplicity and ease of use. This article will discuss how to perform JWT authentication in a React app. We will cover the steps involved in setting up a backend JWT authentication endpoint, signing up and signing in from your React app, and protecting routes with JWT validation, so y
TL;DR Recoilはもうメンテナンスされていない。理由は不明だが、このプロジェクトは死んでしまった。 メンテナンスされていないライブラリの使用はやめよう、別の選択肢を選ぼう Recoil Meta社が新規に作成した状態管理ライブラリです。この記事はRecoilの解説記事ではないので詳細は省きますが、大変な期待を抱くには十分なほど魅力的なパッケージでした。 ですが Recoilの現在のリポジトリを見ればわかると思いますが、半年以上前に更新が止まっています。 おそらく、recoilプロジェクトは凍結されました。 つまり、もう更新は期待できないということです。 どうしてこのような状況になったのか どこかの会社が所有しているOSSプロジェクトが凍結される理由は、ビジネス的な問題か、主要コントリビューターが会社を去った場合に起きると考えられます。そして、Metaは規模にかかわらずここ最近ニュー
Refineでつくる 5分で簡単 管理画面
はじめに アプリ開発には本体の開発とは別に、運用・保守するための管理画面の開発も必要不可欠になると思います。機能と言っても、登録、参照、編集、削除 程度であることがほとんどなので、そこまで時間もかけたくないものです。そこで今回は、弊社で採用することにした Refine についてご紹介したいと思います。 多少の環境構築はあるものの、準備が整えば、1 ページあたり 5 分で実装できるようになります。 豊富なサンプル GUI を使って 上記の公式サイトを見ると、「Try it Online!」のボタンがあります(2023-09 現在)。ここから要素技術を選択していくことで、お好みのプロジェクトが作成可能です。 GitHub から Clone この公式ページには、コンポーネント、フレームワーク、UI など様々な要件・要素技術に応じたサンプルコードが GitHub 上に数多く提供されています。 今回
Introducing StyleX | StyleX
We are thrilled to introduce StyleX. StyleX is an expressive, deterministic, reliable, and scalable styling system for ambitious applications. We've taken the best ideas from the styling libraries that have come before to create something that is simultaneously familiar and uniquely new. What is StyleX?StyleX takes the developer experience of CSS-in-JS libraries and uses compile-time tooling to b
BlockNote - Javascript Block-Based React rich text editor
The open source Block-Based rich text editorA beautiful text editor that just works. Easily add an editor to your app that users will love. Customize it with your own functionality like custom blocks or AI tooling. Why BlockNote?Whether you want extensive customization or a great out-of-the-box experience, BlockNote has you covered:
ドラックアンドドロップで要素を作成したり、並べ替えたり
はじめに ファイルのアップロードの時しかり、TODO リストの並べ替えしかり、ドラック・ドロップする機会はそれなりにあります。 しかし、いざ自分が実装するとなるとどうして良いか分かりませんでした。 とはいえ、ここ直近でドラック・ドロップ機能を実装する必要が出てきたため調査していたら、dnd kitといういい感じのモジュールがありました。 なので、今回はこのdnd kitの使い方を見ていき、活用編としてドラック・ドロップで要素が生成できるようにするコンポーネントを作っていきます。 結構長いですが、是非お付き合いください。 この記事のここだけ!!! ドラック・ドロップ機能はdnd kitで実装しています。 この機能はドラック・ドロップ機能に加え、並べ替え機能もあります。 以上の機能を活かして、ドラック・ドロップしたらコンポーネントを動的に生成できます。 生成した要素の並べ替えもできます。 完成
6月18日、Codeminer42が「How React 19 (Almost) Made the Internet Slower」と題した記事を公開した。この記事では、React 19の新しい変更がどのようにしてインターネットの速度を遅くする可能性があったかについて詳しく紹介されている。 React 19が今年の初めに発表され、新機能や開発者体験（DX）の向上が話題となった。しかし、先週、React 19に加えられたある変更が多くのウェブサイトのパフォーマンスを大幅に低下させる可能性があることが明らかになった。 この問題は、Dominik（TkDodo）のツイートから始まった。 https://x.com/TkDodo/status/1800501040766144676 React 19では、同じSuspenseバウンダリ内の兄弟要素の並列レンダリングが無効化された。これにより、兄弟要
背景 筆者は実務で約1年半Vue.jsの開発をしています。Reactは記事でも見ることが多く、SPAといえばReactが一番に出てくるけれど、Reactを一才触ったことがなかったです（結局リアクティブだからそんな違いはないだろうと思うのもあってあまり触っていなかった）。とはいえ、よく聞くReactを一切触っていないのも怖く、その勉強がてらチュートリアルをやってみました。以下の比較は主に、Vue.js options API と React Hook を比較しています。 筆者はReactについてほとんど知らないです。（クラスコンポーネントと関数コンポーネントの違いを最近知ったくらい） Reactのチュートリアルが新しくなっていました。React hookを前提とした内容になっています。 チュートリアル：三目並べ – React 親コンポーネントのデータ書き換え Vue.jsで親コンポーネント
完全に理解してオレオレFileListControlComponentを作ってみたので解説します JavaScriptのFileListの操作ってちょっと厄介ですよね. Reactが絡むともっと厄介ですよね（本当は絡んでいないんですが） 今回は<input type="file" multiple />においてアップロードされたファイルを管理するコンポーネントを作ったので理解を深めながら解決していきます. React, TypeScriptでやります. 作ったもの 以下の条件を満たす複数選択可能なファイル入力のUIです. 選択したファイル一覧が可視化されている その一つ一つに削除ボタンがある 再度ファイルを選択すると,ファイルが追加される（再選択ではなく追加） 実際にうごくの なにが厄介なのか Reactでは基本的にはuseStateによって定義した変数で入力状態を管理します. 基本となる
Next.jsの新しい概念を学ぶ一覧
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
ReactとJavaScript: Reactと他のJavaScriptフレームワークの比較 - Qiita
React JavaScriptの利点と他のJavaScriptフレームワークとの優位性を探ってみましょう。以下の記事では、Reactを他のフレームワークと比較し、それぞれの技術の利点やメリットを理解することができます。信頼性と効率性を持つウェブアプリケーションを構築するための最適な選択肢を見つけるために、ぜひ読み進めてください。 Reactと他のJavaScriptフレームワークの比較 Cre: twire React JavaScript - Facebookの強力なJavaScriptライブラリ Reactは、ウェブ開発の分野でトップの技術の1つとなっています。Facebookによって開発され、Reactは高いパフォーマンスとコンポーネントの再利用性により人気を博しています。Virtual DOMを使用することで、Reactはアプリケーションのスピードとパフォーマンスを最適化し、実際
「セットアップ→クリーンアップ」のエフェクトのライフサイクルから、依存配列の正しい指定のしかた（ESLint による自動チェック・補完）まで、ざっくり解説 「依存配列によってタイミングが異なるの、ややこしすぎる！」「なるべく使わないと言われているなら、設計として優れてないの？」という疑問に答えます！ # 関連記事 - https://zenn.dev/yumemi_inc/articles/react-effect-simply-explained - https://ja.react.dev/learn/lifecycle-of-reactive-effects - https://ja.react.dev/learn/removing-effect-dependencies # BGM・効果音 - 効果音ラボ様: https://soundeffect-lab.info/
Full Stack Netflix Clone in React, Tailwind CSS, Next.JS, Prisma, MongoDB, NextAuth & Vercel (2023)
(CC) Blender Foundation | mango.blender.org (c) copyright 2006, Blender Foundation / Netherlands Media Art Institute / www.elephantsdream.org (c) copyright 2008, Blender Foundation / www.bigbuckbunny.org © copyright Blender Foundation | durian.blender.org © copyright Blender Foundation | www.sintel.org Discord for any problems/errors/bugs: https://www.codewithantonio.com/discord Github & Live Web
How to Document Picture-in-Picture in React (with Typescript) | HackerNoon
How to Document Picture-in-Picture in React (with Typescript) by@dlitsman Too Long; Didn't ReadThe Chrome 116 update introduced the Document Picture-in-Picture API, expanding developers' control over custom controls and UI for Picture-in-Picture mode. This feature is currently supported in Chrome and Edge, with potential for wider browser support. The API allows opening, closing, and detecting Pic
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ブラウザ上でReactのコードが書けるReact Liveの紹介
Codemod partnering with the React team
Netflixは、フロントエンドテストへのカスタムアプローチであるSafeTestを発表
TWBlocks - Free SaaS website blocks
Reactのチャートライブラリ調査メモ in 2023春
React Hook Formで非同期の値を扱う場合はこれに統一しませんか？
【JavaScript・初学者】Reactでよく使われる頻出記法 / 関数について - Qiita
Reactアプリ100本ノックを実践する 〜01 Hello World〜 - Qiita
Windows、macOS、LinuxにReactをインストールする方法
【フロントエンドエンジニア0人スタート】組織におけるライブラリ選定と移行理由〜さよならMUI〜
React: Performing Authentication with JWT
Recoilは状態管理の選択肢ではなくなってしまった
React 19に加えられた変更が危うくインターネット全体を遅くするところだった件
Reactチュートリアルをやってみて分かったVue.jsとの違い - Qiita
Reactで複数ファイルアップロードを実装するときに考えること
【React】useEffectの関数はいつ実行される？（むずかしくないReact #1） 【VOICEVOX解説】