React를 널리 사용되는 다른 웹 언어와 연결-PHP 튜토리얼-php.cn

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

React는 JavaScript로 작성된 뷰 라이브러리이므로 모든 스택 구성에 구애받지 않으며 HTML 및 JavaScript를 프레젠테이션 계층으로 사용하는 거의 모든 웹 애플리케이션에 나타날 수 있습니다.

React는 "MVC"의 "V"와 같으므로 원하는 대로 자체 애플리케이션 스택을 만들 수 있습니다. 지금까지 이 가이드에서 우리는 Node ES6/JavaScript 기반 프레임워크인 Express와 React가 결합되는 것을 보았습니다. React의 다른 인기 있는 노드 기반 일치는 Meteor 프레임워크와 Facebook의 Relay입니다.

기존 프로젝트에서 React의 우수한 컴포넌트 기반 JSX 시스템, 가상 DOM 및 매우 빠른 렌더링 시간을 활용하려면 다양한 오픈 소스 솔루션 중 하나를 구현하면 됩니다. p>

PHP

PHP는 서버 측 스크립팅 언어이므로 React와의 통합은 다양한 형태로 이루어질 수 있습니다.

react-php-v8js 사용
서버측 요청/응답 라우팅 처리(Alto와 같은 라우터 사용)
json_encode()를 통해 JSON 출력
브랜치 등 템플릿 패키징

서버 측 렌더링

서버에서 React 구성 요소를 렌더링하려면 GitHub에서 사용할 수 있는 라이브러리가 있습니다.

예를 들어, 이 패키지를 사용하여 PHP에서 다음을 수행할 수 있습니다.

으아악

React를 서버측 스크립팅 언어와 결합하는 힘은 React에 데이터를 제공하고 서버와 클라이언트 모두에 비즈니스 로직을 적용할 수 있다는 것입니다. 오래된 앱을 반응형 앱으로 바꾸는 것이 이보다 쉬웠던 적은 없었습니다!

PHP + Alto 라우터 사용

샘플 애플리케이션을 보려면 GitHub에서 이 저장소를 확인하세요.

다음과 같이 AltoRouter을 구성하세요:

으아악

AltoRouter 设置为指定的路由提供应用程序页面服务，您只需将 React 지정된 경로에 애플리케이션 페이지 제공을 설정하면 HTML 태그에 React 코드를 포함하기만 하면 구성 요소 사용을 시작할 수 있습니다. p>

자바스크립트:

으아악

React 라이브러리를 포함하고 PHP AltoRouter 애플리케이션에서 제공할 body 태그 안에 HTML을 넣어야 합니다. 예:

으아악

라라벨 사용자

매우 인기 있는 PHP 프레임워크 Laravel의 경우 블레이드 보기에서 React.js를 활성화하는 react-laravel 라이브러리가 있습니다.

예:

으아악

prerender 플래그는 Laravel에게 서버 측에서 구성 요소를 렌더링한 다음 클라이언트 측에 마운트하도록 지시합니다.

Laravel 5.2 + React 적용 예시

Laravel + React를 실행하는 Spharian의 예를 보려면 이 훌륭한 시작 저장소를 확인하세요.

Laravel에서 React 코드를 렌더링하려면 index.blade.php body 태그에 React 파일의 소스 코드를 설정하세요. 예를 들어 다음을 추가하세요.

으아악

.NET

ReactJS.NET 프레임워크를 사용하면 .NET 애플리케이션에 React를 쉽게 도입할 수 있습니다.

.NET용 NuGET 패키지 관리자를 통해 Visual Studio IDE에 ReactJS.NET 패키지를 설치하세요.

"ReactJS.NET(MVC 4 및 5)"에 사용 가능한 패키지를 검색하여 설치하세요. 이제 ASP.NET 애플리케이션에서 모든 .jsx 확장 코드를 사용할 수 있습니다.

React + .NET을 시작하려면 프로젝트에 새 컨트롤러를 추가하고 템플릿에 대해 "빈 MVC 컨트롤러"를 선택하세요. 생성되면 return View()를 마우스 오른쪽 버튼으로 클릭하고 다음 세부 정보가 포함된 새 보기를 추가하세요.

보기 이름: 색인
보기 엔진: Razor(CSHTML)
강력한 형식의 보기 만들기: 선택 취소
부분 보기로 만들기: 선택 취소
레이아웃 또는 마스터 페이지 사용: 선택 취소

이제 기본 코드를 다음으로 바꿀 수 있습니다:

으아악

이제 위에서 언급한 Example.jsx，因此在您的项目中创建该文件并添加您的 JSX를 다음과 같이 생성해야 합니다.

으아악

이제 Visual Studio IDE에서 Play를 클릭하면 Hello World 댓글 상자 예제가 표시됩니다.

ASP.NET용 구성 요소 작성에 대한 자세한 자습서입니다.

트랙

react-rails를 사용하여 모든 Rails(3.2+) 애플리케이션에 React를 쉽게 추가할 수 있습니다. 먼저 보석을 추가하세요:

으아악

설치:

으아악

이제 설치 스크립트를 실행할 수 있습니다:

으아악

이것은 두 가지로 이어집니다:

components.js 清单文件位于 app/assets/javascripts/components/ 여기에 모든 구성 요소 코드를 입력합니다.
다음을 application.js에 추가하세요:

으아악

이제 .jsx 코드가 렌더링되고 템플릿에 React 일부를 추가할 수 있습니다. 예:

로그인 후 복사

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 做好准备，并拥有官方文档。