React JS with Yii2

React JS with Yii2: Let me tell you what Yii is, Yii is a superior PHP structure, best to develop Web 2.0 applications. Yii accompanies rich elements: MVC, DAO/active cord, I18N/L10N, reserving, verification and part based get to control, platform, testing, and so forth. It can diminish your improvement time fundamentally.

Installation of React JS with Yii2

For this tutorial we will need a webserver to run PHP as well as Yii2, the current version of Yii is 2.0 version. Go ahead and download Yii2 from here. After downloading the Yii2 project. Extract the zip to the folder into the WWW folder under Wamp or Xampp folder. Open the extracted folder in and run init in cmd.

Installation of Yii2

Write 1 and write y then hit enter. This will initialize the Yii project for you. Now go to http://localhost/path/to/yii2/frontend/web// to see if it works. If it’s you,your screen will be greeted with:

Installation of Yii2

Add React JS Application

Now go to frontend/assets/AppAssets.php and add ReactJS:

<?php
namespace frontend\assets;
use yii\web\AssetBundle;
/*Main frontend application asset bundle*/.
class AppAsset extends AssetBundle
{
public $basePath = '@webroot';
public $base Url = '@web;
public $css = [css/site.css',];
public $js ["https://fb.me/react-15.1.0.min.js","https://fb.me/react-dom 15.1.0.min.js","https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js",];
public $depends ['yii\web\YiiAsset','yii\bootstrap\Bootstrapasset',];
}

Add React JS into Yii (Javascript)

  • For JavaScript, we have now added ReactJS into our Yii project, and now go ahead and do some coding.
  • Create a folder in /frontend/web/js/react compnents,
  • Create a folder in react-components called ReactJS that will import all react components.
  • We have included this file in frontend/layouts/main.php, after <?php $this->endBody() ?>
<script type="text/jsx" src="js/react-components/reactjs js" ></script>

JSX Platform to run Yii

We have to use JSX platform to run make our Yii project compatible with React JS, now go to the console and see if there is an error and make sure your JavaScript added files look-alike this:

<script src="/react/yii/frontend/web/assets/922d48f2/jquery.js"></script>
<script src="/react/yii/frontend/web/assets/a08992ed/yii.js"></script>
<script src="https://fb.me/react-15.1.0.min.js"></script>
<script src="https://fb.me/react dom-15.1.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="/react/yii/frontend/web/assets/labd151d/js/bootstrap.js"></script>
<script type="text/jsx" src="js/react-components/reactjsjs" ></script>

Now go to frontend/web/js/react-components/, and write ReactJS with following content:

React JS in JSX Platform Example

class HelloWorld extends React.Component{
render() {
return(
<div className='jumbotron text-center'>
<h1> Welcome</h1>
<p>
Welcome to My Yii project powered by React Js
</p>
</div>
) ;
}
}
ReactDOM.render(<HelloWorld/>,document.getElementByid(HelloWorld'));

Now go to frontend/views/site/index.php and remove everything from there and put new content in it:

<?php
$this->title = 'My Yii Application';
?>
<div class="site-index">
<div id="helloWorld"> </div>
</div>

React JS in JSX Platform Example Output

You will be greeted with:

Welcome

It means we have successfully integrated react into the project. Now we can use all React resources in our Yii app. Now convert the navbar into the React component.

Navbar into React Component

Now go to frontend/web/js/react js and create a component for Navbar.Js

Navbar into React Component Example

frontend/web/js/react Js
class Navbar extends React.Component{
render() {
return(
<div className='navbar navbar-inverse
navbar-fixed-top'>
<div className='container'>
<div className='navbar-header' >
<a className='navbar-brand' >ReactYii</a>
</div>
<div className='navbar-collapse collapse' >
<ul className="nav navbar-right navbar-nav">
<li> <a>Home</a></li>
<li><a> About</a></li>
<li><a> Contact</a></li>
</ul>
</div>
</div>
</div>
);
}
}
ReactDOM.render(<Navbar />,document.getElementById('navbar'));

Now remove old navbar from frontend/layouts/main.php and add a div with id navbar

<div id=”navbar”></div>

Navbar into React Component Example Output

This will greet us with something like this:

Welcome.

That’s how we have integrated ReactJS into the Yii project.

React JS with Yii2 Exercise

Here are some questions:

  • What is Yii and why it is used for?
  • How to include Yii with Node JS based reactJS Application?

What is Yii and why it is used for?

Yii is a PHP framework and it is a high-performance component-based PHP framework best for Web 2.0 development. Yii has frontend and backend support. I mean Yii gives us a frontend website as well as an admin panel for your website. Yii was originally launched in 2008. In this chapter, we have integrated Yii with React JS in the chapter. Yii is used to develop PHP websites that are fast and scalable. Yii is popular due to easy to learn, easy to understand and well manage framework.

How to include Yii with Node JS based ReactJS Application?

We cannot include Yii into the ReactJS application created with a Node JS because the Node JS server is completely different from a PHP framework. To achieve this problem. We need two servers. Wampserver and ReactJS (Node JS Based). We will set a path for Yii, such as localhost/Yii-project. We can send Ajax requests to this URL to server PHP and MYSQL jobs. You can learn Yii (http://ww.yiiframework.com/)

 Conclusion

  • Now we have integrated ReactJS into the Yii project.
  • Now go ahead and write some ReactJS code and make your Yii app full of React JS.