python-react
============
[![Build Status](https://travis-ci.org/markfinger/python-react.svg?branch=master)](https://travis-ci.org/markfinger/python-react)
Server-side rendering of React components with data from your Python system
```python
from react.render import render_component
rendered = render_component(
'/path/to/component.jsx',
{
'foo': 'bar',
'woz': [1,2,3],
}
)
print(rendered)
```
For client-side integrations, refer to the [docs](#using-react-on-the-front-end).
Documentation
-------------
- [Installation](#installation)
- [Basic usage](#basic-usage)
- [Setting up a render server](#setting-up-a-render-server)
- [Using React on the front-end](#using-react-on-the-front-end)
- [render_component](#render_component)
- [Render server](#render-server)
- [Usage in development](#usage-in-development)
- [Usage in production](#usage-in-production)
- [Overriding the renderer](#overriding-the-renderer)
- [Settings](#settings)
- [Frequently Asked Questions](#frequently-asked-questions)
- [Running the tests](#running-the-tests)
Installation
------------
```bash
pip install react
```
Basic usage
-----------
python-react provides an interface to a render server which is capable of rendering React components with data
from your python process.
Render requests should provide a path to a JS file that exports a React component. If you want to pass
data to the component, you can optionally provide a second argument that will be used as the component's
`props` property.
```python
from react.render import render_component
rendered = render_component('path/to/component.jsx', {'foo': 'bar'})
print(rendered)
```
The object returned has two properties:
- `markup` - the rendered markup
- `props` - the JSON-serialized props
- `data` - the data returned by the render server
If the object is coerced to a string, it will emit the value of the `markup` attribute.
### Setting up a render server
Render servers are typically Node.js processes which sit alongside the python process and respond to network requests.
To add a render server to your project, you can refer to the [basic rendering example](examples/basic_rendering)
for a simple server that will cover most cases. The key files for the render server are:
- [render_server.js](examples/basic_rendering/render_server.js) - the server's source code
- [package.json](examples/basic_rendering/package.json) - the server's dependencies, installable with
[npm](http://npmjs.com)
Using React on the front-end
----------------------------
There are a number of ways in which you can integrate React into the frontend of a Python system. The typical
setup involves a build tool and a python package that can integrate it.
The two most popular build tools are:
- [Webpack](https://webpack.github.io) - compiles your files into browser-executable code and provides a
variety of tools and processes which can simplify complicated workflows.
- [Browserify](http://browserify.org/) - has a lot of cross-over with webpack. Is argurably the easiest of the
two to use, but it tends to lag behind webpack in functionality.
For React projects, you'll find that webpack is the usual recommendation. Webpack's hot module replacement,
code-splitting, and a wealth of loaders are the features typically cited as being irreplaceable.
[react-hot-loader](https://github.com/gaearon/react-hot-loader) is a particularly useful tool, as it allows
changes to your components to be streamed live into your browser.
If you want to integrate webpack's output into your python system, you can either hard-code the paths or you
can use a manifest plugin that provides a way for your python system to introspect the compiler's state.
The most popular manifest tool is [owais/django-webpack-loader](https://github.com/owais/django-webpack-loader).
Owais has provided a great set of docs and examples, so it's your best bet for integrating webpack into your
project.
If you aren't running a Django system, or you need portable manifests that can be decoupled and deployed,
[markfinger/python-webpack-manifest](https://github.com/markfinger/python-webpack-manifest) might suit your
needs.
There's also [markfinger/python-webpack](https://github.com/markfinger/python-webpack), but it's a bit more
heavy handed, abstract, and is only of use if you need a really tight coupling between your python and
javascript worlds.
render_component
----------------
Renders a component to its initial HTML. You can use this method to generate HTML on the server
and send the markup down on the initial request for faster page loads and to allow search engines
to crawl your pages for SEO purposes.
#### Usage
```python
from react.render import render_component
render_component(
# A path to a file which exports your React component
path='...',
# An optional dictionary of data that will be passed to the renderer
# and can be reused on the client-side.
props={
'foo': 'bar'
},
# An optional boolean indicating that React's `renderToStaticMarkup` method
# should be used, rather than `renderToString`
to_static_markup=False,
# An optional object which will be used instead of the default renderer
renderer=None,
# An optional dictionary of request header information (such as `Accept-Language`)
# to pass along with the request to the render server
request_headers={
'Accept-Language': 'da, en-gb;q=0.8, en;q=0.7'
},
# An optional timeout that is used when handling communications with the render server.
# Can be an integer, a float, or a tuple containing two numeric values (the two values
# represent the individual timeouts on the send & receive phases of the request).
# Note that if not defined, this value will default to (5, 5)
timeout=None
)
```
If you are using python-react in a Django project, relative paths to components will be resolved
via Django's static file finders.
By default, render_component relies on access to a render server that exposes an endpoint compatible
with [react-render's API](https://github.com/markfinger/react-render). If you want to use a different
renderer, pass in an object as the `renderer` arg. The object should expose a `render` method which
accepts the `path`, `data`, `to_static_markup`, and `request_headers` arguments.
Render server
-------------
Earlier versions of this library would run the render server as a subprocess, this tended to make development
easier, but introduced instabilities and opaque behaviour. To avoid these issues python-react now relies on
externally managed process. While managing extra processes can add more overhead initially, it avoids pain down
the track.
If you only want to run the render server in particular environments, change the `RENDER` setting to
False. When `RENDER` is False, the render server is not used directly, but it's wrapper will return similar
objects with the `markup` attribute as an empty string.
### Usage in development
In development environments, it can be easiest to set the `RENDER` setting to False. This ensures that the
render server will not be used, hence you only need to manage your python process.
Be aware that the render servers provided in the examples and elsewhere rely on Node.js's module system
which - similarly to Python - caches all modules as soon as they are imported. If you use the render
server in a development environment, your code is cached and your changes will **not** effect the
rendered markup until you reset the render server.
### Usage in production
In production environments, you should ensure that `RENDER` is set to True.
You will want to run the render server under whatever supervisor process suits your need. Depending on
your setup, you may need to change the `RENDER_URL` setting to reflect your environment.
The render server should be run with the `NODE_ENV` environment variable set to `production`,
eg: `NODE_ENV=prod
没有合适的资源?快使用搜索试试~ 我知道了~
React组件的服务端渲染_Python_JavaScript_下载.zip
共74个文件
jsx:19个
py:18个
js:7个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 153 浏览量
2023-04-21
10:30:08
上传
评论
收藏 108KB ZIP 举报
温馨提示
React组件的服务端渲染_Python_JavaScript_下载
资源推荐
资源详情
资源评论
收起资源包目录
React组件的服务端渲染_Python_JavaScript_下载.zip (74个子文件)
python-react-master
.travis.yml 711B
setup.py 516B
LICENSE.txt 1KB
runtests.py 764B
tests
__init__.py 750B
perf.py 1KB
django_test_app
__init__.py 0B
models.py 0B
static
django_test_app
StaticFileFinderComponent.jsx 205B
test_django_integration.py 1KB
test_server.js 1KB
test_rendering.py 5KB
components
SyntaxErrorComponent.jsx 163B
HelloWorld.js 237B
HelloWorldWrapper.jsx 401B
ErrorThrowingComponent.jsx 179B
ReactAddonsComponent.jsx 345B
PerfTestComponent.jsx 246B
HelloWorld.jsx 185B
settings.py 983B
examples
basic_rendering
templates
index.html 280B
render_server.js 1KB
.babelrc 84B
package.json 326B
example.py 735B
requirements.txt 58B
static
js
Comment.jsx 199B
CommentForm.jsx 746B
CommentList.jsx 439B
CommentBox.jsx 332B
css
bootstrap.css 144KB
app.css 107B
README.md 284B
Tornado-example
app.py 1KB
server.js 825B
templates
index.html 280B
.babelrc 72B
package.json 326B
requirements.txt 14B
static
js
Comment.jsx 200B
CommentForm.jsx 811B
CommentList.jsx 440B
CommentBox.jsx 355B
css
bootstrap.css 144KB
app.css 108B
README.md 274B
frontend-rendering-with-webpack
webpack.config.js 392B
templates
index.html 637B
render_server.js 1KB
package.json 695B
example.py 1KB
requirements.txt 58B
static
js
render_client.js 452B
src
Comment.jsx 202B
CommentForm.jsx 1KB
CommentList.jsx 730B
CommentBox.jsx 335B
css
bootstrap.css 144KB
app.css 143B
README.md 2KB
README.md 572B
CHANGELOG.md 8KB
.babelrc 44B
package.json 288B
requirements.txt 104B
MANIFEST.in 83B
.gitignore 709B
README.md 12KB
react
__init__.py 68B
render_server.py 3KB
apps.py 310B
conf.py 1KB
render.py 619B
exceptions.py 150B
共 74 条
- 1
资源评论
快撑死的鱼
- 粉丝: 1w+
- 资源: 9154
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功