web-dev-qa-db-fra.com

Comment intégrer le frontend Reactjs avec l'application php codeigniter sur le serveur Apache?

L'application CodeIgniter a été développée beaucoup plus tôt sans projet d'intégration de ReactJS à l'époque. Une exigence ultérieure a été ajoutée pour intégrer un autre projet ReactJS avec ce backend et remplacer le frontend actuel (vues).

L'application CodeIgniter ne se fait pas en tant qu'API RESTful. Les fichiers de vue .php n'ont pas pu être remplacés par des fichiers .js de l'application reactjs car le serveur est Apache. L'exécution d'un serveur nodejs ne rendrait pas les vues CodeIgniter.

Bootstrap, jquery et simple javascript peuvent être inclus dans la vue de l'application CodeIgniter. Mais est-il possible de remplacer les fichiers de vue PHP dans CodeIgniter par des fichiers javascript?

phpreactjsapachecodeignitergrocery-crud
6
Rohit R

Les fichiers de vue PHP ne doivent pas être remplacés par des fichiers js. JavaScript peut facilement être ajouté aux fichiers PHP en utilisant les balises <script>). Ci-dessous est la démo Add React in One Minute dans une application CodeIgniter.

Pour intégrer la démo React dans CodeIgniter, commencez par un simple contrôleur - 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');
    }
}

Le fichier "view" est directement issu de la démo React mais il est placé dans un fichier .php au lieu de .html.

La seule modification apportée au code de démonstration se trouve dans la balise de script en bas de la page. Mon dossier assets est au même niveau que le dossier /application De CodeIgniter. Il existe des sous-dossiers dans assets pour css, js et images.

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

J'ai donc changé le src pour la balise qui charge like_button.js Pour fonctionner avec ma disposition de fichier.

Le fichier "view" 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
    );
  });
11
DFriend