Как интегрировать интерфейс Reactjs с приложением php codeigniter на сервере apache?

Приложение CodeIgniter было разработано гораздо раньше, в то время не планировалось интегрировать ReactJS. Позднее было добавлено требование для интеграции другого проекта ReactJS с этим бэкэндом и замены текущего веб-интерфейса (представлений).

Приложение CodeIgniter не выполняется как API RESTful. Файлы.php view не могут быть заменены файлами.js приложения actjs, так как сервер - Apache. Запуск сервера nodejs не будет отображать представления CodeIgniter.

Bootstrap, jquery и простой javascript могут быть включены в представление приложения CodeIgniter. Но возможно ли заменить файлы представления PHP в CodeIgniter файлами javascript?

Источник

1 ответ

Решение

Файлы представления PHP не нужно заменять файлами js. JavaScript может быть легко добавлен в файлы PHP с помощью <script> теги. Ниже приведена демонстрация добавления реакции за одну минуту в приложении CodeIgniter.

Чтобы интегрировать демонстрацию 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');
    }
}

Файл "view" - это прямо из демонстрации React, но он помещен в файл.php вместо.html.

Единственное изменение, внесенное в демонстрационный код, находится в теге script в нижней части страницы. мой assets папка находится на том же уровне, что и CodeIgniter /application папка. Есть подпапки в assets для CSS, JS и изображений.

/public_html
    /application
    /system
    /assets
        /js
        /css
        /img

Так что я изменил src для тега, который загружает like_button.js работать с моим макетом файла.

Файл "view" response_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
    );
  });
Источник

Вот шаблон, который вы можете использовать.

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

Источник

React используется для одностраничных приложений. Codeigniter - это PHP-фреймворк. Никто не запрещает вам включать в codeigniter приложения для реагирования. Приложение React опрашивает данные из API, предоставленного codeigniter. Вы можете использовать несколько контроллеров или представлений codeigniter для определения различных состояний реакции, или вы можете просто использовать один контроллер, одно представление и несколько моделей и определять состояния только с помощью реакции. React не противостоит codeigniter. Codeigniter не волнует, используете ли вы jquery, angular или react. С моей точки зрения, это не дело разработчиков кода.

Источник
Другие вопросы по тегам