[React + Typescript] react-beautiful-dnd を使ã£ã¦ãƒ‰ãƒ©ãƒƒã‚°ï¼†ãƒ‰ãƒãƒƒãƒ—機能を実装ã™ã‚‹ | DevelopersIO[React + Typescript] react-beautiful-dnd を使ã£ã¦ãƒ‰ãƒ©ãƒƒã‚°ï¼†ãƒ‰ãƒãƒƒãƒ—機能を実装ã™ã‚‹ React + Typescript ã§å®Ÿè£…ã•ã‚ŒãŸãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã«react-beautiful-dndを使ã£ãŸãƒ‰ãƒ©ãƒƒã‚°ï¼†ãƒ‰ãƒãƒƒãƒ—機能を実装ã—ã¾ã—ãŸã€‚ 全体ã®æµã‚Œ 本記事ã§ã‚„ã‚‹ã“ã¨ã®å…¨ä½“ã®æµã‚Œã§ã™ã€‚ React + Typescript ã§ç°¡å˜ãªç”»åƒã®ãƒªã‚¹ãƒˆã‚’作æˆã™ã‚‹ react-beautiful-dndã‚’å°Žå…¥ã—ã¦ãƒªã‚¹ãƒˆã®ã‚¢ã‚¤ãƒ†ãƒ をドラッグ＆ドãƒãƒƒãƒ—ã§ãるよã†ã«ã™ã‚‹ æˆæžœç‰© React + Typescript プãƒã‚¸ã‚§ã‚¯ãƒˆã®é››å½¢ã‚’作æˆã™ã‚‹ ドラッグ＆ドãƒãƒƒãƒ—を実装ã™ã‚‹å‰æº–å‚™ã§ã™ã€‚ create react app コマンドã§ãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã®é››å½¢ã‚’作æˆã—ã¾ã™ã€‚言語㯠Typescript を指定ã—ã¾ã™ã€‚ npx create-react-app sample_dd
![[React + Typescript] react-beautiful-dnd を使ã£ã¦ãƒ‰ãƒ©ãƒƒã‚°ï¼†ãƒ‰ãƒãƒƒãƒ—機能を実装ã™ã‚‹ | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/406d924d7d4c6327201a8281e75820982243f551/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F01%2Freact.jpg)
Reactã®ãƒ‰ãƒ©ãƒƒã‚°ï¼†ãƒ‰ãƒãƒƒãƒ—ライブラリã€dnd kitã®ä½¿ã„方をユースケースã‹ã‚‰ç†è§£ã™ã‚‹
{{#tags}}- {{label}}
{{/tags}}