[微前端实战]---035react16-资讯,视频,视频详情

react16 - 资讯视频视频详情页面

文章目录

- react16 - 资讯视频视频详情页面

零. 回顾

讲解了vue2,vue3 两个子应用开发.

vue2----开发新能源页面

vue3----开发选车,首页页面

vue3与vue2开发,

可以使用data,method和写vue2一样开发子应用
也可以使用setup/ composition API方式开发子应用

一. 项目目录

新建项目目录如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DcsOARhi-1660972837944)(img/image-20220820132026998.png)]

二.创建项目

$	create-react react15
1

然后进入react15 项目中执行命令

启动项目

$	npm run start
1

三.基础配置

3.1 package.json

{
  "name": "react16",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "cross-env NODE_ENV=development webpack-dev-server --mode production"
  },
  "dependencies": {
    "node-sass": "^5.0.0",
    "react": "15.6.2",
    "react-dom": "15.6.2",
    "sass-loader": "^6.0.7"
  },
  "devDependencies": {
    "@babel/core": "^7.7.2",
    "@babel/plugin-transform-react-jsx": "^7.7.0",
    "@babel/preset-env": "^7.7.1",
    "@babel/preset-react": "^7.10.4",
    "babel-loader": "^8.0.6",
    "cross-env": "^6.0.3",
    "css-loader": "^3.2.0",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.8.0",
    "react-redux": "^7.2.4",
    "react-router": "^3.2.0",
    "style-loader": "^1.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  },
  "license": "ISC"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

webpack.config.js


const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  entry: {
    path: ['./index.js']
  },
  module: {
    rules: [
      {
        test: /\.js(|x)$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      },
      {
        test: /\.(c|sc)ss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: {
          loader: 'url-loader',
        }
      }
    ]
  },
  optimization: {
    splitChunks: false,
    minimize: false
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    }),

    new MiniCssExtractPlugin({
      filename: '[name].css'
    })
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'react15.js',
    library: 'react15',
    libraryTarget: 'umd',
    umdNamedDefine: true,
    publicPath: 'http://localhost:8080/'
  },
  devServer: {
    // 配置允许跨域
    headers: { 'Access-Control-Allow-Origin': '*' },
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 8080,
    historyApiFallback: true,
    hot: true,
  },
  performance: {   //  就是为了加大文件允许体积，提升报错门栏。  
    hints: "warning", // 枚举
    maxAssetSize: 500000000, // 整数类型（以字节为单位）
    maxEntrypointSize: 500000000, // 整数类型（以字节为单位）
    assetFilter: function(assetFilename) {
      // 提供资源文件名的断言函数
      return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
    }        
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

3.2 实例代码

router/index1.jsx

import React from 'react'
import { Router, Route, hashHistory } from 'react-router';

import App from '../pages/App/index.jsx'

class BasicMap extends React.Component {
  render() {
    return (
      <Router history={hashHistory}>
        <Route path='/' component={App}/>
      </Router>
    )
  }
}

export default BasicMap
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

index.js:入口函数

import React from 'react'
import ReactDOM from 'react-dom'
import BasicMap from './src/router/index1.jsx';
import "./index.scss"

const render = () => {
  ReactDOM.render((
    <BasicMap />
  ), document.getElementById('app-react'))// 挂载到`public` app-react 节点
}
render()
1
2
3
4
5
6
7
8
9
10
11

public/index.html

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>react15title>
  head>
  <body>
    <noscript>
      <strong>We're sorry but sub-app1 doesn't work properly without JavaScript enabled. Please enable it to continue.strong>
    noscript>
    <div id="app-react">div>
    
  body>
html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

pages/App/index.jsx

import React from 'react'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {

    }
  }
  componentDidMount() {
  
  }

  render() {
    return (
      
       this is react app
      
    )
  }
}

export default App

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

访问http://localhost:8080/#/,查看项目是否配置成功.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yG2JomL9-1660972837946)(img/image-20220819075734586.png)]

react15 初始化

四.项目查看

这里导入先前代码, 查看结果

feat: 导入之前的项目配置(完成react16)

/information

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Le1Fn6xt-1660972837947)(img/image-20220820124340510.png)]

/information-last

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pGsvU8es-1660972837948)(img/image-20220820124414142.png)]

/video

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VlU0kCAY-1660972837949)(img/image-20220820124512121.png)]

video-last

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hU2RyUF8-1660972837950)(img/image-20220820124548960.png)]

相关阅读:
VSCODE 系列（一）VSCODE下载和安装
 mapbox使用marker创建html点位信息
 1 开发环境搭建与初识Vue
C#开发的OpenRA游戏之调试菜单1
C++11新特性详细
 效率至少提高2倍！最实用的Linux命令合集
 Excel中的HLOOKUP、VLOOKUP、XLOOKUP函数
 cf：H. Maximal AND【位运算练习 + k次操作 + 最大And】
【FFmpeg】AVFrame结构体
 27：尽量少做转型动作
原文地址：https://blog.csdn.net/qq_35812380/article/details/126438719