案例--react电影小项目_react项目案例

作者：煮酒与君饮 | 2024-06-29 23:53:01

踩

react项目案例

技术栈

使用react框架来完成本次项目的实现，使用技术有如下一些：

nodejs 进行模拟接口数据(代理)

react react-dom

react-router-dom

redux react-redux redux-thunk immutable redux-immutable

styled-components(css作用域)/sass/less/stylus

antd-mobile ui组件库(移动端)

react-transition-group

axios

http-proxy-middleware

配置装饰器(costomize-cra react-app-rewired) 等等

开发环境

开发环境为：windows

开发工具：vscode/webstorm + jsx插件

开发调试工具：chrome浏览器 react-devtools，redux-devtools

开发运行环境：node环境

代码管理：git

上线环境：linux + nginx

项目初始化

npm i -D customize-cra react-app-rewired http-proxy-middleware

npm i -S redux react-redux redux-thunk styled-components immutable redux-immutable react-router-dom@5 react-transition-group axios

配置装饰器支持

装饰器@ es8的预案，现在还没通过。【类】组件的。

装饰器是一种函数，写成 @函数名。它可以放在类和类方法的定义前面。react脚手架创建的项目【默认是不支持装饰器】，需要手动安装相关模块和添加配置文件。

安装

npm i -D customize-cra react-app-rewired

修改package.json文件中scripts命令


"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

在项目根目录中添加config-overrides.js配置文件

此文件就是react工程用于增量配置react中的webpack配置，

可以理解为就是webpack.config.js的扩展文件，是给node所用，commonjs规范。


const {resolve}= require('path')
const {addDecoratorsLegacy, override} = require('customize-cra')
 
const customize = () => (config) => {
  config.resolve.alias['@'] = resolve('./src')
  return config
}
 
module.exports = override(
    addDecoratorsLegacy(),
    customize()
)

如果想要用@有代码提示

jsconfig.json要配置,和vue一样

跨域解决方案

jsonp(模拟get)/CORS(跨域资源共享)靠死/代理/iframe/postMessage/window.name/WebSocket

react的代理实现跨域

在配置在src/setupProxy.js文件，并通过npm安装http-proxy-middleware,代理中间件模块

创建 src/setupProxy.js

安装模块

npm i -S http-proxy-middleware


const {createProxyMiddleware: proxy} = require('http-proxy-middleware')
 
module.exports = app => {
  app.use('/api', proxy({
    target: 'http://localhost',
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''
    }
  }))
}