forked from facebook/react
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added docs for environment integration.
- Loading branch information
Showing
5 changed files
with
85 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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). | ||
|
||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters