React 指南

蚂蚁金服React框架 蚂蚁金服UI

第一步 创建一个新的React项目

How To Creat A New React App ?

You’ll need to have Node 8.10.0 or later

you may choose one of the following methods:

npx

npx create-react-app my-app

npm

npm init react-app my-app

Yarn

yarn create react-app my-app

then

cd my-app
npm start

Open http://localhost:3000 to view it in the browser.

It will create a directory called my-app inside the current folder.

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
└── serviceWorker.js

Builds the app for production to the build folder.

npm run build

二 引入mock

Mock设置教程

三 路由

React-Router设置教程

React Router 安装命令

npm install -S react-router

在js中引入

import { Router } from 'react-router';

render(<Router/>, document.getElementById('app'));

四 使用UmiJS 快速构建项目

官方文档UmiJS

1.安装 umi

yarn global add umi # or npm install -g umi

2.通过 umi 脚手架构建一个项目

 yarn create umi

3.然后手动安装依赖

yarn

4. 通过 yarn start 启动本地开发

yarn start

如果顺利，在浏览器打开 http://localhost:8000 可看到界面

五 dva

引入dva管理数据

六 anti.design

官方文档Anti.Design

引入anti.design，使用组建快速构建UI界面