让React代码在浏览器上运行

1、Home文件

import React from 'react';
const Home = () => {
  return (
    

      
hello world
       alert('click')}>click
    
  )
}

export default Home;

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

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

// ReactDom.render(, document.getElementById('root'));
ReactDom.hydrate(, 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(`
    
      
      
        
${content}
        
      
    
  `);
});

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