Use React With Other Popular Web Languages

Thursday 23 February 2017

Use React With Other Popular Web Languages

Posted By: abhishek verma Thursday, February 23, 2017 Leave a Reply
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:

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:
var CommentBox = React.createClass({
  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.

0 comments: