问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何在前后端未分离的项目引入react？

头像
及时行乐
    1411
    新手上路，请多包涵

    目前老旧系统是php前后端未分离，前端之前使用的jq，现在打算用react重构，但周期较长，所以在新任务上或者部分react重构，这样就有一个问题，就是react重构部分如何与前后端未分离部分数据共享，另外部署和第一次访问的时候，react部分的加载问题？如何可以解决呢？

    前端javascriptreactjquery
    阅读 2.9k
    4 个回答
    得票最新
    头像
    piglet
      1133

      reactjs 是可以直接引入的

      • 首先你要引入 reactjs 的核心依赖，主要是 react 和 react-dom
      • 指定一个 react 的容器元素，挂载应用
      • 参考 https://reactjs.org/docs/add-...
      • 这个时候你是不能使用 jsx 的，之后你可以添加 babel 的依赖，这样就支持 jsx 了
      头像
      ugrg
        21
        新手上路，请多包涵

        这是一个现在非常常见的问题，旧系统还在，新系统不可能一次性完成切割，所以想引用React这类第三代前端框架非常麻烦。
        我推荐你采用局部切换的方案，一个页面一个页面的切换过去。
        首先，你可以使用create-react-app或其他方法新建一个独立的react项目，然后编辑好相关的页面及路由。然后在你的web容器里(nginx或apache等)进行配置，将对应的内容引导到指定目录，这样你就可以在一个网站同时并存两套代码了。
        当然，piglet给你的方案也是一个办法，不过这方案更倾向于把React当作jquery来使用，但React实际带给我们的是一整套工程化的思想，所以如果你只是用了他的依赖库而没有使用他的工程思想，你得到的将会是一个不完整的React。

        头像
        陟上晴明
          21.7k145291
          头像
          Hannibal
            484

            如果想在前后端未分离的项目中引入 React，可以通过以下步骤实现：

            在项目中安装 React 和相关依赖，如 React DOM：

            npm install react react-dom

            在项目中新建一个组件，使用 React 语法来编写组件的逻辑。例如：

            import React from 'react';

class MyComponent extends React.Component {
  render() {
    return <h1>Hello, world!</h1>;
  }
}

            在项目的 HTML 页面中引入 React 组件，并在相应的位置渲染组件：

            <body>
  <div id="root"></div>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="path/to/my-component.js"></script>
  <script>
    ReactDOM.render(<MyComponent />, document.getElementById('root'));
  </script>
</body>

            在这里，我们通过 script 标签引入了 React 和 React DOM 的库文件，并使用 ReactDOM.render() 方法将组件渲染到页面的 #root 元素中。

            注意：以上只是一个简单的示例。

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题