react如何接入项目

创建React项目

使用create-react-app快速初始化项目：

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

适用于全新项目，自动配置Webpack、Babel等工具。

现有项目集成React

通过npm或yarn安装React依赖：

npm install react react-dom

在HTML中引入React根节点：

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

通过JavaScript初始化：

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

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

配置模块打包工具

若需自定义配置（如Webpack），安装必要loader：

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

在Webpack配置中添加规则：

module: {
  rules: [{
    test: /\.(js|jsx)$/,
    use: 'babel-loader',
    exclude: /node_modules/
  }]
}

使用TypeScript支持

通过create-react-app的TypeScript模板：

npx create-react-app my-app --template typescript

或手动安装类型定义：

npm install @types/react @types/react-dom --save-dev

服务端渲染（SSR）配置

使用框架如Next.js简化SSR：

npx create-next-app@latest

或手动配置Node.js服务端渲染环境，需处理hydrate等API。

状态管理集成

安装Redux或MobX等库：

npm install redux react-redux

在入口文件中注入Provider：

import { Provider } from 'react-redux';
import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);