React Smooth DnD 项目教程

React Smooth DnD 项目教程

react-smooth-dndreact wrapper components for smooth-dnd项目地址:https://gitcode.com/gh_mirrors/re/react-smooth-dnd

1. 项目的目录结构及介绍

React Smooth DnD 项目的目录结构如下：

react-smooth-dnd/
├── examples/
│   ├── basic/
│   ├── container-as-wrapper/
│   ├── dynamic-container/
│   ├── max-items/
│   ├── nested/
│   ├── page-as-container/
│   ├── portal/
│   ├── pull-to-refresh/
│   ├── react-beautiful-dnd-migration/
│   ├── react-sortable-hoc-migration/
│   ├── rtl/
│   ├── simple/
│   ├── stress/
│   ├── test/
│   └── utils/
├── lib/
│   ├── Container.js
│   ├── Draggable.js
│   ├── index.js
│   ├── smooth-dnd.js
│   └── utils.js
├── src/
│   ├── Container.js
│   ├── Draggable.js
│   ├── index.js
│   ├── smooth-dnd.js
│   └── utils.js
├── .babelrc
├── .gitignore
├── .npmignore
├── .prettierrc
├── LICENSE
├── package.json
├── README.md
└── webpack.config.js

目录结构介绍

• examples/：包含多个示例项目，展示了 React Smooth DnD 的不同用法和场景。
• lib/：编译后的库文件，可以直接在项目中引用。
• src/：源代码目录，包含主要的组件和工具函数。
• .babelrc：Babel 配置文件。
• .gitignore：Git 忽略文件配置。
• .npmignore：NPM 忽略文件配置。
• .prettierrc：Prettier 代码格式化配置。
• LICENSE：项目许可证。
• package.json：项目依赖和脚本配置。
• README.md：项目说明文档。
• webpack.config.js：Webpack 配置文件。

2. 项目的启动文件介绍

项目的启动文件主要是 examples/ 目录下的各个示例项目。每个示例项目都有一个 index.js 文件作为入口文件。例如，examples/basic/index.js 是基本示例的入口文件。

基本示例的入口文件

import React from 'react';
import ReactDOM from 'react-dom';
import { Container, Draggable } from 'react-smooth-dnd';

const app = (
  <Container>
    {Array(5).fill().map((_, i) => {
      return (
        <Draggable key={i}>
          <div className="draggable-item">Draggable - {i}</div>
        </Draggable>
      );
    })}
  </Container>
);

ReactDOM.render(app, document.getElementById('root'));

3. 项目的配置文件介绍

package.json

package.json 文件包含了项目的依赖、脚本和其他配置信息。

{
  "name": "react-smooth-dnd",
  "version": "0.10.1",
  "description": "react wrapper components for smooth-dnd",
  "main": "lib/index.js",
  "module": "lib/index.js",
  "scripts": {
    "start": "webpack-dev-server --config webpack.config.js --mode development --open",
    "build": "webpack --config webpack.config.js --mode production",
    "test": "jest",
    "lint": "eslint src",
    "prepublishOnly": "npm run build"
  },
  "keywords": [
    "react",
    "smooth-dnd",
    "dnd",
    "drag",
    "drop",
    "drag and drop",
    "sortable",
    "draggable"
  ],
  "author": "Kutlu Sahin",
  "license": "MIT",
  "dependencies": {
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "smooth-dnd": "^0.10.1"
  },
  "devDependencies": {

react-smooth-dndreact wrapper components for smooth-dnd项目地址:https://gitcode.com/gh_mirrors/re/react-smooth-dnd