Use React.JS with Php
React (also known as React.js or ReactJS) is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies.
React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook’s newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.
Most developers choose to write React components in a JavaScript dialect known as JSX. It is essentially a mix of HTML and JavaScript. The tags need to be closed and there are some differences like using the attribute className instead of just class for defining CSS classes. JSX is transformed into JavaScript for manipulating the DOM.
For example JSX:
var HelloMessage = React.createClass({
render: function() {
return
Hello {this.props.name}
;
}
});
ReactDOM.render(, mountNode);
is transformed to JavaScript by a JSX parser:
“use strict”;
var HelloMessage = React.createClass({
displayName: “HelloMessage”,
render: function render() {
return React.createElement(
“div”,
null,
“Hello “,
this.props.name
);
}
});
ReactDOM.render(React.createElement(
HelloMessage, { name: “John” }
), mountNode;
Now can we use React js with Php ?
Yes. This is possible. Reactjs is just the ‘V’ in MVC. React doesn’t care what you are using at backend. One can render React’s components on server side in PHP using V8Js PHP extension, but this is not necessary. Server side rendering in Reactjs is optional. Here are some things you can do:
1.Compile your whole reactjs JSX code using babel. It would be better if you make use of some module bundler like webpack and compile your reactjs code into a single file. Upload that single file on your server.
2.You can populate default states in your react code using php.
The best way to use PHP as backend with React Js as front end is to keep both seperate. Make a stand alone front-end and use PHP to create APIs which interacts with the database. Then consume the API through HTTP AJAX or whatever mechanism React Js contains.
