安装
npm init -y
npm i webpack webpack-cli webpack-dev-server -D
npm i @babel/plugin-proposal-class-properties -D
npm i html-webpack-plugin -D
npm i @babel/core babel-loader @babel/plugin-transform-runtime @babel/preset-env @babel/preset-react -D
npm install react react-dom @babel/runtime -S
// AntD 按需加载
npm i babel-plugin-import -D
npm i antd -S样式和图片
npm i style-loader css-loader -D
npm i node-sass sass-loader -D
npm i file-loader url-loader -D配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const htmlPlugin = new HtmlWebpackPlugin({
template: path.join(__dirname, './src/index.html'),
filename: 'index.html'
});
module.exports = {
mode: 'development',
devServer: {
compress: true,
port: 3000
},
plugins: [
htmlPlugin
],
module: {
rules: [
{
test: /\.jsx?$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.ttf|woff|woff2|eot|svg|jpg|png|gif|bmp$/i,
use: 'url-loader'
},
{
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: {
mode: 'local',
localIdentName: '[path][name]__[local]--[hash:base64:5]',
}
}
},
'sass-loader'
]
}
]
}
};tree -l 4 --ignore node_modules,dist
├── package-lock.json
├── package.json
├── README.md
├── src
| ├── components
| | ├── about => 关于
| | | └── index.jsx
| | ├── App.jsx => 根组件
| | ├── common => 公共组件
| | | ├── footer
| | | | └── index.jsx
| | | └── header
| | | ├── index.jsx
| | | └── style.scss
| | ├── home => 首页
| | | └── index.jsx
| | ├── movie => 电影
| | | ├── content.jsx
| | | ├── detail.jsx
| | | ├── index.jsx
| | | └── style.scss
| | └── style.css => 全局样式
| ├── index.html
| └── index.js => 入口文件
└── webpack.config.js
- 上：header
- 中
- 首页的内容
- 电影的内容
- 左：电影类型
- 右：对应列表
- 关于
- 下：footer
安装
npm i react-router-dom -S根据 Hash 高亮当前项
// 刷新高亮当前标题
<Menu defaultSelectedKeys={[location.hash.split('/')[1] || 'home']}></Menu>电影内页路由
// 注意 exact
<Switch>
<Route exact path={`${path}`} render={() => <Redirect to={`${path}/in_theaters/1`} />} />
<Route path={`${path}/detail/:id`} component={Detail} />
<Route path={`${path}/:type/:pnum`} component={PContent} />
</Switch>豆瓣接口
- 根路径：
https://api.douban.com - 正在热映：
/v2/movie/in_theaters?start=0&count=1 - 即将上映：
/v2/movie/coming_soon?start=0&count=1 - 排行榜：
/v2/movie/top250?start=0&count=1 - 电影详情：
/v2/movie/subject/26861685
解决跨域
// 解决跨域
npm i fetch-jsonp -S全局配置
// 挂载到入口或根组件上
import fetchJSONP from 'fetch-jsonp';
Component.prototype.$http = fetchJSONP;
Component.prototype.baseURL = 'https://api.douban.com';
Component.prototype.apikey = '0df993c66c0c636e29ecbb5344252a4a';- 点击分页
- 编程式导航
this.props.history.push(`/movie/${type}/${pnum}`);- 触发
componentWillReceiveProps - 获取数据
getMovieData()
注意容错处理
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent