react如何接入项目

安装 React

确保已安装 Node.js（建议版本 12 或更高）。通过以下命令创建新的 React 项目：

npx create-react-app my-app
cd my-app
npm start

现有项目集成

在现有项目中通过 npm 或 yarn 安装 React 核心库：

npm install react react-dom

在 HTML 文件中添加根节点容器：

<div id="root"></div>

配置 Babel 和 Webpack

若需自定义构建流程，安装 Babel 和 Webpack 并配置：

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

创建 webpack.config.js：

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

编写 React 组件

创建 src/App.js 文件：

import React from 'react';

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

export default App;

在入口文件 src/index.js 中渲染组件：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

运行与构建

开发模式下启动项目：

npm start

生产环境构建：

npm run build