飞冰默认使用 ice-scripts 作为开发工具,但是如果你想使用社区的 create-react-app 开发项目,我们也在 Iceworks 里提供了基于 create-react-app 的模板,支持按需引入飞冰基础组件,添加区块等能力。

初始化项目

在 Iceworks 模板界面选择 create-react-app 模板,以该模板创建项目

Iceworks

预览

创建项目后,可以在 Iceworks 项目界面启动调试服务, 会自动打开浏览器窗口,看到如下页面说明创建项目成功

create-react-app

添加区块

使用 Iceworks create-react-app 模板创建的项目与官方 create-react-app 模板基本保持一致,不同的点在于使用了 react-app-rewired 进行自定义配置,支持按需引入 ICE 基础组件,目录结构如下:

目录结构

  1. .
  2. ├── README.md
  3. ├── .gitignore
  4. ├── config-overrides.js
  5. ├── package.json
  6. ├── public
  7. ├── favicon.ico
  8. ├── index.html
  9. └── manifest.json
  10. ├── rewire-scss.js
  11. └── src
  12. ├── App.css
  13. ├── App.js
  14. ├── App.test.js
  15. ├── index.css
  16. ├── index.js
  17. ├── logo.svg
  18. └── registerServiceWorker.js

添加区块

通过 Iceworks 新建页面添加的区块默认会在项目 src 下新建 pages 目录,用于存放添加的区块,如添加一个 TabTable 区块后,目录结构如下:

  1. .
  2. └── src
  3. ├── pages/ // 新增 pages 目录
  4. ├── App.css
  5. ├── App.js
  6. ├── App.test.js
  7. ├── index.css
  8. ├── index.js
  9. ├── logo.svg
  10. └── registerServiceWorker.js

使用 create-react-app 模板创建的项目默认只支持添加区块;接下来,可以按照你熟悉的开发方式自定义开发。