component = render_component(

# A path to a file exporting your React component

# Translate the source to JavaScript from JSX + ES6/7

translate=True,

# Props that will be passed to the renderer and reused on

# the client-side to provide immediate interactivity

print(component)

print(component.render_js())

[render_component](#render_component) is the main entry point to pre-render components and package them for

use on the client-side.

If you only want to use your JSX files on the client-side, you can use [bundle_component](#bundle_component)

to translate and bundle the source code into a form that will run in a browser.

- [render_component()](#render_component)

- [bundle_component()](#bundle_component)

Install [python-webpack](https://github.com/markfinger/python-webpack)

Install python-react's JS dependencies

npm install --save react react-render babel-core babel-loader

Add react-render to the functions definition of your `host.config.js` file

var reactRender = require('react-render');

module.exports = {

functions: {

// ...

react: reactRender

}

};

And install python-react

pip install react

# A path to a file which exports your React component

# An optional boolean indicating that the component should be bundled and

# translated from JSX and ES6/7 before rendering. Components are translated

# with Babel

translate = True,

# An optional boolean indicating that the component should be bundled for

# before rendering. If `translate` is set to True, this argument is ignored

bundle = True,

# An optional boolean indicating that React's `renderToStaticMarkup` method

Packages a React component so that it can be re-used on the client-side. JSX + ES6+7 files are translated

to JavaScript with [Babel](https://babeljs.io/).

Be aware that `bundle_component` is primarily a convenience method. Under the hood, it simply generates a webpack

config file which is passed to [python-webpack](https://github.com/markfinger/python-webpack).

If you require more flexibility in the bundling process, you are recommended to read the code and then use

python-webpack directly.

from react.bundle import bundle_component

bundle = bundle_component(

# A path to a file which exports the component. If the path is relative,

# django's static file finders will attempt to find the file

path='...',

# An optional boolean indicating that the component should be translated

# from JSX and ES6/7 during the bundling process

translate = True,

)

bundle.render()

bundle.get_var()

The result of rendering a component to its initial markup. RenderedComponents can be converted to

strings to output their generated markup. If `translate` or `bundle` was provided to `render_component`,

the component can also be mounted on the client-side to provide immediate interactivity.

component = render_component(...)

str(component)

component.render_markup()

component.render_js()

Note: if you wish to use the `render_js` method on the client-side, you **must** provide a `<script>`

element pointing to React. React is omitted from the bundled component so that build times are reduced,

and to ensure that multiple components can be included on a single page without duplicating React's

codebase.

Be aware that the mounting strategy used by `render_js` is only intended for convenience. If you want to

use a more custom solution for mounting or bundling, there are a couple of helpers provided to assist you:

component.bundle

print(component.bundle.render())

print(component.get_container_id())

print(component.render_mount_js())

The codebase in `react/bundle.py` also provides a number of examples illustrating how you can

programmatically generate configuration files for webpack.

Django integration

'DEVTOOL': 'eval' if DEBUG else None,

When calling `render_component` or `bundle_component`, python-react will attempt to use Django's

static file finders to resolve relative paths. If you provide a relative path such as

`'my_app/component.jsx'`, Django may resolve that path to an app's static folder, for example:

`'my_app/static/my_app/component.jsx'`.

Settings

Settings can be defined by calling `react.conf.settings.configure` with keyword arguments matching

the setting that you want to define. For example

from react.conf import settings

DEBUG = True

settings.configure(

DEVTOOL='eval' if DEBUG else None,

)

The [devtool](http://webpack.github.io/docs/configuration.html#devtool) that webpack uses when

bundling components.

During development, you are recommended to set this to `'eval'`, as it will assist with debugging

translated and bundled assets.

Default: `None`

When bundling a component with `translate=True`, this JavaScript regex is tested against every file to

determine if the babel loader should run over it.

Default: `'/.jsx?$/'`

cd tests

cd ..