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

php reactjs apache codeigniter grocery-crud

26,666

Solution 1

The PHP view files do not need to be replaced with js files. JavaScript can easily be added to PHP files using <script> tags. Below is the Add React in One Minute demo in a CodeIgniter app.

To integrate the React demo into CodeIgniter start with a simple controller - 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');
    }
}

The "view" file is straight from the React demo but it's put in a .php file instead of .html.

The only change made to the demo code is in the script tag at the bottom of the page. My assets folder is on the same level as CodeIgniter's /application folder. There are subfolders in assets for css, js, and images.

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

So I've changed the src for the tag that loads like_button.js to work with my file layout.

The "view" file 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
    );
  });

Solution 2

Here's a boilerplate that you can use.

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

Solution 3

React is used for single page applications. Codeigniter is a PHP framework. Nobody forbids you to include react apps inside codeigniter. The react app polls data from API provided by codeigniter. You can use multiple codeigniter controllers or views to define different react states, or you can just use one controller, one view and multiple models and define states with react alone. React is not in opposition to codeigniter. Codeigniter doesn't care if you use jquery, angular or react. From the view on it's not a codeigniter's business.

26,666

Author by

Rohit R

Updated on July 12, 2022

Comments

Rohit R almost 2 years

The CodeIgniter application was developed much earlier without plans to integrate ReactJS at that time. A later requirement was added to integrate another ReactJS project with this backend and replace the current frontend (views).

The CodeIgniter application is not done as a RESTful API. The .php view files could not be replaced with .js files of the reactjs app as the server is Apache. Running a nodejs server would not render the CodeIgniter views.

Bootstrap, jquery, and simple javascript can be included within the view of the CodeIgniter application. But is it possible to replace the PHP view files in CodeIgniter with javascript files?
jmuchiri about 5 years

Absolutely. This is also discussed by React team at reactjs.org/docs/add-react-to-a-website.html
Hamed about 5 years

Is this support SSR? I mean, is this visible to Google and dispaly in SERPs?
DFriend about 5 years

Website developers do need to be aware of and knowledgeable about the SEO challenges presented by single-page apps. But that's really outside the scope of the OP question. The initial URL of the example is perfect for SEO but whether the site is correctly mapped it depends on the engine doing the mapping.
Gajen Dissanayake over 2 years

Well said. I used Angular with CodeIgnitor and now moved to React. Any idea that how can we keep session authentication between React and CodeIgniter?