サクサク読よめて、アプリ限定げんていの機能きのうも多数たすう!
トップへ戻もどる
衆院しゅういん選せん
zenn.dev/nrikiji
アプリ設定せってい GitHubとGoogleでのログインを試ためすため、あらかじめアプリを作つくっておく。各かくアプリ設定せっていは参考さんこうリンクを参照さんしょう。各かくクライアントIDとクライアントシークレットは取得しゅとくしてあるものする。 開発かいはつ環境かんきょう準備じゅんび 以下いかのファイルを準備じゅんびしてdocker composeで起動きどう version: "3" services: app: build: context: . container_name: nextauth-example-app ports: - "3000:3000" tty: true volumes: - ./app:/app working_dir: /app
react18.2で検証けんしょう createPortal 以下いかはドキュメントの引用いんよう ポータル (portal) は、親おやコンポーネントの DOM 階層かいそう外がいにある DOM ノードに対たいして子こコンポーネントをレンダーするための公式こうしきの仕組しくみを提供ていきょうします。 ポータルを使つかうと<div id="app">以下いかに書かかれた<Modal>コンポーネントがDOM上じょうでは<div id="portal">以下いかにレンダリングされる。ただし、イベントは<div id="app">にバブリング(子こ要素ようそで発生はっせいしたイベントが親しん要素ようそに伝搬でんぱん)する。 import { FC, useState, ReactNode, useEffect } from "react"; import { createPortal } from "react-dom"; const Modal: FC<{ children: ReactNode }> = ({
{unreadMessages.length > 0 && <h2> You have {unreadMessages.length} unread messages. </h2> }
有名ゆうめいどころのReact Query、React Hook Form、Redux Toolkitを使つかってシンプルなアプリを作つくる。 APIへのリクエストに関かんする状態じょうたい管理かんりをReact Queryで、フォームの入力にゅうりょく状態じょうたいの管理かんりをReact Hook Formで、アプリの状態じょうたい管理かんり(ユーザーのログイン状態じょうたいなど)をRedux Toolkitで行おこなう。APIクライアントにはaxiosを使用しようする。また、テストではReact Testing LibraryとMSW(Mock Service Worker)を使用しようする。 react18.2、react-query3.39、react-redux8.0で検証けんしょう ログイン画面がめんとユーザーの一覧いちらんを表示ひょうじする画面がめんの2ふたつをもつアプリを作つくる。また、ユーザー一覧いちらんはログインしていること、ログイン画面がめんはログインしていないことという条件じょうけんの表示ひょうじ制御せいぎょをもうける。 プロジェクトの作成さくせい create
JavaScriptなのかTypeScriptなのか、またはモジュールバンドラー(webpackなど)の機能きのうが使つかわれているのかをちゃんと理解りかいしていなかったので整理せいり JavaScript importを使つかわない ファイルの依存いぞん関係かんけい、読よみ込こみ順序じゅんじょを開発かいはつ者しゃが管理かんりする必要ひつようがある <script src="./bar.js" defer></script> <script src="./foo.js" defer></script> <script src="./index.js" defer></script>
小しょうネタ。chromeで動作どうさ確認かくにん 何なんとなく使つかっていたので改あらためて勉強べんきょうしてみたら知しらなかったことなどのまとめ this 関数かんすうの呼よび出だし元もとのオブジェクトがthisになる。ただし、呼よび出だし元もとのオブジェクトの指定していがない場合ばあいは、windowオブジェクトがセットされる。ただし、厳格げんかくモードuse strictの場合ばあいはundefinedがセットされる const foo = { bar: function() { // 呼よび出だし元もとはfoo.bar() console.log(this); // foo object const baz = function() { // 呼よび出だし元もとはbaz()でオブジェクトの指定していがない console.log(this); // window object } baz(); const qux = function() { 'use strict'; // 呼よび出だし元もとはqux
Next.js/SSR Support Supported UI Frameworks Ant Design, Material UI, Tailwind, anything... ・・・ refineはReactベースの新しんしめのフレームワークです。チュートリアルを終おえると基本きほん的てきなCRUDな画面がめんが出来上できあがるのでこれに手てを加くわえていく axiosセットアップ Rest APIでのデータ取得しゅとくにSimple REST APIで使用しようされているaxiosのセットアップを行おこない、dataProviderにそれを指定してい。ここではbaseURLをセットしているが、withcredentialsやインターセプターの記述きじゅつなどが書かける ・・・ export const API_URL = "https://api.fake-rest.refine.dev" export const axiosInstance = a
tailwindcss 3.0.23で検証けんしょう カラーテーマを追加ついかする tailwindではbg-whiteで背景はいけい色しょくを白しろ、text-whiteで白しろテキストなどにできるが、whiteの部分ぶぶんで自分じぶんの決きめたカラーを使つかえるようにする module.exports = { ・・・ theme: { extend: { colors: { "foo": "#f97316", "bar": { "buz": "#65C18C", ・・・ }, }, }, }, ・・・ }
・・・ 'channels' => [ 'daily' => [ 'driver' => 'daily', 'days' => 90, 'permission' => 0664, ], ], class Handler extends ExceptionHandler { protected $dontReport = [ \Illuminate\Auth\AuthenticationException::class, \Illuminate\Validation\ValidationException::class, \Illuminate\Auth\Access\AuthorizationException::class, \Illuminate\Database\Eloquent\ModelNotFoundException::class, \Symfony\Component\Ht
macOS13.5.2、flutter3.22.0、xcode15.2、Android Studio Giraffeで検証けんしょう 1. Bundle IDとアプリ名めいを本番ほんばん、開発かいはつ版ばんで分わける 1端末たんまつに本番ほんばん、開発かいはつ版ばんアプリを同居どうきょさせたい。また、デバッグビルドの場合ばあいは開発かいはつ版ばん、リリースビルドの場合ばあいは本番ほんばん版ばんとしたい。iOS、Androidの話はなし iOS xcodeでios/Runner.xcworkspaceを起動きどう
は同義どうぎである。JSでいうところのobjectを定義ていぎすると{ name: string }という型かたが暗黙あんもく的てきに定義ていぎされたことになる。 リテラル型がた 値ちを指定していする型かたのこと。決きまった値ねしか使つかわせたくない場合ばあいに使用しようする。
このページを最初さいしょにブックマークしてみませんか?
『zenn.dev』の新着しんちゃくエントリーを見みる
j次つぎのブックマーク
k前まえのブックマーク
lあとで読よむ
eコメント一覧いちらんを開ひらく
oページを開ひらく