Learn, Share, Build

216
October 06, 2017, at 9:41 PM

I have existing PHP application, I want to create rich component with React.

In my application I don't have api to React integration, I think the easiest way could be just print data from PHP to HTML as JSON and load this data from React.

For illustration:

<?php $data = ..some data loaded from DB.. ?>
<div id="react-component-root" data="<?= json($data) ?>">

Question is: What is the best solution to share data from PHP generated HTML to React?

Best = easy and working

Answer 1

In HTML can be

<div class="react-component" data="{a:1,b:1,c:[1,2,3]}"></div>
<div class="react-component" data="{a:2,b:1,c:[1,2,3]}"></div>
<div class="react-component" data="{a:3,b:1,c:[1,2,3]}"></div>

And in JS

import React from 'react'
import ReactDOM from 'react-dom'
import _ from 'lodash'
const Component = (props) => {
    return <div>{JSON.stringify(props)}</div>
}
_.forEach(document.getElementsByClassName('react-component'), (element) => {
    ReactDOM.render(<Component data={element.getAttribute('data')} />, element)
})
Rent Charter Buses Company
READ ALSO
Learn, Share, Build

Learn, Share, Build

Sorry if this seems like a dumb question but I'm new to this kind of approachWhat I have is a series of meal items that correspond with meals

179
Learn, Share, Build

Learn, Share, Build

The code below was used to display records as user scroll down the pageThe problem is that it keeps on displaying more records as user scroll down the page without stop even when there is no more records in the Json Files or in the database

163
Learn, Share, Build

Learn, Share, Build

I want to draw a google piechart with data from my server, in my case phpmyadminFor this I used this example here:http://sophiedogg

201
Learn, Share, Build

Learn, Share, Build

I got problem on Finishing all the setup in invoiceninja in ubuntu 1704 and i followed this website, i got one time but again i tried i got this problem:http://blog

174