React is a view library written in JavaScript, and so it is agnostic of any stack configuration and can make an appearance in practically any web application that is using HTML and JavaScript for its presentation layer.
As React works as the ‘V’ in ‘MVC’, we can create our own application stack from our preferences. So far in this guide we have seen React working with Express, a Node ES6/JavaScript-based framework. Other popular Node-based matches for React are the Meteor framework and Facebook’s Relay.
If you want to take advantage of React’s excellent component-based JSX system, the virtual DOM and its super-fast rendering times with your existing project, you can do so by implementing one of the many open-source solutions.
PHP
As PHP is a server-side scripting language, integration with React can come in several forms:
- Using react-php-v8js
- Server-side Request/Response Route handling (with a router, for example Alto)
- JSON output via json_encode()
- Template wrapping, e.g. Twig
Server-Side Rendering
For rendering React components on the server, there is a library available on GitHub.
For example, we can do the following in PHP with this package:
<?php
// the library
$react_source = file_get_contents('/path/to/build/react.js');
// all custom code concatenated
$app_source = file_get_contents('/path/to/custom/components.js');
$rjs = new ReactJS($react_source, $app_source);
$rjs->setComponent('MyComponent', array(
'any' => 1,
'props' => 2
)
);
// print rendered markup
echo '<div id="here">' . $rjs->getMarkup() . '</div>';
// load JavaScript somehow - concatenated, from CDN, etc
// including react.js and custom/components.js
// init client
echo '<script>' . $rjs->getJS("#here") . '</script>';
// repeat setComponent(), getMarkup(), getJS() as necessary
// to render more components
The power of combining React with any server-side scripting language is the ability to feed React with data, and apply your business logic on the server as well as the client side. Renovating an old application into a Reactive app has never been easier!
Using PHP + Alto Router
For an example application, take a look at this repository on GitHub.
Configure your AltoRouter as so:
<?php
// Router setup
require_once 'include/AltoRouter/AltoRouter.php';
$router = new AltoRouter();
$viewPath = 'views/';
// Router matches
//---
// Manual
$router->map('GET', '/', $viewPath . 'reactjs.html', 'reactjs');
$result = $viewPath . '404.php';
$match = $router->match();
if($match) {
$result = $match['target'];
}
// Return route match
include $result;
?>
With the AltoRouter setup serving your application’s pages for the routes specified, you can then just include your React code inside the HTML markup and begin using your components.
JavaScript:
"use strict";
var Comment = React.createClass({
displayName: "Comment",
render: function render() {
var rawMarkup = marked(this.props.children.toString(), { sanitize: true });
return React.createElement(
"div",
{ className: "comment" },
React.createElement(
"h2",
{ className: "commentAuthor" },
this.props.author
),
React.createElement("span", { dangerouslySetInnerHTML: { __html: rawMarkup } })
);
}
});
Ensure you include the React libraries and also place the HTML inside the body tag that will be served from your PHP AltoRouter app, for example:
<!DOCTYPE html>
<html>
<head>
<title>React Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
</head>
<body>
<div id="myContent"></div>
<script type="text/jsx;harmony=true" src="assets/js/main.js"></script>
</body>
</html>
Laravel Users
For the highly popular PHP framework Laravel, there is the react-laravel library, which enables React.jsfrom right inside your Blade views.
For example:
@react_component('Message', [ 'title' => 'Hello, World' ], [ 'prerender' => true ])
The prerender flag tells Laravel to render the component on the server side and then mount it to the client side.
Example Laravel 5.2 + React App
Look at this excellent starter repository for an example of getting Laravel + React working by Spharian.
To render your React code inside your Laravel, set your React files’ source inside the index.blade.php body tag, by adding the following for example:
<script src="{{ asset('js/my-react-code.js') }}"></script>.NET
Using the ReactJS.NET framework, you can easily introduce React into your .NET application.
Install the ReactJS.NET package to your Visual Studio IDE via the NuGET package manager for .NET.
Search the available packages for ‘ReactJS.NET (MVC 4 and 5)’ and install. You will now be able to use any .jsx extension code in your asp.net app.
Add a new controller to your project to get started with React + .NET, and select “Empty MVC Controller” for your template. Once it is created, right click on return View() and add a new view with the following details:
- View name: Index
- View Engine: Razor (CSHTML)
- Create a strongly-typed view: Unticked
- Create as a partial view: Unticked
- Use a layout or master page: Unticked
Now you can replace the default code with the following:
@{
Layout = null;
}
<html>
<head>
<title>Hello React</title>
</head>
<body>
<div id="content"></div>
<script src="https://fb.me/react-15.0.1.js"></script>
<script src="https://fb.me/react-dom-15.0.1.js"></script>
<script src="@Url.Content("~/Scripts/Example.jsx")"></script>
</body>
</html>
Now we need to create the Example.jsx referenced above, so create the file in your project and add yourJSX as follows:
render: function() {
return (
<div className="commentBox">
Hello, world! I am a CommentBox.
</div>
);
}
});
ReactDOM.render(
<CommentBox />,
document.getElementById('content')
);
Now if you click Play in your Visual Studio IDE, you should see the Hello World comment box example.
Here’s a detailed tutorial on writing a component for asp.net.
