使用官方推荐的脚手架
create-react-app myapp
暴露webpack 配置
cd myapp && yarn eject
//按提示输入 y
yarn run v1.16.0
$ react-scripts eject
NOTE: Create React App 2+ supports TypeScript, Sass, CSS Modules and more without ejecting: https://reactjs.org/blog/2018/10/01/create-react-app-v2.html
? Are you sure you want to eject? This action is permanent. Yes
Ejecting...
修改 ./config/webpack.config.js
options
options: {
+ babelrc: true,
- babelrc: true,
configFile: false,
compact: false,
presets: [
[require.resolve('babel-preset-react-app/dependencies'),
{ helpers: true },
],
],
cacheDirectory: true,
cacheCompression: isEnvProduction,
// If an error happens in a package, it's possible to be
// because it was compiled. Thus, we don't want the browser
// debugger to show the original code. Instead, the code
// being evaluated would be much more helpful.
sourceMaps: false,
},
修改 package.json babel
配置
"babel": {
"presets": [
"react-app"
],
+ "plugins": [
+ [
+ "import",
+ {
+ "libraryName": "antd",
+ "style": "css"
+ }
+ ]
+ ]
}
安装依赖
//安装依赖
yarn add react-router axio less-loader antd babel-plugin-import
//启动项目
yarn start
报错与解决办法
出现错误 Cannot find module '@babel/plugin-transform-react-jsx-source'
先删除 node_node_modules
再次安装
rm -rf node_modules
yarn install
附上链接 Cannot find module ‘@babel/plugin-transform-react-jsx-source’ when running React App
按需引入组件
import React from 'react';
import logo from './logo.svg';
import './App.css';
import { DatePicker } from 'antd'
function App() {
return (
<div className="App">
<DatePicker />
</div>
);
}
export default App;
在组件内使用
在 /src/
下新建 page
文件夹下新建 home
文件夹新建 Home.js 和 index.css
Home.js
import React from 'react';
import { Layout, Menu, Breadcrumb, Icon } from 'antd';
import './index.css';
const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;
export default class SiderDemo extends React.Component {
state = {
collapsed: false,
};
onCollapse = collapsed => {
console.log(collapsed);
this.setState({ collapsed });
};
render() {
return (
<Layout style={
{ minHeight: '100vh' }}>
<Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
<div className="logo" />
<Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
<Menu.Item key="1">
<Icon type="pie-chart" />
<span>Option 1</span>
</Menu.Item>
<Menu.Item key="2">
<Icon type="desktop" />
<span>Option 2</span>
</Menu.Item>
<SubMenu key="sub1" title={
<span>
<Icon type="user" />
<span>User</span>
</span>
}>
<Menu.Item key="3">Tom</Menu.Item>
<Menu.Item key="4">Bill</Menu.Item>
<Menu.Item key="5">Alex</Menu.Item>
</SubMenu>
<SubMenu key="sub2" title={
<span>
<Icon type="team" />
<span>Team</span>
</span>
}>
<Menu.Item key="6">Team 1</Menu.Item>
<Menu.Item key="8">Team 2</Menu.Item>
</SubMenu>
<Menu.Item key="9">
<Icon type="file" />
<span>File</span>
</Menu.Item>
</Menu>
</Sider>
<Layout>
<Header style={
{ background: '#fff', padding: 0 }} />
<Content style={
{ margin: '0 16px' }}>
<Breadcrumb style={
{ margin: '16px 0' }}>
<Breadcrumb.Item>User</Breadcrumb.Item>
<Breadcrumb.Item>Bill</Breadcrumb.Item>
</Breadcrumb>
<div style={
{ padding: 24, background: '#fff', minHeight: 360 }}>Bill is a cat.</div>
</Content>
<Footer style={
{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
</Layout>
</Layout>
);
}
}
index.css
#components-layout-demo-side .logo {
height: 32px;
background: rgba(255, 255, 255, 0.2);
margin: 16px;
}
在 app中 引入组件
import React from 'react';
import Home from './page/home/Home'
import './App.css';
function App() {
return (
<div className="App">
<Home/>
</div>
);
}
export default App;
其他问题 Import in body of module; reorder to top import/first
将组件中所有 import
写在最前即可。