Amplify + Nx (React + Typescript) で爆速で monorepo 環境を構築する - Techtouch Developers Blog
この記事はテックタッチアドベントカレンダー9 日目の記事です。 8 日目は ポエマー masaru 氏による 少女に何が起ったか ～少女が他人のウェブサーバー構成を知るまでにやったいくつかのこと、そしてその結末～ でした。 ただのポエムかと思いきやかなりコアなセキュリティの話だったのでとても勉強になりました。 テックタッチのフロントエンドエンジニアの taka です。 最近テックタッチでは、品質を更に向上させるため、また今後開発を加速できるようにするためにコードを一新しました。 そこで Amplify と Nx を使って monorepo の開発環境を構築したので、その手順を記しておこうと思います。 ざっくり言うとこれらを使うことで、 monorepo の環境を簡単にセットアップしたい React + Typescript で開発したい ESLint や Jest などの開発ツールを使いた
こんにちは！Amplifyの改善を行っている @watilde です。この記事は AWS Amplify Advent Calendar 2021 と Figma Advent Calendar 2021 の 25 日目の記事です。 Amplify Studio の発表 2021年の12月3日に開催された re:Invent にて Amplify Studio が発表されました。新機能としてFigmaでデザインしたコンポーネントを Amplify Studio にてデータベース内のテーブルのスキーマと紐付けし、可読性の高い React のコンポーネントとして出力する “Figma to code” が追加されました。 https://docs.amplify.aws/console/ 本記事では、amplifyコマンドがどのように Figma, Amplify Studio で設定したコン
SWR is a React Hooks library for data fetching. The name “SWR” is derived from stale-while-revalidate, a cache invalidation strategy popularized by HTTP RFC 5861. SWR first returns the data from cache (stale), then sends the request (revalidate), and finally comes with the up-to-date data again. With just one hook, you can significantly simplify the data fetching logic in your project. And it also
GitHub - contiamo/restful-react: A consistent, declarative way of interacting with RESTful backends, featuring code-generation from Swagger and OpenAPI specs 🔥
⚠️ restful-react has been deprecated: We are focusing on a new open api generator that generates react-query components: https://github.com/fabien0102/openapi-codegen ⚠️ Building React apps that interact with a RESTful API presents a set of questions, challenges and potential gotchas. This project aims to remove such pitfalls, and provide a pleasant developer experience when crafting such applicat
React & TypeScriptのプロジェクト作成 | TypeScript Deep Dive 日本語版
コピー{ "compilerOptions": { "sourceMap": true, "module": "commonjs", "esModuleInterop": true, "resolveJsonModule": true, "experimentalDecorators": true, "target": "es5", "jsx": "react", "lib": [ "dom", "es6" ] }, "include": [ "src" ], "compileOnSave": false } コピー{ "name": "react-typescript", "version": "0.0.0", "license": "MIT", "repository": { "type": "git", "url": "https://github.com/basarat/react
React Native for Windows を試してみたので備忘録もかねて手順をメモしてみました。 作業開始時点の私の環境は以下のようになります。 Windows 10 Pro 1909 (設定アプリから開発者モードに変更してください） Visual Studio 2019 16.4.2 ユニバーサル Windows プラットフォームワークロードの C++(v141) ユニバーサル Windows プラットフォーム ツール。デフォルトでチェックが入っていないので入れる。142 じゃなくて 141 なので注意 個別のコンポーネントから MSVC v141 - VS 2017 C++ ARM ビルドツール(v14.16)、MSVC v141 - VS 2017 C++ x64/x86 ビルド ツール (v14/16) の 2 つを入れる Node.js v12.9.1 (注意：現時点で最
I recently listened to a podcast where the creator of React Router, Michael Jackson mentioned a new pattern with hooks, returning a component. At first, I couldn't grasp how this would differ from just calling a render function or another React component, and it seemed to go against the whole "Components for UI, hooks for behavior" mantra. But I think I've stumbled on a use case. By the end of the
軽量なグローバル状態管理ライブラリ「zustand」
はじめに SWRやTanstack Queryといったライブラリが現れ、サーバーのデータをクライアントで管理することが少なくなり、グローバルでの状態管理も少なくなりました。 ただそれでも、モーダルの開閉、トースターの表示、ダークモードなど、グローバルで管理したい状態は、まだまだ多くあると思います。 Reactは、useContext(以下 Context)を用いてグローバルな状態管理を実現できますが、状態が少ないうちは良いのですが、それが多くなってきた時に、Providerタワー(参考: https://zenn.dev/uhyo/articles/provider-tower-to-recoil)が建設され、Provider同士の依存関係を管理するコストが高まったり、コード量が多かったりなど、規模が大きくなると気になる点がいくつかあると思います。(その他にもパフォーマンスが良くないと言わ
React Final Form
High performance subscription-based form state management for React From day one, Final Form and React Final Form were designed to be modular: you put the pieces together to build the form library that fits your requirements. Why should your users need to download complex code for handling arrays of fields when your signup form is just four fields? Only two peer dependencies: React and Final Form.
Transform SVGs into React componentsA complete tool box to take advantage of using SVGs in your React applications.
既存のサイトにモダンな感じで React.js + TypeScript を導入する とりあえずReactをはじめるたい時はCreateReactAppとか使うと簡単に始められるのですが、基本SPA用なので、すでにあるサイトに導入とかバックエンドフレームワークに導入とか難しかったりします。 そこでWebpackを使用して既存のサイトにReactを導入する方法をご紹介します。 投稿日2020年08月26日 更新日2020年09月08日 前提条件 予めnode.jsをインストールしておいてください。 npmの初期化とモジュールのインストール 適当なプロジェクトディレクトリを作ったらnpm initでpackage.jsonを作ります。 $ npm init -y 次にWebpack関係のモジュールからインストール $ npm i -D webpack webpack-cli typescrip
GitHub - pmmmwh/react-refresh-webpack-plugin: A Webpack plugin to enable "Fast Refresh" (also previously known as Hot Reloading) for React components.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
React ＋ MUI: 数値入力とマスク入力 に react-number-format が、かなりオススメ！
Reactで MUI(v5) + React-hook-form + yup で入力フォームを作成しています。 今回は 3桁区切りや小数点以下の入力をサポートした数値入力用のコンポーネントと、マスク入力用のコンポーネントが必要になったのですが、MUI には 数値入力用のコンポーネントやマスク入力コンポーネントがありません。 そこで react-number-format ライブラリを試してみたのですが、かなりオススメだったので紹介したいと思います。 数値入力用、マスク入力用のコンポーネントを扱うライブラリ 数値入力用のコンポーネント、マスク入力用のコンポーネント を扱っているライブラリとして、react-number-format のほかに react-imask があります。 たぶん他にもいいライブラリがあると思いますが、今回はこの2つから選びました。 react-imask npm t
Jamstackサイトへ超簡単にサイト内検索を実装できる、クロール型検索 Site Search 360！ | 東京都・駒込のWeb制作 ペンタプログラム
Jamstackサイトへ超簡単にサイト内検索を実装できる、クロール型検索 Site Search 360！ かつてのGoogleカスタム検索のように、サイト内検索を手軽に実装できる手段があればなあ…データを用意しなくても勝手にクロールしてくれたらなあ…あわよくば無料で…という願望への答えがありました。 それがSite Search 360です。 このページではNext.jsで利用する方法をご紹介しますが、いわゆる静的HTMLサイトにもJavaScriptを数行埋め込むだけで実装できます。また、WordPressプラグインもあるようです。最終的にHTMLとして生成されるページなら、CMSを問わず、もちろんプレーンなHTMLでも使える、嬉しいサービスです。 Jamstackのみならず、Googleカスタム検索の代替手段をお探しの方におすすめです。 Site Search 360 無料版でできる
今回は React(Typescript) + MUI(v5) の フォームライブラリをどれにしようか調査しました。 入力フォーム用のライブラリ React の入力フォーム用のライブラリをどれにするか？ 2022年03月22日時点で主要なもの、だいたい以下の3点のようです。 Formik React Final Form React Hook Form React Hook Form に決めた経緯 まずは npm trends で比較してみます。 人気順は Formik > React Hook Form > React Final Form のようです。 1. Formik npm trends を確認すると、一番人気があるライブラリです。 ただし、他の2つのライブラリと比較して、レンダリングが多くパフォーマンスに劣るようです。 現在あえて選択することはないかと思うのでパスします。 パフ
Reactとreact-routerとconnected-react-routerとTypeScript - Qiita
はじめに 通常Webサイトを作るときは複数ページ構成になることが多いと思います。 Reactを使って、複数ページを行き来する場合はreact-routerなるものを使うのが一番近道だと思います。 例によってフロントを始めた時に、こんなドキュメントがあればハマらなかっただろうな…と思うことの備忘です。 いつものように、よくわからなければ公式ドキュメントとエラーメッセージをよく読むのが解決への近道です。 前提条件 https://qiita.com/IgnorantCoder/items/88f13569cbf0a1c5eaa1 が終わってる。つまりreduxとreact-reduxは使ったことがある前提です。 そもそもreact-routerとは React routerとはなにかですが、公式を見に行けば説明が書いてあります。 Components are the heart of Reac
AWS Amplify と AWS Cognito と TypeScript で作る ユーザー認証機能付き Next.js アプリ - Software development of explosion! －夢の破片（カケラ）たちの日々－
AWS Amplify とは？ aws.amazon.com モバイルアプリケーションやウェブアプリケーションを構築するための JavaScript フレームワークです。 これを使うことで、後述する AWS Cognito を簡単に使用できます。 AWS Cognito とは？ ユーザー管理を一括で行ってくれるユーザー認証サービスです。 Auth0 の AWS版といったところでしょうか。 この様に色々と設定できます。 Next.js とは？ React.js でサーバーサイドレンダリングするためのフレームワークです。 Vue.js の Nuxt.js のようなものですね。 やってみよう！ 1. Next.js with TypeScript な環境を作る https://nextjs.org のサイトの手順を参考に、TypeScript に対応した Next.js アプリが実行できる環境を
blog.kwst.site
Using TypeScript with React Native · React Nativeを参考にしながらReactNativeでTypeScriptを使う環境構築をしていきたいと思います。 ReactNative自体の環境構築は以前のこちらの記事を参照してください。 React Native環境構築 | blog.kwst.site ReactNativeプロジェクトにTypeScriptを導入していく initコマンドでプロジェクトをまず作ります。 npx react-native init ReactNativePractice TypeScript関連のモジュールをインストールする TypeScriptの他に既にインストールされているモジュールの型定義モジュールをインストールします。 yarn add --dev typescript @types/jest @types/
【備忘録】【エラー解決】ModuleNotFoundError: No module named 'todos,' - Qiita
DjangoとReactの開発環境を完全に独立させたTodoアプリを作っています。 migrationファイルを作成しようとして下記を実行した結果、 Traceback (most recent call last): File "manage.py", line 22, in <module> main() File "manage.py", line 18, in main execute_from_command_line(sys.argv) File "/Users/asamitakaoka/Desktop/todo-react/lib/python3.8/site-packages/django/core/management/__init__.py", line 425, in execute_from_command_line utility.execute() File "
Docker で Node.js + Express の開発環境を作成する - takaya030の備忘録
VirtualBox + Docker 環境で Node.js + Express を動作させたときの手順メモ 検証環境 Windows10 Home Edition VirtualBox 5.2.22 Docker version 18.05.0-ce, build f150324 docker-machine version 0.14.0, build 89b8332 docker-compose version 1.20.1, build 5d8c71b パッケージインストールのためのイメージ作成 VirtualBox の共有フォルダ内にパッケージをインストールしようとすると、シンボリックリンクが作成できずエラーになるため Docker イメージ内にインストールする node.Dockerfile FROM node:8-alpine MAINTAINER takaya030 ENV
Azure-Samples/azure-search-openai-demo で azd up でエラー - Qiita
TL;DR 素直に Dev Container か GitHub Codespace を使いましょう。 はじめに Azure Open AI Service をサクッと試したい時のサンプルとして以下のリポジトリがあります。 このリポジトリは Azure Developer CLIの azd up で簡単にリソースを構築できるように構成されています。 発生した問題 README どおりに azd up とすすめると以下のエラーが発生しました。 環境は WSL2 の Ubuntu です。 $ azd up (✓) Done: Downloading Bicep ? Select an Azure Subscription to use: ★選択したサブスクリプション★ (✓) Done: Retrieving locations... ? Select an Azure location to
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Amplify StudioがどのようにFigmaデータをReact componentに変換しているのか
GitHub - vercel/swr: React Hooks for Data Fetching
React Native for Windows を試してみよう。そして型も手に入れよう。
New React Hooks Pattern? Return a Component
SVGR - Transforms SVG into React Components. - SVGR
既存のサイトにモダンな感じで React.js + TypeScript を導入する
React＋MUI v5 の 入力フォーム用のライブラリは React Hook Form の 一択