现有使用Blade模板的Laravel站点能否仅在部分视图中使用React？

你完全可以在保留现有Blade渲染其余视图的前提下，仅在部分视图中引入React，不需要对整站进行全量React重写，这种渐进式的接入方式本身也是React官方支持的使用场景。

• 首先配置Laravel自带的前端构建工具：如果是新版本Laravel用Vite，只需要安装react、react-dom、@vitejs/plugin-react依赖，在vite.config.js中引入React插件即可完成基础配置；旧版本用Laravel Mix的话也只需要添加对应的React编译预设即可。
• 然后在需要接入React的Blade视图中，预留React组件的挂载DOM节点，你可以直接把节点插入到Blade视图的任意位置，还可以通过自定义data属性把Blade端的变量作为初始参数传给React，示例如下：

  <!-- 原有Blade渲染的内容 -->
  <div class="legacy-blade-content">
    {{ $existingContent }}
  </div>
  <!-- React挂载节点 -->
  <div id="react-component-root" data-initial-props="{{ json_encode($reactProps) }}"></div>
  

• 编写React组件的入口文件，从挂载节点的dataset中拿到传入的初始参数，把React组件挂载到对应节点即可，示例如下：

  import { createRoot } from 'react-dom/client';
  import YourReactComponent from './components/YourReactComponent';
  
  const rootEl = document.getElementById('react-component-root');
  if (rootEl) {
    const initialProps = JSON.parse(rootEl.dataset.initialProps);
    createRoot(rootEl).render(<YourReactComponent {...initialProps} />);
  }
  

• 最后只在需要用到React的Blade视图中加载对应的编译后资源即可，不需要全局引入：

  @vite(['resources/js/your-react-entry.jsx'])
  

你甚至可以在同一个Blade页面中同时保留原有Blade渲染的业务内容和多个独立的React挂载节点，互不影响，无需调整现有已上线的业务逻辑。

内容的提问来源于stack exchange，提问作者Paul Chase