CodeIgniter 应用程序开发得更早，当时没有计划集成 ReactJS。后来添加了一个要求，将另一个 ReactJS 项目与此后端集成并替换当前前端（视图）。
CodeIgniter 应用程序不是作为 RESTful API 完成的。.php 视图文件无法替换为 reactjs 应用程序的 .js 文件，因为服务器是 Apache。运行 nodejs 服务器不会呈现 CodeIgniter 视图。
Bootstrap、jquery 和简单的 javascript 可以包含在 CodeIgniter 应用程序的视图中。但是是否可以用 javascript 文件替换 CodeIgniter 中的 PHP 视图文件？
PHP 视图文件不需要替换为 js 文件。可以使用<script>标签轻松地将 JavaScript 添加到 PHP 文件中。下面是CodeIgniter 应用程序中的Add React in One Minute演示。
要将 React 演示集成到 CodeIgniter 中，请从一个简单的控制器开始 - React.php
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class React extends CI_Controller
{
public function index()
{
$this->load->view('react_view');
}
}
“视图”文件直接来自 React 演示，但它放在一个 .php 文件而不是 .html 中。
对演示代码所做的唯一更改是在页面底部的脚本标记中。我的assets文件夹与 CodeIgniter 的/application文件夹处于同一级别。有assets用于 css、js 和图像的子文件夹。
/public_html
/application
/system
/assets
/js
/css
/img
所以我已经更改了src加载的标签like_button.js以使用我的文件布局。
“视图”文件react_view.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
</head>
<body>
<h2>Add React in One Minute</h2>
<p>This page demonstrates using React with no build tooling.</p>
<p>React is loaded as a script tag.</p>
<p>
This is the first comment.
<!-- We will put our React component inside this div. -->
<div class="like_button_container" data-commentid="1"></div>
</p>
<p>
This is the second comment.
<!-- We will put our React component inside this div. -->
<div class="like_button_container" data-commentid="2"></div>
</p>
<p>
This is the third comment.
<!-- We will put our React component inside this div. -->
<div class="like_button_container" data-commentid="3"></div>
</p>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component. -->
<script src="assets/js/like_button.js"></script>
</body>
</html>
/assets/js/like_button.js
'use strict';
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
}
render() {
if (this.state.liked) {
return 'You liked comment number ' + this.props.commentID;
}
return e(
'button',
{ onClick: () => this.setState({ liked: true }) },
'Like'
);
}
}
// Find all DOM containers, and render Like buttons into them.
document.querySelectorAll('.like_button_container')
.forEach(domContainer => {
// Read the comment ID from a data-* attribute.
const commentID = parseInt(domContainer.dataset.commentid, 10);
ReactDOM.render(
e(LikeButton, { commentID: commentID }),
domContainer
);
});
React 用于单页应用程序。Codeigniter 是一个 PHP 框架。没有人禁止您在 codeigniter 中包含 React 应用程序。react 应用程序从 codeigniter 提供的 API 中轮询数据。您可以使用多个 codeigniter 控制器或视图来定义不同的react状态，或者您可以只使用一个控制器、一个视图和多个模型并单独使用react来定义状态。React 并不反对 codeigniter。Codeigniter 不关心您是否使用 jquery、angular 或 react。从这个角度来看，这不是 codeigniter 的业务。