如何在 apache 服务器上将 Reactjs 前端与 php codeigniter 应用程序集成？

Question

CodeIgniter 应用程序的开发时间要早得多，当时并没有集成 ReactJS 的计划。后来添加了一个需求，将另一个 ReactJS 项目与此后端集成，并替换当前的前端（视图）。

CodeIgniter 应用程序未完成 RESTful API。 .php 视图文件无法替换为 reactjs 应用程序的 .js 文件，因为服务器是 Apache。运行 nodejs 服务器不会呈现 CodeIgniter 视图。

Bootstrap、jquery 和简单的 javascript 可以包含在 CodeIgniter 应用程序的视图中。但是可以用 javascript 文件替换 CodeIgniter 中的 PHP 视图文件吗？

Answer 1

PHP视图文件不需要替换成js文件。 JavaScript 可以使用 <script> 标签轻松添加到 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

所以我更改了加载 like_button.js 的标签的 src 以配合我的文件布局。

“查看”文件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
    );
  });

Answer 2

这是您可以使用的样板文件。

https://github.com/cyruzin/codeigniter-react-boilerplate

Answer 3

React 用于单页应用程序。 Codeigniter 是一个 PHP 框架。没有人禁止您在 codeigniter 中包含 React 应用程序。 React 应用程序从 codeigniter 提供的 API 轮询数据。您可以使用多个 codeigniter 控制器或视图来定义不同的反应状态，或者您可以只使用一个控制器、一个视图和多个模型并单独定义反应状态。 React 并不反对 codeigniter。 Codeigniter 不关心您是使用 jquery、angular 还是做出反应。看来这不是 codeigniter 的事。

如何在 apache 服务器上将 Reactjs 前端与 php codeigniter 应用程序集成？

How to integrate Reactjs frontend with php codeigniter application on apache server?

php

apache

codeigniter

grocery-crud

reactjs