1，创建项目目录

mkdir my-react-app
cd my-react-app

2，初始化项目

npm init

3，安装 React 和 ReactDOM

npm install react react-dom

4，安装 Babel

npm install @babel/core @babel/preset-react @babel/preset-env babel-loader --save-dev

5，创建项目文件

6，配置 Babel

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

7，创建 React 组件

//在这里插入代码片 src/index.js
import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  return <h1>Hello, React!</h1>;
}

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

8，创建 HTML 文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>React App</title>
</head>
<body>
  <div id="root"></div>
  <script src="dist/bundle.js"></script>
</body>
</html>

9，创建 Webpack 配置

npm install webpack webpack-cli webpack-dev-server --save-dev

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
    ],
  },
  devServer: {
    contentBase: './dist',
    port: 3000,
  },
};

10，运行开发服务器

npx webpack-dev-server --mode development

11，查看应用

0 条评论