search
HomeBackend DevelopmentPHP TutorialConnect React with other widely used web languages

将 React 与其他广泛使用的 Web 语言连接起来

#React is a views library written in JavaScript, so it is agnostic to any stack configuration and can appear in almost any web application that uses HTML and JavaScript as the presentation layer.

Since React is like the "V" in "MVC", we can create our own application stack however we like. So far in this guide we've seen React paired 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, virtual DOM, and its blazing-fast rendering times in your existing projects, you can do so by implementing one of the many open source solutions. p>

PHP

Since PHP is a server-side scripting language, integration with React can come in many forms:

  • Use react-php-v8js
  • Server-side request/response routing handling (using a router, such as Alto)
  • Output JSON through json_encode()
  • Template packaging, such as branches

Server side rendering

In order to render React components on the server, there is a library available on GitHub.

For example, we can use this package to perform the following operations in PHP:

<?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 '' . $rjs->getMarkup() . '';

// load JavaScript somehow - concatenated, from CDN, etc
// including react.js and custom/components.js

// init client
echo '' . $rjs->getJS("#here") . ''; 

// 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 provide data to React and apply business logic on the server and client. Transforming old apps into responsive ones has never been easier!

Using PHP Alto Router

For a sample application, check out this repository on GitHub.

Configure your AltoRouter as follows:

<?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 setting to serve application pages to a specified route, you can simply include the React code in an HTML tag to start using your component. p>

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 } })
    );
  }
});

Make sure to include the React library and put the HTML inside the body tag that will be provided by the PHP AltoRouter application, for example:



  
    React Example
    
    
    
    
  
  
    
    
  

Laravel User

For the very popular PHP framework Laravel, there is the react-laravel library which enables React.js in 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 on the client side.

Laravel 5.2 React application example

Check out this excellent starter repository for examples of Spharian running Laravel React.

To render React code in Laravel, set the source code of the React file in the index.blade.php body tag, for example, add the following:


.NET

Using the ReactJS.NET framework, you can easily introduce React into your .NET applications.

Install the ReactJS.NET package into the Visual Studio IDE via the NuGET package manager for .NET.

Search for available packages for "ReactJS.NET (MVC 4 and 5)" and install them. You can now use any .jsx extension code in your ASP.NET application.

Add a new controller to your project to get started with React .NET and select "Empty MVC Controller" for your template. Once created, right-click return View() and add a new view with the following details:

  • View name: index
  • Viewing engine: Razor (CSHTML)
  • Create strongly typed view: unchecked
  • Create as partial view: unchecked
  • Use layout or master page: unchecked

Now you can replace the default code with the following:

@{
    Layout = null;
}


    Hello React


    
    
    
    


Now we need to create the Example.jsx referenced above, so create that file in your project and add your JSX like this:

var CommentBox = React.createClass({
  render: function() {
    return (
      
        Hello, world! I am a CommentBox.
      
    );
  }
});
ReactDOM.render(
  ,
  document.getElementById('content')
);

Now, if you click Play in the Visual Studio IDE, you should see the Hello World comment box example.

This is a detailed tutorial on writing components for ASP.NET.

track

You can easily add React to any Rails (3.2) application by using react-rails. First, just add the gem:

gem 'react-rails', '~> 1.7.0'

and install:

bundle install

Now you can run the installation script:

rails g react:install

This will result in two things:

  • components.js The manifest file is located at app/assets/javascripts/components/; this is where you put all your component code.
  • Add the following to your application.js:
//= require react
//= require react_ujs
//= require components

Now the .jsx code will be rendered and you can add a piece of React to the template, for example:




Ruby JSX

Babel 是 react-rails gem 的 Ruby 实现的核心,可以这样配置:

config.react.jsx_transform_options = {
  blacklist: ['spec.functionName', 'validation.react', 'strict'], # default options
  optional: ["transformerName"],  # pass extra babel options
  whitelist: ["useStrict"] # even more options
}

react-rails 安装到您的项目中后,重新启动服务器,任何 .js.jsx 文件都将在您的资产管道中进行转换。

有关 react-rails 的更多信息,请前往官方文档。

Python

要安装 python-react,请像这样使用 pip:

pip install react

现在,您可以通过提供 .jsx 组件的路径并使用渲染服务器为应用程序提供服务,使用 Python 应用程序渲染 React 代码。通常这是一个单独的 Node.js 进程。

要运行渲染服务器,请遵循这个简单的简短指南。

现在您可以像这样启动服务器:

node render_server.js

启动你的Python应用程序:

python app.py

并在浏览器中加载 http://127.0.0.1:5000 以查看 React 代码渲染。

姜戈

react 添加到您的 INSTALLED_APPS 并提供一些配置,如下所示:

INSTALLED_APPS = (
    # ...
    'react',
)

REACT = {
    'RENDER': not DEBUG,
    'RENDER_URL': 'http://127.0.0.1:8001/render',
}

流星

要将 React 添加到您的 Meteor 项目中,请通过以下方式执行此操作:

meteor npm install --save react react-dom

然后在 client/main.jsx 添加以下示例:

import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
 
import App from '../imports/ui/App.jsx';
 
Meteor.startup(() => {
  render(, document.getElementById('render-target'));
});

这是实例化一个 App React 组件,您将在 imports/ui/App.jsx 中定义该组件,例如:

import React, { Component } from 'react';

import Headline from './Headline.jsx';

// The App component - represents the whole app
export default class App extends Component {
  getHeadlines() {
    return [
      { _id: 1, text: 'Legalisation of medical marijuana goes worldwide!' },
      { _id: 2, text: 'Matt Brown goes inside the cult of scientology' },
      { _id: 3, text: 'The deep web: A criminals dream or fascinating freedom?' },
    ];
  }
 
