React Tags 开源项目教程
1. 项目的目录结构及介绍
React Tags 项目的目录结构如下:
react-tags/
├── .github/
│ └── workflows/
│ └── main.yml
├── demo/
│ ├── index.html
│ ├── index.js
│ └── styles.css
├── src/
│ ├── components/
│ │ ├── Tag.js
│ │ └── TagInput.js
│ ├── index.js
│ └── styles.css
├── .babelrc
├── .gitignore
├── LICENSE
├── package.json
├── README.md
└── webpack.config.js
目录结构介绍
- .github/workflows/: 包含 GitHub Actions 的工作流配置文件。
- demo/: 包含项目的演示文件,如
index.html
,index.js
, 和styles.css
。 - src/: 包含项目的主要源代码文件,如
components/
,index.js
, 和styles.css
。 - .babelrc: Babel 配置文件。
- .gitignore: Git 忽略文件配置。
- LICENSE: 项目许可证文件。
- package.json: 项目依赖和脚本配置文件。
- README.md: 项目说明文档。
- webpack.config.js: Webpack 配置文件。
2. 项目的启动文件介绍
项目的启动文件位于 demo/index.js
和 src/index.js
。
demo/index.js
这个文件是项目的演示入口文件,负责初始化和渲染 React 组件。
import React from 'react';
import ReactDOM from 'react-dom';
import TagInput from '../src/components/TagInput';
import '../src/styles.css';
const tags = ['JavaScript', 'CSS'];
ReactDOM.render(
<TagInput tags={tags} />,
document.getElementById('root')
);
src/index.js
这个文件是项目的主要入口文件,负责导出项目的主要组件。
export { default } from './components/TagInput';
3. 项目的配置文件介绍
package.json
这个文件包含了项目的依赖、脚本和其他配置信息。
{
"name": "react-tags",
"version": "6.7.0",
"description": "A fantastically simple tagging component for your React projects",
"main": "dist/index.js",
"module": "dist/index.es.js",
"scripts": {
"start": "webpack-dev-server --config webpack.config.js --mode development",
"build": "webpack --config webpack.config.js --mode production"
},
"dependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"@babel/core": "^7.14.6",
"@babel/preset-env": "^7.14.7",
"@babel/preset-react": "^7.14.5",
"babel-loader": "^8.2.2",
"webpack": "^5.38.1",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"
}
}
webpack.config.js
这个文件是 Webpack 的配置文件,负责项目的打包和开发服务器配置。
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js',
libraryTarget: 'commonjs2'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
externals: {