Yii Framework Forum: Implement React JS in Yii2 - Yii Framework Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Implement React JS in Yii2 Can we use React JS in only one module of existing project Rate Topic: -----

#1 User is offline   sumanchoudhary 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 4
  • Joined: 11-January 17

Posted 11 January 2017 - 01:25 AM

Hi, want to know that can we use yii2-react extension in a single module of an existing built project. My complete project is built in Yii2 but I want to prepare dashboard in React JS.

So anyone please tell me is it possible or not?
0

#2 User is offline   alrazi 

  • Elite Member
  • PipPipPipPipPip
  • Yii
  • Group: Members
  • Posts: 1,273
  • Joined: 08-August 12
  • Location:Durban, South Africa

Posted 11 January 2017 - 02:20 AM

Hi, Okay what yii2-react does it just includes the js files for you it does not provide tools to auto generate the app or components, what you can do is download the js files yourself and put them in web/js and require them in your module layout file.
0

#3 User is offline   sumanchoudhary 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 4
  • Joined: 11-January 17

Posted 11 January 2017 - 07:49 AM

View Postalirz23, on 11 January 2017 - 02:20 AM, said:

Hi, Okay what yii2-react does it just includes the js files for you it does not provide tools to auto-generate the app or components, what you can do is download the js files yourself and put them in web/js and require them in your module layout file.


Thanks for the suggestion. Is it possible to call react component in Yii2 layout file for ex: In my dashboard side bar and header will be from yii2 layout but middle container will be of React Component.

If is possible then how can we do it? I have included js files in my view along with react component.


Index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);

But it is now working, react js file is calling but did not rendering react html in yii2 view
0

#4 User is offline   alrazi 

  • Elite Member
  • PipPipPipPipPip
  • Yii
  • Group: Members
  • Posts: 1,273
  • Joined: 08-August 12
  • Location:Durban, South Africa

Posted 12 January 2017 - 03:20 AM

you need a container which will contain your app for example you could have a div and mount your app in that div like so

<div id="react-app"></div>

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('react-app')
);


Note: that dive could be anywhere provided you load the javascript after the div is created or loaded so include your javascript in the footer or put it in jquery dom load event
0

#5 User is offline   sumanchoudhary 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 4
  • Joined: 11-January 17

Posted 13 January 2017 - 02:10 AM

Thanks, it's working if I inject react app build below the div, but not working If write down below code:


<div id="root"></div>

<script> ReactDOM.render( <h1>Hello, world</h1> document.getElementById('root')); </script>


I am getting an error "Uncaught SyntaxError: Unexpected token <" at the line "<h1>Hello, world</h1>
0

#6 User is offline   samdark 

  • Having fun
  • Yii
  • Group: Yii Dev Team
  • Posts: 4,809
  • Joined: 17-January 09
  • Location:Russia

Posted 14 January 2017 - 05:25 AM

Because render accepts a string...
0

#7 User is offline   alrazi 

  • Elite Member
  • PipPipPipPipPip
  • Yii
  • Group: Members
  • Posts: 1,273
  • Joined: 08-August 12
  • Location:Durban, South Africa

Posted 15 January 2017 - 12:57 AM

you are getting an error because ReactDOM.render expects a component as a first argument
0

#8 User is offline   sumanchoudhary 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 4
  • Joined: 11-January 17

Posted 18 January 2017 - 04:10 AM

Thanks All,

Now It's working like as below:


<script type="text/javascript">

ReactDOM.render(
React.createElement('div', null, 'Hello World'),
document.getElementById('root')
);
</script>
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users