未加星标

有个功能丰富的 react 脚手架,了解下?

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

想要快速开始 react 多页面应用?

项目结构如何更合理?

想要快速上手 Mobx?

想要快速使用 TypeScript?

想要一键使用 Ant-Design 并能快速自定义主题样式?

可以的!!!

这里,受 Vue-cli 和 create-react-app 的启发,我做了这样一个 react 的脚手架 handy-cli ,让你一键搭建项目,快速开始。

特性

简单易用,零配置

丰富的特性可供选择 (Ant Design,TypeScript,Mobx,EsLint,TsLint)

支持导出 webpack 相关配置到项目目录下

多页面的支持

提供多种状态管理方式

使用 ant-design 后,非常容易定制化 ant-design 主题

支持代码保存时和代码提交时校验代码风格

安装 npm install handy-cli -g yarn add handy-cli -g 复制代码

项目地址

使用 handy create <new-app> cd <new-app> npm run start 复制代码 预览
有个功能丰富的 react 脚手架,了解下?
使用手册 Folder Structure

运行 handy create you-app-name (例如选择了 ant-design、eslint、mobx),handy-cli 会生成如下项目结构

├── node_modules ├── public ├── modifyVars.json ├── package.json ├── readme.md ├── .eslintrc ├── .gitignore └── src ├── components │ ├── ResultItem │ │ └── ResultItem.js │ └── Scroll │ └── Scroll.js ├── modules │ └── mobxGitSearch │ ├── components │ │ ├── ResultList │ │ │ └── ResultList.js │ │ └── Search │ │ └── Search.js │ └── index.js ├── pages │ └── index │ ├── index.js │ └── routes.js ├── stores │ └── SearchGitStore.js └── utils └── index.js 复制代码

在 src 目录下,有如下子目录

components(公共组件目录), 多个路由页面都会用到的公共组件放在这

modules(路由页面目录),modules 下的每一个子文件夹代表一个单一的路由页面,比如 Dashboard 页面,欢迎页面

pages(多页面文件夹), 每一个子文件夹代表一个单一的 SPA 项目 ,主要存放 SPA 的入口文件

stores(存放 mobx 的 stores)

utils

注意

上面说的这些目录已经配置在 config.resolve.alias ,所以,在代码中不需要指定相对路径了

in src/modules/mobxGitSearch/index.js import {shake} from "utils" 复制代码

not

in src/modules/mobxGitSearch/index.js import {shake} from "../utils" 复制代码 Single And Multi Page

使用 handy-cli 初始化项目后,src/pages 下只有一个 index 文件夹,也就是是个单页应用,要想添加新的独立的单页面很简单

例如,在 src/pages 下新建 doule12 文件夹

src ├── pages └── index │ ├── index.js │ └── routes.js ├── doule12 │── index.js in src/pages/doule12/index.js. ReactDOM.render( <h1>double 12</h1>, document.getElementById("root"), ); if (module.hot) { module.hot.accept(() => {}); } 复制代码

重启服务后访问 localhost:3000/doble12 就可以看到新加的页面,而 localhost:3000 是默认的单页面

Eject

如果你想修改一些 webpack 的配置,在项目根目录,确认代码已经 commit 后,可以执行 handy eject 来导出 webpack 的相关配置

Linter

支持 Tslint 和 Eslint

如果在创建项目时选择了使用 Typescript,代码校验就只提供 Tslint,要是没选 TypeScript,就提供 Eslint 供选择,Eslint 相关的提供了 eslint with airbnb config 和 eslint with prettier config ,推荐使用 airbnb config

要想修改一些校验规则,可以修改项目根目录下的.eslintrc 或者 tslint.json

检测时机

可以选择在代码保存或者提交代码的时候校验,为了代码更快的编译,在提交时校验比较好。提交代码校验的相关配置在 package.json 中

"husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "linters": { "*.{js,jsx}": [ "eslint --fix", "git add" ] }, "ignore": [ "**/build/**.js" ] } 复制代码 State Management

可供选择的状态管理方式

Normal(the build in Context API)

Mobx

Dva(开发中))

Use Ant Design

handy-cli 提供了 ant-design 的 按需使用加载 ,创建项目时选择了 ant-design 后可以零配置的直接使用

+ import { Pagination } from "antd"; + <Pagination total={100} /> <Search /> 复制代码 自定义 ant-design 的样式主题

如果选择了使用 ant-design,在项目根目录下会有个 modifyVar.json 文件,在 这里定义的那些 less 样式变量 ,都可以在 modifyVar.json 中赋予新值,保存后, 不用重启服务,自动会重启 ,页面样式就变了

Styles And Modules

支持 less,sass,stylus and css modules

注意: 如何想使用 css modules,样式文件要以 .module.css 、 .module.less、 .module.sass、.module.styl 作为后缀

Proxy

开发时要代理到后端服务,在 package.json 中新增 proxy 字段,如下

"proxy": "http://localhost:4000", or proxy: { '/api': { target: '<url>', pathRewrite:{ 'api':'' }, changeOrigin: true }, '/foo': { target: '<other_url>' } } 复制代码

see more proxy options

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

代码区博客精选文章
分页:12
转载请注明
本文标题:有个功能丰富的 react 脚手架,了解下?
本站链接:https://www.codesec.net/view/611610.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(65)