让React代码在浏览器上运行

最新推荐文章于 2024-02-06 17:05:49 发布

程序员烧烤店

最新推荐文章于 2024-02-06 17:05:49 发布

阅读量1.2k

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_36967515/article/details/121719713

版权

1、Home文件

import React from 'react';
const Home = () => {
  return (
    <div>
      <div>hello world</div>
      <button onClick={() => alert('click')}>click</button>
    </div>
  )
}

export default Home;

2、创建client文件夹 index.js文件

import React from 'react';
import ReactDom from 'react-dom';
import Home from '../containers/Home';

// ReactDom.render(<Home />, document.getElementById('root'));
ReactDom.hydrate(<Home />, document.getElementById('root'));
// hydrate使用同构就不要使用render了

3、创建webpack.client.js

const path = require('path')
module.exports = {
  mode: 'development',
  entry: './src/client/index.js', // 入口
  output: { // 打包的文件要放在哪里去
    filename: 'index.js', // 打包之后起的名字
    path: path.resolve(__dirname, 'public') // 打包过后将文件放在哪个目录下
  },
  module: { // 打包过程中配置的规则
    rules: [{
      test: /\.js?$/, // 检测以JS结尾的文件
      loader: 'babel-loader', // 语法的编译器 使用需要安装
      exclude: '/node_modules/', // 一些外部文件不需要编译
      options: { // 配置额外的配置项
        presets: ['react', 'stage-0', ['env', {
          targets: { // babel编译的时候会去兼容浏览器最后两个版本
            browsers: ['last 2 versions']
          }
        }]] // 使用babel-loader的时候，可以使用presets配置一些编译的规则 需要安装
      }
    }]
  }
}

4、package.json 打包编译将文件打包值public文件下，可以在浏览器上运行

"scripts": {
    "dev": "npm-run-all --parallel dev:**",
    "dev:start": "nodemon --watch build --exec node \"./build/bundle.js\"",
    "dev:build:server": "webpack --config webpack.server.js --watch",
    "dev:build:client": "webpack --config webpack.client.js --watch"
  },

5、src/index.js引入

import express from 'express';
import Home from './containers/Home';
import React from 'react';
import {renderToString} from 'react-dom/server';

const port = 3001;
const app = express();
app.use(express.static(('public'))); // 只要express访问的是一个静态文件，就回去public的文件下去找

const content = renderToString( < Home / > );

app.get('/', (req, res) => {
  res.send(`
    <html>
      <title>SSR</title>
      <body>
        <div id="root">${content}</div>
        <script src="./index.js"></script>
      </body>
    </html>
  `);
});

app.listen(port, () => {
  console.log(`访问地址是  http://localhost:${port}`)
});

程序员烧烤店

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
让React代码在浏览器上运行

1、Home文件import React from 'react';const Home = () => { return ( <div> <div>hello world</div> <button onClick={() => alert('click')}>click</button> </div> )}export default Home;2、创建
复制链接

扫一扫