https://github.com/tinspham209/play-around-react-dnd
Practice Drag & Drop with react-dnd & diagrams
https://github.com/tinspham209/play-around-react-dnd
beautiful-react-diagrams immutability-helper react-dnd redux-toolkit
Last synced: 3 months ago
JSON representation
Practice Drag & Drop with react-dnd & diagrams
- Host: GitHub
- URL: https://github.com/tinspham209/play-around-react-dnd
- Owner: tinspham209
- Created: 2020-09-11T19:59:03.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-12-15T20:12:16.000Z (over 1 year ago)
- Last Synced: 2025-01-18T05:43:48.746Z (4 months ago)
- Topics: beautiful-react-diagrams, immutability-helper, react-dnd, redux-toolkit
- Language: JavaScript
- Homepage:
- Size: 356 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Mini Project: Practice Drag & Drop with react-dnd
## Date: 10 ~~>> 12 - Sep - 2020
### Functions
- Drag item from List and Drop to Container
- Drag Item Around in Container
- Study react-dnd
- study useContext for state management
- study redux toolkit for state management
### Screenshot
### Tech-Stack
- React Hooks
- immutability-helper : Mutate a copy of data without changing the original source
- react-dnd
- react-redux
- @reduxjs/toolkit
### Plan Of Action
- Read document of react-dnd
- Initial Box component
- useMemo for BoxStyle
- Initial Container
- Display box in Container
- Drag box around in Container
- Initial List component
- useMemo for ListStyle
- Drag item from List and Drop to Container
- Display item currently dnd to Container
- Read Document of immutability-helper
- use immutability-helper to add newItem to boxes
- check isDragBox and isDragList
- useContext for state management : isDragBox, isDragList
- Read Document of react-redux
- Read Document of redux toolkit
- update state management with Redux-toolkit
- setBoxDragging
- setListDragging
- addItemBox
- use immutability-helper to add newItem to boxItems
- setNewLocationItem
- use immutability-helper to update location of item in boxItems
### Directory Structure
```
.
├── .gitignore
├── package.json
├── README.md
├── public
└── src
├── app
└── store.js
├── components
├── Box.jsx
├── BoxSlice.js
├── Container.jsx
├── List.jsx
└── index.jsx
├── App.js
├── ItemTypes.js
└── index.js
```
### Set up
Use the cmd line to clone repo to your computer
```
git clone [github_repo_url]
```
Use the cmd line to install dependencies.
```
npm install
```
Run in cmd for start the dependencies server
```
npm start
```