Pengjielee's blog

添加 React

$ npm install react react-com

home/index.js

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  return <h1>About page - Rendered by React</h1>;
}

ReactDOM.render(<App />, document.getElementById('root'));

about/index.js

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  return <h1>Home page - Rendered by React</h1>;
}

ReactDOM.render(<App />, document.getElementById('root'));

更新webpack

1、安装依赖

$ npm install -D babel-loader @babel/preset-react -D

2、更新webpack.config.js，添加处理js后缀的loader

module.exports = {
  //...
    
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
              presets: ['@babel/preset-react'],
          },
        },
      }
    ],
  },

  //...
}

项目源码见（切换 tag 至 multi-page-app2）git checkout multi-page-app2： https://github.com/pengjielee/reactapp/tree/main/multi-pages