Skip to content

Commit f565c92

Browse files
jimfbjim
authored and
jim
committed
Added docs for environment integration.
(cherry picked from commit 66bfee6)
1 parent fc4bf81 commit f565c92

File tree

5 files changed

+85
-3
lines changed

5 files changed

+85
-3
lines changed

docs/_data/nav_docs.yml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,8 @@
5353
title: Language Tooling
5454
- id: package-management
5555
title: Package Management
56+
- id: environments
57+
title: Server-side Environments
5658
- id: addons
5759
title: Add-Ons
5860
subitems:

docs/docs/09-tooling-integration.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,4 @@ We've tried to make React as environment-agnostic as possible. People use React
1010

1111
* [Language Tooling](/react/docs/language-tooling.html) describes how to set up tools like Babel to transpile JSX for a better development experience.
1212
* [Package Management](/react/docs/package-management.html) describes how to configure React as a dependency of your project.
13-
13+
* [Server-side Environments](/react/docs/environments.html) describes how to configure your environment for server-side rendering with React.

docs/docs/09.2-package-management.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ id: package-management
33
title: Package Management
44
permalink: package-management.html
55
prev: language-tooling.html
6-
next: addons.html
6+
next: environments.html
77
---
88

99
## CDN-hosted React

docs/docs/09.3-environments.md

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
---
2+
id: environments
3+
title: Server-side Environments
4+
permalink: environments.html
5+
prev: package-management.html
6+
next: addons.html
7+
---
8+
9+
One of the great things about React is that it doesn't require the DOM as a dependency, which means it is possible to render a React application on the server and send the HTML markup down to the client. There are a few things that React expects, so this guide will help you get started in your preferred environment.
10+
11+
12+
## Nashorn
13+
14+
Nashorn is a lightweight high-performance JavaScript runtime that runs within the JVM. React should run out of the box in Java 8+.
15+
16+
Example:
17+
18+
```java
19+
import java.io.IOException;
20+
import java.io.InputStream;
21+
import java.net.MalformedURLException;
22+
import java.net.URL;
23+
24+
import javax.script.ScriptEngine;
25+
import javax.script.ScriptEngineManager;
26+
import javax.script.ScriptException;
27+
28+
import org.apache.commons.io.IOUtils; // https://commons.apache.org/proper/commons-io/download_io.cgi
29+
30+
public class ReactRender
31+
{
32+
public static void main(String[] args) throws ScriptException, IOException {
33+
ScriptEngine nashorn = new ScriptEngineManager().getEngineByName("nashorn");
34+
35+
nashorn.eval(getScript("https://fb.me/react-15.0.1.js"));
36+
nashorn.eval(getScript("https://fb.me/react-dom-server-15.0.1.js"));
37+
38+
System.out.println(nashorn.eval("ReactDOMServer.renderToString(React.createElement('div', {}, 'Hello World!'));"));
39+
}
40+
41+
public static String getScript(String url) throws MalformedURLException, IOException {
42+
InputStream stream = new URL(url).openStream();
43+
try {
44+
return IOUtils.toString(stream);
45+
}
46+
finally {
47+
stream.close();
48+
}
49+
}
50+
}
51+
```
52+
53+
If your application uses node modules, or you want to transform JSX in Nashorn, you will need to do some additional environment setup. The following resources may be helpful in getting you started:
54+
55+
* [http://winterbe.com/posts/2015/02/16/isomorphic-react-webapps-on-the-jvm/](http://winterbe.com/posts/2015/02/16/isomorphic-react-webapps-on-the-jvm/)
56+
* [https://github.com/nodyn/jvm-npm](https://github.com/nodyn/jvm-npm)
57+
* [https://gist.github.com/aesteve/883e0fd33390451cb8eb](https://gist.github.com/aesteve/883e0fd33390451cb8eb)
58+
59+
>Note: Using Babel within Nashorn will require Java 8u72+, as update 72 fixed [JDK-8135190](https://bugs.openjdk.java.net/browse/JDK-8135190).
60+
61+
62+
63+
## Node
64+
65+
You can also use React within a node server-side environment.
66+
67+
Example:
68+
69+
```js
70+
var React = require('react');
71+
var ReactDOMServer = require('react-dom/server');
72+
73+
var element = React.createElement('div', {}, 'Hello World!');
74+
console.log(ReactDOMServer.renderToString(element));
75+
```
76+
77+
>Note: Some versions of node have an `Object.assign` implementation that does not preserve key order. This can cause errors when validating the markup, creating a warning that says "React attempted to reuse markup in a container but the checksum was invalid". If you run into this issue, you can override `Object.assign` to use a polyfill that preserves key order. For more details, see [Issue #6451](https://github.com/facebook/react/issues/6451).
78+
79+
80+

docs/docs/10-addons.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
id: addons
33
title: Add-ons
44
permalink: addons.html
5-
prev: package-management.html
5+
prev: environments.html
66
next: animation.html
77
---
88

0 commit comments

Comments
 (0)