  renderHeadlines() {
    return this.getHeadlines().map((headline) => (
      
    ));
  }
 
  render() {
    return (
      
        
          The latest headlines
        
 
        
          {this.renderHeadlines()}
        
      
    );
  }
}

Headline.jsx 内,使用以下代码:

import React, { Component, PropTypes } from 'react';
 
// Headline component - this will display a single news headline item from a iterated array
export default class Headline extends Component {
  render() {
    return (
      
<li>{this.props.headline.text}</li>
    );
  }
}
 
Headline.propTypes = {
  // This component gets the headline to display through a React prop.
  // We can use propTypes to indicate it is required
  headline: PropTypes.object.isRequired,
};

Meteor 已为 React 做好准备,并拥有官方文档。

不再有{{车把}}

需要注意的重要一点:当在 React 中使用 Meteor 时,默认的 {{handlebars}} 模板系统不再使用,因为由于项目中存在 React,它已失效。 p>

所以不要使用 {{>; TemplateName}}Template.templateName 用于 JS 中的帮助程序和事件,您将在视图组件中定义所有内容,这些组件都是 React.component 的子类。 p>

结论

React 几乎可以用于任何使用 HTML 表示层的语言。许多潜在的软件产品都可以充分利用 React 的优势。

React 使 UI View 层变得基于组件。与任何堆栈逻辑地合作意味着我们拥有一种通用的界面语言,Web 开发各个方面的设计人员都可以使用它。

React 统一了我们项目的界面、品牌和所有部署中的一般应急措施,无论设备或平台有何限制。此外,在自由职业、基于客户的工作或大型组织内部,React 确保您的项目可重用代码。

您可以创建自己的定制组件库,并立即在新项目中开始工作或翻新旧项目,快速轻松地创建完全反应式等距应用程序界面。

React 是 Web 开发领域的一个重要里程碑,它有潜力成为任何开发人员的必备工具。不要落后。

The above is the detailed content of Connect React with other widely used web languages. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
How can you check if a PHP session has already started?How can you check if a PHP session has already started?Apr 30, 2025 am 12:20 AM

In PHP, you can use session_status() or session_id() to check whether the session has started. 1) Use the session_status() function. If PHP_SESSION_ACTIVE is returned, the session has been started. 2) Use the session_id() function, if a non-empty string is returned, the session has been started. Both methods can effectively check the session state, and choosing which method to use depends on the PHP version and personal preferences.

Describe a scenario where using sessions is essential in a web application.Describe a scenario where using sessions is essential in a web application.Apr 30, 2025 am 12:16 AM

Sessionsarevitalinwebapplications,especiallyfore-commerceplatforms.Theymaintainuserdataacrossrequests,crucialforshoppingcarts,authentication,andpersonalization.InFlask,sessionscanbeimplementedusingsimplecodetomanageuserloginsanddatapersistence.

How can you manage concurrent session access in PHP?How can you manage concurrent session access in PHP?Apr 30, 2025 am 12:11 AM

Managing concurrent session access in PHP can be done by the following methods: 1. Use the database to store session data, 2. Use Redis or Memcached, 3. Implement a session locking strategy. These methods help ensure data consistency and improve concurrency performance.

What are the limitations of using PHP sessions?What are the limitations of using PHP sessions?Apr 30, 2025 am 12:04 AM

PHPsessionshaveseverallimitations:1)Storageconstraintscanleadtoperformanceissues;2)Securityvulnerabilitieslikesessionfixationattacksexist;3)Scalabilityischallengingduetoserver-specificstorage;4)Sessionexpirationmanagementcanbeproblematic;5)Datapersis

Explain how load balancing affects session management and how to address it.Explain how load balancing affects session management and how to address it.Apr 29, 2025 am 12:42 AM

Load balancing affects session management, but can be resolved with session replication, session stickiness, and centralized session storage. 1. Session Replication Copy session data between servers. 2. Session stickiness directs user requests to the same server. 3. Centralized session storage uses independent servers such as Redis to store session data to ensure data sharing.

Explain the concept of session locking.Explain the concept of session locking.Apr 29, 2025 am 12:39 AM

Sessionlockingisatechniqueusedtoensureauser'ssessionremainsexclusivetooneuseratatime.Itiscrucialforpreventingdatacorruptionandsecuritybreachesinmulti-userapplications.Sessionlockingisimplementedusingserver-sidelockingmechanisms,suchasReentrantLockinJ

Are there any alternatives to PHP sessions?Are there any alternatives to PHP sessions?Apr 29, 2025 am 12:36 AM

Alternatives to PHP sessions include Cookies, Token-based Authentication, Database-based Sessions, and Redis/Memcached. 1.Cookies manage sessions by storing data on the client, which is simple but low in security. 2.Token-based Authentication uses tokens to verify users, which is highly secure but requires additional logic. 3.Database-basedSessions stores data in the database, which has good scalability but may affect performance. 4. Redis/Memcached uses distributed cache to improve performance and scalability, but requires additional matching

Define the term 'session hijacking' in the context of PHP.Define the term 'session hijacking' in the context of PHP.Apr 29, 2025 am 12:33 AM

Sessionhijacking refers to an attacker impersonating a user by obtaining the user's sessionID. Prevention methods include: 1) encrypting communication using HTTPS; 2) verifying the source of the sessionID; 3) using a secure sessionID generation algorithm; 4) regularly updating the sessionID.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

SecLists

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function