-
Notifications
You must be signed in to change notification settings - Fork 50.5k
Cleanup environments doc #6519
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Cleanup environments doc #6519
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -9,6 +9,27 @@ 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. | ||
|
|
||
|
|
||
| ## Node.js | ||
|
|
||
| [Node.js](http://nodejs.org/) is a popular JavaScript runtime that comes with an extensive core library and support for installing packages from npm to expand on the basic functionality. As we've described elsewhere in the documentation, you can install `react` and `react-dom` from npm. | ||
|
|
||
| Example: | ||
|
|
||
| ```js | ||
| var React = require('react'); | ||
| var ReactDOMServer = require('react-dom/server'); | ||
|
|
||
| var element = React.createElement('div', null, 'Hello World!'); | ||
| console.log(ReactDOMServer.renderToString(element)); | ||
| ``` | ||
|
|
||
| If you use JSX, you may want to pre-compile your components. Alternatively you may want to consider using [Babel's require hook](https://babeljs.io/docs/usage/require/) or [`babel-node`](https://babeljs.io/docs/usage/cli/#babel-node). | ||
|
|
||
| > Note: | ||
| > | ||
| > Some versions of Node.js 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). | ||
|
|
||
|
|
||
| ## Nashorn | ||
|
|
||
| Nashorn is a lightweight high-performance JavaScript runtime that runs within the JVM. React should run out of the box in Java 8+. | ||
|
|
@@ -18,63 +39,37 @@ Example: | |
| ```java | ||
| import java.io.IOException; | ||
| import java.io.InputStream; | ||
| import java.net.MalformedURLException; | ||
| import java.net.URL; | ||
| import java.io.FileReader; | ||
|
|
||
| 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!'));")); | ||
| } | ||
| // These files can be downloaded as a part of the starter kit | ||
| // from https://facebook.github.io/react | ||
| nashorn.eval(new FileReader("path/to/react.js")); | ||
| nashorn.eval(new FileReader("path/to/react-dom-server.js")); | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think we should have a comments indicating where this file can be downloaded, because we don't put the
Member
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 👍 |
||
|
|
||
| public static String getScript(String url) throws MalformedURLException, IOException { | ||
| InputStream stream = new URL(url).openStream(); | ||
| try { | ||
| return IOUtils.toString(stream); | ||
| } | ||
| finally { | ||
| stream.close(); | ||
| } | ||
| System.out.println(nashorn.eval( | ||
| "ReactDOMServer.renderToString(" + | ||
| "React.createElement('div', null, 'Hello World!')" + | ||
| ");" | ||
| )); | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| 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: | ||
| If your application uses npm packages, 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). | ||
|
|
||
|
|
||
|
|
||
| > Note: | ||
| > | ||
| > Using Babel within Nashorn will require Java 8u72+, as update 72 fixed [JDK-8135190](https://bugs.openjdk.java.net/browse/JDK-8135190). | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Might as well have a link here too, for consistency.