React Markdown 项目教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00049/article/details/139084156

React Markdown 项目教程

react-markdown Markdown editor (input) based on React 项目地址: https://gitcode.com/gh_mirrors/reac/react-markdown

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

react-markdown/
├── .circleci/
│   └── config.yml
├── scripts/
│   └── gh-pages/
├── src/
│   └── client/
├── www/
├── .editorconfig
├── .env.js
├── .eslintignore
├── .eslintrc
├── .gitattributes
├── .gitignore
├── CHANGELOG.md
├── KNOWNISSUES.md
├── LICENSE
├── README.md
├── demo.gif
└── package.json

目录结构介绍

.circleci/: 包含 CircleCI 的配置文件 config.yml，用于持续集成和部署。
scripts/: 包含用于部署到 GitHub Pages 的脚本。
src/: 项目的源代码目录，包含客户端代码。
www/: 包含项目的静态资源文件。
.editorconfig: 编辑器配置文件，用于统一代码风格。
.env.js: 环境变量配置文件。
.eslintignore: ESLint 忽略文件列表。
.eslintrc: ESLint 配置文件。
.gitattributes: Git 属性配置文件。
.gitignore: Git 忽略文件列表。
CHANGELOG.md: 项目更新日志。
KNOWNISSUES.md: 已知问题列表。
LICENSE: 项目许可证文件。
README.md: 项目说明文件。
demo.gif: 项目演示 GIF 文件。
package.json: 项目依赖和脚本配置文件。

2. 项目的启动文件介绍

项目的启动文件主要是 package.json 中的 scripts 部分。以下是一些关键的启动脚本：

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

启动文件介绍

start: 启动开发服务器，用于本地开发。
build: 构建生产环境的代码。
test: 运行测试脚本。
eject: 弹出 React 脚手架配置，允许用户自定义配置。

3. 项目的配置文件介绍

.env.js

module.exports = {
  REACT_APP_API_URL: process.env.REACT_APP_API_URL || 'http://localhost:3000',
};

.eslintrc

{
  "extends": "react-app",
  "rules": {
    // 自定义 ESLint 规则
  }
}

package.json

{
  "name": "react-markdown",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}