streamline the way you develop appsbuild responsive and accessible mobile-first projects for the web with an easy to use component library
フロントエンド開発を行うにあたり、難しいと思うことの 1 つに npm パッケージの選定があると思います。 プロジェクトごとにそこまでコロコロ変えるものではないものの、パッケージを知っているのと知らないのでは開発難度も大きく変わってくるわけでして。 個人的におすすめな npm パッケージを書いていこうと思います。 create-react-app 言わずもがな、Facebook 製の開発環境構築パッケージです。 SSR が不要なときはこれ一択ですね。 Next.js 以前まであまり好きではなかったのですが、v9.3 を迎えてからはぐっと使いやすくなった印象があります。 型周りも非常にサポートが強く、公式ドキュメントも結構シンプルで見やすいのが良いですね。 ただ、webpack の設定周りの修正しずらさは結構痛い感じはします。 SSR が必要なときはこれ一択かなと。 Gatsby ブログサイ
Webサイトでファイルの入力を受け取りたいとき、input要素のtype属性に"file"を指定することで実現できます。しかし、これだけではデフォルトのスタイルが適用されてしまい、サイト全体のイメージに合わせるのが難しくなります。そこで、この記事ではカスタマイズ可能な画像用のファイル送信フォームの例を紹介し、実装のためのヒントを解説していきます。 ✍️ 伊藤忠テクノソリューションズ株式会社 BUILDサービス部 ソフトウェアエンジニア 板倉翔太 概要Reactを使用する (ただし考え方は Vanilla JS でも使えます) TypeScriptを使用する(ただし考え方はJavaScriptでも使えます) react-hook-formに対応する 「カメラを使用」と「ファイル選択」のボタンを分ける 「カメラを使用」はモバイル端末のみで有効にする ファイル名を表示する 画像のプレビューを表示
Is there a recommended way to structure React projects? React doesn’t have opinions on how you put files into folders. That said there are a few common approaches popular in the ecosystem you may want to consider. Grouping by features or routes One common way to structure projects is to locate CSS, JS, and tests together inside folders grouped by feature or route. common/ Avatar.js Avatar.css APIU
React + Typescript 〜react-hook-formを使って超簡単にフォームvalidationを実装する〜TypeScriptReactreact-hook-formdaisyui はじめに 筆者は現在、FJORD BOOT CAMP(フィヨルドブートキャンプ)にてテイスティングノートという自作サービスの開発をしています。 フロントエンド開発において回答フォームを作る必要があり、その際にreact-hook-formという便利なパッケージを使用したので、その使い方についてまとめようと思います。 対象読者 react開発でフォームの実装を検討中の方 react-hook-formの概要について知りたい方 react-hook-formとは https://react-hook-form.com/ 一言でまとめると、超簡単にvalidationが実装できるnpmです。 その
I am currently migrating a React application to TypeScript. So far, this works pretty well, but I have a problem with the return types of my render functions, specifically in my functional components. I have always used JSX.Element as the return type, now this doesn't work any more if a component decides to not render anything, i.e. returns null, since null is not a valid value for JSX.Element. Th
プロトタイピング向けにペライチで最低限のフロントエンドスタックを動かす方法について。 注意: 本番で使わないでください。tailwind は CDN モードで動かしているし、 esm.sh はスクリプトを動的にビルドするのでパフォーマンスは良くないです。 前提 jsconf.jp で色々なツールを使えばそれっぽいバンドルレス実現できる(けどパフォーマンスに難)という話を書きました。 具体的には NativeESM + importmaps + esm.sh 等の組み合わせます。 <script type="importmap"> - HTML: ハイパーテキストマークアップ言語 | MDN ESM>CDN これに、 esm.sh の v135 の新機能を使って tsx をバンドルするのを組み合わせる話です。 esm.sh/run 使い方は簡単。 <!-- esm.sh からランナーをロード
Headers & Footers The Authenticator has several "slots" that you can customize to add messaging & functionality to meet your app's needs. The following example customizes these slots with: Custom header above the Authenticator with the Amplify logo Custom footer below the Authenticator with © All Rights Reserved Custom Sign In header with Sign in to your account Custom Sign In footer with a Reset
Next.js 13.4+ introduces App Router with the usage of Server Components. Amplify UI components are interactive and designed to work on the client side. To use them inside of Server Components you must wrap them in a Client Component with "use client". For more info, visit Next.js third party package documentation. If you are using Next.js Pages Router, no changes are required to use Amplify UI com
With naturally fluid animations you will elevate your UI & interactions. Bringing your apps to life has never been simpler. Why Springs?We think of animation in terms of time and curves, but that causes most of the struggle we face when trying to make elements on the screen move naturally, because nothing in the real world moves like that. Springs don’t have a defined curve or a set duration. As A
ログイン状態に応じて以下のようなページリダイレクトを行いたいことがあるかと思います。 未ログイン時に自動でログインページに移動 既にログインしている場合、トップページに移動 このリダイレクトのやり方がreact-router-domのv6(執筆時点最新版)にて変更になっていますのでまとめてみます。 推奨される方法 まず、react-router-domではv6にてブラウザ側でのリダイレクトが非推奨となりました。 詳しい説明は上の記事に譲りますが、以下のような問題点が指摘されています。 本来リダイレクトで去るはずのページのHTMLをクライアントが一旦受信してしまう 特にクローラ等がこれを受け取るとリダイレクト元のページもインデックスされてしまう ブラウザ側でリダイレクトすると、本来不要なページのレンダリングが挟まるため余計な処理時間がかかる このため、可能な限りサーバー側でリダイレクトのレス
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く