1、初始化react项目
npm install create-react-app -g
create-react-app react_demo
cd react_demo
npm run start
2、建立一个远程的空的仓库
在码云或GitHub上建立一个空的仓库。并将本地库和远程库关联。
在本地项目库中依次执行:
git init //初始化git仓库
git add ./
git commit -m 'first commit'
git remote add origin <远程库>
git push -u origin master
坑:如果这里报错没有权限。
可以通过如下命令生成:
ssh-keygen -t rsa -C "你的git邮箱"
拷贝生成的公钥到码云或GitHub中。
然后再推送就行了。
3、使用静态服务器
npm install serve -g 全局安装serve服务器
npm run build 打包
serve build 启动
4、引入ant Design
在create-react-app中使用ant Design
安装antd
yarn add antd
组件按需打包
下载依赖
yarn add babel-plugin-import react-app-rewired customize-cra
定义加载配置的JS模块:config-overrides.js
内容如下:
const { override, fixBabelImports } = require('customize-cra')
module.exports = override(fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css'
}))
修改package.json文件
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
使用antd 组件
App.js文件
import React from 'react';
import {Button} from 'antd'
// 应用根组件
function App() {
return (
<div>
<Button type="primary">这是一按钮</Button>
</div>
);
}
export default App;
yarn start 运行项目。
OK。
5、自定义antd主题
安装工具包
yarn add less less-loader
修改config-overrides.js文件。
重新运行项目:
6、引入路由
下载包
yarn add react-router-dom
新建2个组件:
login.jsx:
import React from 'react'
export default class Login extends React.Component{
render(){
return (
<div>登录组件</div>
)
}
}
home.jsx:
import React ,{Component} from 'react'
export default class Home extends Component{
render(){
return (
<div>主页面</div>
)
}
}
配置路由:
App.js文件修改如下:
import React from 'react';
import {BrowserRouter,Switch,Route} from 'react-router-dom'
import Login from './views/login/login'
import Home from './views/home/home'
// 应用根组件
function App() {
return (
<BrowserRouter>
<Switch>
<Route path='/login' component={Login}/>
<Route path='/' component={Home}/>
</Switch>
</BrowserRouter>
);
}
export default App;
访问 http://localhost:3001/login 默认端口是3000 。
访问 http://localhost:3001/
码云仓库:源码