资料阅读:
UI组件名 : Ant Design of React react dva antd
npm 包管理使用介绍 http://www.runoob.com/nodejs/nodejs-npm.html
简介 Ant快速上手 淘宝镜像说明等http://ant-tool.github.io/setup.html
dva.js 导图 https://github.com/dvajs/dva-knowledgemap
如何构建一个 react 脚手架?
create-react-app 是一个全局命令行工具,用来创建一个新的项目。
react-scripts 是一个生成的项目所需要的开发依赖。
第一步:全局命令安装 用npm
npm install -g create-react-app
第二步:创建一个项目名称
Create-react-app karla-react
生成目录结构,没有配置webpack.config.js
第三步:运行程序
npm run start
第四步:分析
在 karla-react 这个项目的目录结构里面,public/index.html 是启动 http 服务的首页。浏览器的入口文件。src/index.js 是编译入口的文件。
http 服务器是自动打开浏览器的,react、es6、babel-core、webpack这些都没有配置和下载。react-script 会帮我们做这些。
如何构建一个 Ant Design React ?
第一步:安装脚手架工具
npm install antd-init -g
第二步:创建一个项目
初始化:mkdir antd-demo && cd antd-demo
antd-init (会自动安装 npm 依赖,若有问题则可自行安装)
如何构建一个 dva 的脚手架?一般用于企业项目,是react 和 redux的结合,出来的 dva。
命令提示分析:
antd-init@2 仅适用于学习和体验 antd,如果你要开发项目,推荐使用 dva-cli 进行项目初始化。dva 是一个基于 react 和 redux 的轻量应用框架,概念来自 elm,支持 side effects、热替换、动态加载等,已在生产环境广泛应用。
脚手架安装:
npm install dva-cli -g
dva new karla-test
cd myapp
npm start
如何用react创建一个组件?
npm i -g react-component-maker
//此时便会创建App组件
mkreact App
//此时你就分别创建了Header,Body,Footer三个组件
mkreact Header Body Footer