ã€å›³è§£è§£èª¬ã€‘0ã‹ã‚‰React開発ã—ã¦åŸºç¤Žã‚’マスターã§ãる最強ãƒãƒ¥ãƒ¼ãƒˆãƒªã‚¢ãƒ« æ˜ ç”»ã‚¢ãƒ—ãƒªç·¨ã€åˆå¿ƒè€…完全版】 - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
VSCode+GoogleChromeã§Reactã®ãƒ‡ãƒãƒƒã‚°ã‚’è¡Œã†
目的 VSCodeã§Reactã®ãƒ‡ãƒãƒƒã‚°ã‚’è¡Œãˆã‚‹ã‚ˆã†ã«ã—ã¾ã™ã€‚ 内容 create-react-appã§React Appã®ãƒ†ãƒ³ãƒ—レートを作æˆã—ã€VSCodeã§ãƒ‡ãƒãƒƒã‚°ã‚’è¡Œãˆã‚‹ã‚ˆã†ã«ã—ã¾ã™ã€‚ VSCode上ã§ãƒ–レークãƒã‚¤ãƒ³ãƒˆã‚„ウォッãƒå¼ã‚’使ã£ã¦åŠ¹çŽ‡ã‚ˆãデãƒãƒƒã‚°ã™ã‚‹ã“ã¨ã‚’目的ã¨ã—ã¾ã™ã€‚ æœ¬æ‰‹é †ã§ã¯ VSCode 㨠Node.js 㨠GoogleChrome ãŒã‚¤ãƒ³ã‚¹ãƒˆãƒ¼ãƒ«ã•ã‚Œã¦ã„ã‚‹ã“ã¨ã‚’å‰æã¨ã—ã¦ã„ã¾ã™ã€‚ 動作確èªç’°å¢ƒ 本記事ã¯ã€ä»¥ä¸‹ã®ç’°å¢ƒã§å‹•ä½œç¢ºèªæ¸ˆã¿ã§ã™ã€‚ VSCode 1.52.1 GoogleChrome 87.0.4280.88 Node.js v12.19.0 npm 6.14.8 react 17.0.1 方法 テンプレートアプリã®ä½œæˆ launch.json ã®ä½œæˆ task.json ã®ä½œæˆ .envã®ä½œæˆ (ä¸è¦) デãƒãƒƒã‚°ã®é–‹å§‹ 1.Reactテンプレートアプリã®ä½œ
TanStack React Table デフォルト列表示使用時ã®ä¾¿åˆ©ãªTips - Qiita
TanStack Table (æ—§React Table) ã¯éžå¸¸ã«å¼·åŠ›ã§æŸ”軟ãªReactテーブルライブラリã§ã™ãŒã€ä½¿ç”¨ã™ã‚‹éš›ã«ã„ãã¤ã‹ã®Tipsを知ã£ã¦ãŠãã¨ä¾¿åˆ©ã§ã™ã€‚ 今回ã¯column visibilityã®è¨å®šã«é–¢ã™ã‚‹3ã¤ã®ãƒã‚¤ãƒ³ãƒˆã‚’紹介ã—ã¾ã™ã€‚ デフォルトã®åˆ—表示è¨å®š columnVisibilityã®åˆæœŸçŠ¶æ…‹ã¯ã€useStateを定義ã™ã‚‹éš›ã«åŒæ™‚ã«è¨å®šã§ãã¾ã™ã€‚ const [columnVisibility, setColumnVisibility] = useState({ id: true, name: true, age: false, // ageカラムã¯ãƒ‡ãƒ•ã‚©ãƒ«ãƒˆã§éžè¡¨ç¤º }); const table = useReactTable({ // ... state: { columnVisibility, }, onColumnVisibilityChange: s
React Queryã¯ãƒ‡ãƒ¼ã‚¿ãƒ•ã‚§ãƒƒãƒãƒ©ã‚¤ãƒ–ラリã§ã¯ãªã„。éžåŒæœŸã®çŠ¶æ…‹ç®¡ç†ãƒ©ã‚¤ãƒ–ラリã 。 - Qiita
ã¯ã˜ã‚ã« ã“ã®è¨˜äº‹ã¯Dominikã•ã‚“ãŒåŸ·ç†ã•ã‚ŒãŸã€ŒThinking in React Queryã€ã‚’å‚考ã«React Queryã®è€ƒãˆæ–¹ã‚’ã¾ã¨ã‚ãŸã‚‚ã®ã«ãªã‚Šã¾ã™ã€‚Dominikã•ã‚“ã¯TanStack Query（以下ã§ã¯React Queryã¨å‘¼ã¶ï¼‰ã®ã‚³ã‚¢ãƒ¡ãƒ³ãƒ†ãƒŠãƒ¼ã§ã‚ã‚Šã€å½¼ã®ãƒ–ãƒã‚°ã‹ã‚‰React Queryã«ã¤ã„ã¦ã®çŸ¥è¦‹ã‚’å¸åŽã™ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚ 目次 React Queryã¯ãƒ‡ãƒ¼ã‚¿ãƒ•ã‚§ãƒƒãƒãƒ©ã‚¤ãƒ–ラリã§ã¯ãªã„ ã§ã¯React Queryã¨ã¯ä½•ã‹ï¼Ÿ Client Stateã¨Server Stateã®é•ã„ React Queryã¯éžåŒæœŸã®çŠ¶æ…‹ï¼ˆServer State）管ç†ãƒ©ã‚¤ãƒ–ラリã§ã‚ã‚‹ ã‚ャッシュを有効活用ã™ã‚‹ React Queryã®ã‚ャッシュã«ã¤ã„㦠staleTimeã§ã‚ャッシュをコントãƒãƒ¼ãƒ«ã™ã‚‹ queryKeyã‚’é©åˆ‡ã«è¨å®šã™ã‚‹ ã¾ã¨ã‚ 🎆 React Queryã¯ãƒ‡ãƒ¼ã‚¿ãƒ•
Reactã§QRCodeを生æˆ
ã¯ã˜ã‚ã« React 㧠QRCode を生æˆã™ã‚‹æ–¹æ³•ã‚’紹介ã—ã¾ã™ã€‚ 作æ¥ã—ãŸã‚³ãƒ¼ãƒ‰ã¯ä»¥ä¸‹ã«ã‚ã‚Šã¾ã™ã€‚ çµæžœ QRCode を生æˆã™ã‚‹ãƒ©ã‚¤ãƒ–ラリã¯ã„ãã¤ã‹ã‚ã‚Šã¾ã™ãŒã€ã‚¹ã‚¿ãƒ¼æ•°ã€æ›´æ–°é »åº¦ã€è¨˜è¿°è¨€èªžã®è¦³ç‚¹ã‹ã‚‰ã€qrcode.react ã‚’é¸å®šã—ã¾ã—ãŸã€‚ Next.js ã§å®Ÿè£…ã—ã¾ã—ãŸãŒå•é¡Œãªã動作ã—ã¾ã—ãŸã€‚ ライブラリã®é¸å®š 以下ãŒé¸å®šè¦ä»¶ã§ã™ã€‚ Next.js 上ã§ã€ã¤ã¾ã‚Šã€React ã§ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆã¨ã—ã¦åˆ©ç”¨ã§ãã‚‹ã“㨠スター数ãŒä¸€å®šæ•°ã‚ã‚‹ã“㨠更新ã•ã‚Œã¦ã„ã‚‹ã“㨠TypeScript ã§æ›¸ã‹ã‚Œã¦ã„ã‚‹ã“㨠qrcode.react 㯠TypeScript ã§è¨˜è¿°ã•ã‚Œã¦ãŠã‚Šã€ã‚¹ã‚¿ãƒ¼æ•°ã‚‚多ã„ã®ã§ã€ã“れを利用ã™ã‚‹ã“ã¨ã«ã—ã¾ã™ã€‚ã©ã®ãƒ©ã‚¤ãƒ–ラリーも該当ã—ã¾ã™ãŒã€æ›´æ–°ã¯ãã“ã¾ã§æ´»ç™ºã§ã¯ã‚ã‚Šã¾ã›ã‚“。 qrcode.react GitHub ã®ãƒšãƒ¼ã‚¸ デモページ 実装 Next.js ã§å®Ÿè£…ã—ã¦ä½¿ç”¨æ„Ÿ
react.dev ã®ã”紹介 – React
本日ã€React ã¨ãã®ãƒ‰ã‚ュメントã®æ–°ã—ã„ホームã¨ãªã‚‹ react.dev ã®ç«‹ã¡ä¸Šã’を発表ã™ã‚‹ã“ã¨ãŒã§ãã€å¤§å¤‰ã†ã‚Œã—ãæ€ã„ã¾ã™ã€‚ã“ã®è¨˜äº‹ã§ã¯ã€æ–°ã—ã„サイトã®è¦‹ã©ã“ã‚ã‚’ã”紹介ã—ã¾ã™ã€‚ tl;dr æ–°ã—ã„ React サイト (react.dev) ã§ã¯ã€é–¢æ•°ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆã¨ãƒ•ãƒƒã‚¯ã‚’用ã„ã¦ã€ãƒ¢ãƒ€ãƒ³ãª React ã‚’å¦ã¹ã¾ã™ã€‚ 図解ã€ã‚¤ãƒ©ã‚¹ãƒˆã€ãƒãƒ£ãƒ¬ãƒ³ã‚¸å•é¡Œã€ãã—㦠600 以上ã®æ–°ã—ã„インタラクティブãªã‚µãƒ³ãƒ—ルãŒå«ã¾ã‚Œã¦ã„ã¾ã™ã€‚ ã“ã‚Œã¾ã§ã® React ドã‚ュメントサイトã¯ã€legacy.reactjs.org ã«ç§»è»¢ã—ã¾ã—ãŸã€‚ æ–°ã—ã„サイトã€æ–°ã—ã„ドメインã€æ–°ã—ã„ホームページ ã¾ãšã¯å°‘々事務的ãªã¨ã“ã‚ã‹ã‚‰ã€‚ æ–°ã—ã„ドã‚ュメントã®ç«‹ã¡ä¸Šã’ã‚’ç¥ã†ãŸã‚ã«ã€ãã—ã¦ä½•ã‚ˆã‚Šã‚‚ã€å¤ã„コンテンツã¨æ–°ã—ã„コンテンツを明確ã«åˆ†é›¢ã™ã‚‹ãŸã‚ã«ã€ã‚ˆã‚ŠçŸã„ react.dev ドメインã«ç§»è¡Œã—ã¾ã—ãŸã€‚å¤ã„ reac
GitHub - zpao/qrcode.react: A <QRCode/> component for use with React.
type QRProps = { /** * The value to encode into the QR Code. An array of strings can be passed in * to represent multiple segments to further optimize the QR Code. */ value: string | string[]; /** * The size, in pixels, to render the QR Code. * @defaultValue 128 */ size?: number; /** * The Error Correction Level to use. * @see https://www.qrcode.com/en/about/error_correction.html * @defaultValue L
Reactベストプラクティスã®å®åº«ï¼ã€Œbulletproof-reactã€ãŒå‹‰å¼·ã«ãªã‚Šã™ãŽã‚‹ä»¶
Reactアプリケーションã®ã‚¢ãƒ¼ã‚テクãƒãƒ£ã®ä¸€ä¾‹ã¨ã—ã¦å…¬é–‹ã•ã‚Œã¦ã„ã‚‹GitHubリãƒã‚¸ãƒˆãƒªã€Œbulletproof-reactã€ãŒå¤§å¤‰å‹‰å¼·ã«ãªã‚‹ã®ã§ã€ç§è‡ªèº«ã®è¦‹è§£ã‚’交ãˆã¤ã¤ã‚·ã‚§ã‚¢ã—ã¾ã™ã€‚ ※2022å¹´11月追記 記事リリースã‹ã‚‰1å¹´ã»ã©çµŒéŽã—ã¦ã€æ–°ã—ã出ã¦ããŸæƒ…å ±ã‚„è€ƒãˆæ–¹ã‚’盛り込んã 続編記事を書ã„ã¦ã„ãŸã ã„ã¦ã„ã‚‹ã®ã§ã€ã“ã¡ã‚‰ã‚‚ä½µã›ã¦èªã‚“ã§ã„ãŸã ã‘ã‚Œã°ã¨æƒ³ã„ã¾ã™ï¼ˆ@t_keshiã•ã‚“ã‚ã‚ŠãŒã¨ã†ã”ã–ã„ã¾ã™ï¼ï¼‰ã€‚ ãƒ‡ã‚£ãƒ¬ã‚¯ãƒˆãƒªæ§‹é€ ãŒå‹‰å¼·ã«ãªã‚‹ ã¾ãšã¯ãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã”ã¨ã«ãƒãƒ©ã¤ããŒã¡ãªãƒ‡ã‚£ãƒ¬ã‚¯ãƒˆãƒªæ§‹é€ ã«ã¤ã„ã¦ã€‚ ソースコードã¯src以下ã«å…¥ã‚Œã‚‹ bulletproof-reactã§ã¯ã€Reactã«é–¢ã™ã‚‹ã‚½ãƒ¼ã‚¹ã‚³ãƒ¼ãƒ‰ã¯srcディレクトリ以下ã«æ ¼ç´ã•ã‚Œã¦ã„ã¾ã™ã€‚逆ã«è¨€ãˆã°ã€ãƒ«ãƒ¼ãƒˆãƒ‡ã‚£ãƒ¬ã‚¯ãƒˆãƒªã«componentsã‚„utilsã¨ã„ã£ãŸãƒ‡ã‚£ãƒ¬ã‚¯ãƒˆãƒªã¯ã‚ã‚Šã¾ã›ã‚“。 ãŸã¨ãˆã°Create Next Appã§ä½œæˆ
Reactコンãƒãƒ¼ãƒãƒ³ãƒˆã®Key(ã‚ー)ã®ä»˜ã‘æ–¹ - 無気力エンジニア
ã¯ã˜ã‚㫠最近Reactを勉強ã—始ã‚ã¦ã€map()ãªã©ã®ãƒ«ãƒ¼ãƒ—ã§ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆã‚’作æˆã™ã‚‹ã¨ãã«ã€Keyã¯ã©ã®ã‚ˆã†ã«ä»˜ã‘ã‚‹ã¹ããªã®ã‹ç–‘å•ã«æ€ã„ã€èª¿æŸ»ã—ãŸã“ã¨ã‚’ã¾ã¨ã‚ã¦ç´¹ä»‹ã—ã¾ã™ã€‚ ã¯ã˜ã‚ã« å‚考文献 インデックスをReactコンãƒãƒ¼ãƒãƒ³ãƒˆã®Keyã¨ã—ã¦ä½¿ç”¨ã—ãªã„ Keyã®å½¹å‰² インデックスをKeyã¨ã—ã¦ä½¿ç”¨ã™ã‚‹éš›ã®å•é¡Œ Keyã®ã‚·ãƒ³ãƒ—ルãªãƒ«ãƒ¼ãƒ« å‚考文献 ã“ã®è¨˜äº‹ã¯ä»¥ä¸‹ã®æƒ…å ±ã‚’å‚考ã«åŸ·ç†ã—ã¾ã—ãŸã€‚ React Best Practices & Tips Every React Developer Should Know Pt.2 インデックスをReactコンãƒãƒ¼ãƒãƒ³ãƒˆã®Keyã¨ã—ã¦ä½¿ç”¨ã—ãªã„ é…列ã®ã‚¤ãƒ³ãƒ‡ãƒƒã‚¯ã‚¹ã‚’ã€Reactコンãƒãƒ¼ãƒãƒ³ãƒˆã®Keyã¨ã—ã¦ä½¿ç”¨ã—ãªã„ã§ãã ã•ã„。map()やイテレータやループを使用ã—ãŸã¨ãã«ã€Keyã¨ã—ã¦ã‚¤ãƒ³ãƒ‡ãƒƒã‚¯ã‚¹ã‚’利用ã™ã‚‹ãƒ‘ターンã¯ã‚ˆã見られã¾ã™ã€‚ã¾ãŸã¯ã€Ma
Electron + Reactã§ãƒ‡ã‚¹ã‚¯ãƒˆãƒƒãƒ—アプリを作ã‚ã†ï¼ - Qiita
Electronã¨ã¯ï¼Ÿ Electronã¯ã€HTMLã€CSSã€JavaScriptを使ã£ã¦ã€Macã¨Windowsã®ä¸¡æ–¹ã§å‹•ãデスクトップアプリを作るã“ã¨ãŒã§ãるフレームワークã§ã™ã€‚Electronã¯Chromiumã¨Node.jsãŒãƒ™ãƒ¼ã‚¹ã¨ãªã£ã¦ãŠã‚Šã€Chromeã§å‹•ãページã§ã‚ã‚Œã°ãã®ã¾ã¾ãƒ‡ã‚¹ã‚¯ãƒˆãƒƒãƒ—アプリ化ã•ã›ã‚‹ã“ã¨ã‚‚å¯èƒ½ã§ã™ã€‚ 作æˆã—ãŸãƒ‡ã‚¹ã‚¯ãƒˆãƒƒãƒ—アプリã¯ã€Macã®AppStoreã‚„Microsoftã®ã‚¹ãƒˆã‚¢ã§å…¬é–‹ã™ã‚‹ã“ã¨ã‚‚å¯èƒ½ã§ã™ã€‚ â– å‰å›žã®è¨˜äº‹ Electronを使ã£ã¦Macã¨Windowsã§å‹•ãアプリを作ã£ã¦ã¿ã‚‹ https://qiita.com/udayaan/items/dfb324bc6cadeb9a8f6f Reactã¨ã¯ï¼Ÿ Reactã¯ã€UIを作るãŸã‚ã®JavaScriptã®ãƒ©ã‚¤ãƒ–ラリーã§ã™ã€‚Vue.jsã¨åŒã˜ãã€è¦ç´ をコンãƒãƒ¼ãƒãƒ³ãƒˆåŒ–ã—ã¦UIを作れるãŸã‚ã€ãƒ¡ãƒ³ãƒ†
useStateã§é…列è¦ç´ ã‚’è¿½åŠ ãƒ»å‰Šé™¤ãƒ»å¤‰æ›´ã™ã‚‹æ–¹æ³• - Qiita
ã¯ã˜ã‚㫠今回ã¯useStateã§é…列を更新ã™ã‚‹æ–¹æ³•ã«ã¤ã„ã¦ç´¹ä»‹ã—ã¦ã„ãã¾ã™ã€‚（個人開発ã®å‚™å¿˜éŒ²ã‚‚å…¼ãã¦ã„ã‚‹ã®ã§ã€ä½•ã‹æ°—ã¥ã„ãŸã“ã¨ãŒã‚ã‚Œã°æ•™ãˆã¦ã„ãŸã ã‘ã‚‹ã¨å¬‰ã—ã„ã§ã™ã€‚） useStateã§é…列è¦ç´ ã®æ›´æ–°ã‚’è¡Œã†å ´åˆã€pushãªã©ã‚’使用ã™ã‚‹ã¨å†æç”»ãŒèµ°ã‚Šã¾ã›ã‚“。ç†ç”±ã«ã¤ã„ã¦ã¯ã“ã¡ã‚‰ã«è©³ã—ã解説ãŒã‚ã‚Šã¾ã—ãŸã€‚ Reactã§ã¯stateã®å€¤ãŒå¤‰åŒ–ã—ãŸæ™‚ã«ã‚³ãƒ³ãƒãƒ¼ãƒãƒ³ãƒˆãŒå†æç”»ã•ã‚Œã¾ã™ã€‚ stateã®å€¤ã®å¤‰åŒ–ã‚’ã€Object.is() ã§åˆ¤å®šã—ã¦ã„ã‚‹ã¨ã®ã“ã¨ã§ã™ã€‚ãªã®ã§ã€pushã‚„spliceã§ã¯å‰å›žã¨åŒã˜å€¤ã¨åˆ¤å®šã•ã‚Œã‚‹ãã†ã§ã™ã€‚ ãã®ãŸã‚ã€pushãªã©ã¯ä½¿ç”¨ã›ãšã«ã€æ–°ãŸã«é…列を作æˆã—ã¦ä¿å˜ã™ã‚‹å¿…è¦ãŒã‚ã‚Šã¾ã™ã€‚ è¿½åŠ é…列ã«è¦ç´ ã‚’è¿½åŠ ã™ã‚‹å ´åˆã¯ã‚¹ãƒ—レット構文を使用ã—ã¾ã™ã€‚ const [fruits, setFruits] = useState(['ã‚Šã‚“ã”', 'ãƒãƒŠãƒŠ', 'ã„ã¡ã”']) con
Electron + React + TypeScript ã®é–‹ç™ºç’°å¢ƒæ§‹ç¯‰
% tree -a -I "node_modules" . ├── dist ├── package-lock.json ├── package.json ├── src │ ├── main.ts │ ├── preload.ts │ └── web │ ├── App.css │ ├── App.tsx │ ├── index.html │ └── index.tsx ├── tsconfig.json └── webpack.config.ts 3 directories, 10 files dist/: webpack ã®å‡ºåŠ›å…ˆãƒ•ã‚©ãƒ«ãƒ€ src/main.ts: メインプãƒã‚»ã‚¹ã®ã‚¨ãƒ³ãƒˆãƒªãƒ•ã‚¡ã‚¤ãƒ« src/preload.ts: プリãƒãƒ¼ãƒ‰ã‚¹ã‚¯ãƒªãƒ—ト src/web/: レンダラープãƒã‚»ã‚¹ (= React アプリケーション) ソースコード置ãå ´ tsconfig.json: Typ
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
Leaflet Pattern Fills
Reactプãƒã‚¸ã‚§ã‚¯ãƒˆã®ãŸã‚ã®æ–°ã—ã„é“: Bulletproof-React ãƒ‡ã‚£ãƒ¬ã‚¯ãƒˆãƒªæ§‹é€ ã®æŽ¢æ±‚ - Qiita
ã‚ャッシュをinvalidateã™ã‚‹ï½œTanStack Query　〜プãƒãƒ€ã‚¯ãƒˆã§æŽ¡ç”¨ã™ã‚‹ãŸã‚ã®å‹˜æ‰€ã€œ
GitHub - mohammed-io/frappe-gantt-react: A Wrapper for the awesome Frappe Gantt library
{{#tags}}- {{label}}
{{/tags}}