Skip to content

Commit

Permalink
Added docs for environment integration.
Browse files Browse the repository at this point in the history
  • Loading branch information
jimfb authored and jim committed Apr 14, 2016
1 parent 932334d commit 66bfee6
Show file tree
Hide file tree
Showing 5 changed files with 85 additions and 3 deletions.
2 changes: 2 additions & 0 deletions docs/_data/nav_docs.yml
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,8 @@
title: Language Tooling
- id: package-management
title: Package Management
- id: environments
title: Server-side Environments
- id: addons
title: Add-Ons
subitems:
Expand Down
2 changes: 1 addition & 1 deletion docs/docs/09-tooling-integration.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,4 @@ We've tried to make React as environment-agnostic as possible. People use React

* [Language Tooling](/react/docs/language-tooling.html) describes how to set up tools like Babel to transpile JSX for a better development experience.
* [Package Management](/react/docs/package-management.html) describes how to configure React as a dependency of your project.

* [Server-side Environments](/react/docs/environments.html) describes how to configure your environment for server-side rendering with React.
2 changes: 1 addition & 1 deletion docs/docs/09.2-package-management.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ id: package-management
title: Package Management
permalink: package-management.html
prev: language-tooling.html
next: addons.html
next: environments.html
---

## CDN-hosted React
Expand Down
80 changes: 80 additions & 0 deletions docs/docs/09.3-environments.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
---
id: environments
title: Server-side Environments
permalink: environments.html
prev: package-management.html
next: addons.html
---

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.


## Nashorn

Nashorn is a lightweight high-performance JavaScript runtime that runs within the JVM. React should run out of the box in Java 8+.

Example:

```java
import java.io.IOException;
import java.io.InputStream;
import java.net.MalformedURLException;
import java.net.URL;

import javax.script.ScriptEngine;
import javax.script.ScriptEngineManager;
import javax.script.ScriptException;

import org.apache.commons.io.IOUtils; // https://commons.apache.org/proper/commons-io/download_io.cgi

public class ReactRender
{
public static void main(String[] args) throws ScriptException, IOException {
ScriptEngine nashorn = new ScriptEngineManager().getEngineByName("nashorn");

nashorn.eval(getScript("https://fb.me/react-15.0.1.js"));
nashorn.eval(getScript("https://fb.me/react-dom-server-15.0.1.js"));

System.out.println(nashorn.eval("ReactDOMServer.renderToString(React.createElement('div', {}, 'Hello World!'));"));
}

public static String getScript(String url) throws MalformedURLException, IOException {
InputStream stream = new URL(url).openStream();
try {
return IOUtils.toString(stream);
}
finally {
stream.close();
}
}
}
```

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:

* [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/)
* [https://github.com/nodyn/jvm-npm](https://github.com/nodyn/jvm-npm)
* [https://gist.github.com/aesteve/883e0fd33390451cb8eb](https://gist.github.com/aesteve/883e0fd33390451cb8eb)

>Note: Using Babel within Nashorn will require Java 8u72+, as update 72 fixed [JDK-8135190](https://bugs.openjdk.java.net/browse/JDK-8135190).


## Node

You can also use React within a node server-side environment.

Example:

```js
var React = require('react');
var ReactDOMServer = require('react-dom/server');

var element = React.createElement('div', {}, 'Hello World!');
console.log(ReactDOMServer.renderToString(element));
```

>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).


2 changes: 1 addition & 1 deletion docs/docs/10-addons.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
id: addons
title: Add-ons
permalink: addons.html
prev: package-management.html
prev: environments.html
next: animation.html
---

Expand Down

0 comments on commit 66bfee6

Please sign in to comment.