README.md in render_react-1.0.0 vs README.md in render_react-1.0.1
- old
+ new
@@ -9,20 +9,24 @@
}
}
```
```html
-RenderReact.on_client_and_server("ExampleComponent", { example: "prop" })
+RenderReact.on_client_and_server("ExampleComponent", { example: "!" })
# =>
<div id="RenderReact-caac405e-1714-495e-aeb4-77b42be42291">
<marquee data-reactroot="" data-reactid="1" data-react-checksum="441921122">
<!-- react-text: 2 -->Hello Ruby <!-- /react-text --><!-- react-text: 3 -->!<!-- /react-text -->
</marquee>
</div>
<script>
- RenderReact.ReactDOM.render(RenderReact.React.createElement(RenderReact.components.ExampleComponent, {"example":"!"}),
- document.getElementById('RenderReact-caac405e-1714-495e-aeb4-77b42be42291'))
+ RenderReact.ReactDOM.render(
+ RenderReact.React.createElement(
+ RenderReact.components.ExampleComponent, {"example":"!"}
+ ),
+ document.getElementById('RenderReact-caac405e-1714-495e-aeb4-77b42be42291')
+ )
</script>
```
It is *bring your own tooling*: React is not included, nor any ES6 transpilers or module bundlers. It expects you to prepare the JavaScript bundle file in a specific format, which must contain React and all of your components.
@@ -40,21 +44,25 @@
**RenderReact** expects the JavaScript bundle to include a global variable called `RenderReact` with the following contents:
```javascript
{
- React: [variable which contains React, see first paragraph of https://facebook.github.io/react/docs/react-api.html],
- ReactDOM: [variable which contains ReactDOM, see first paragraph of https://facebook.github.io/react/docs/react-dom.html]
- ReactDOMServer: [variable which contains ReactDOMServer, see first paragraph of https://facebook.github.io/react/docs/react-dom-server.html],
+ React: [variable which contains React],
+ ReactDOM: [variable which contains ReactDOM],
+ ReactDOMServer: [variable which contains ReactDOMServer],
components: {
ComponentIdentifier1: [variable which contains the component 1],
ComponentIdentifier2: [variable which contains the component 2],
...
}
}
```
+- Where is **React**? See first paragraph of https://facebook.github.io/react/docs/react-api.html
+- Where is **ReactDOM**? See first paragraph of https://facebook.github.io/react/docs/react-dom.html
+- Where is **ReactDOMServer**? See first paragraph of https://facebook.github.io/react/docs/react-dom-server.html
+
You can have two different javascript bundle files - one for server rendering, and one for client-rendering.
- The client bundle has to be included into your application by a method of your choice. You may skip passing in `ReactDOMServer` for the client bundle
- The server bundle has to be passed to `RenderReact` (see Usage section). You may skip passing in `ReactDOM` for the server bundle
@@ -75,16 +83,16 @@
ExampleComponent: ExampleComponent
}
}
```
-(gets later imported as `RenderReact`)
+Gets imported as `RenderReact`
#### Example (With Browser Globals)
```javascript
-window.RenderReact {
+window.RenderReact = {
React: React,
ReactDOM: ReactDOM,
ReactDOMServer: ReactDOMServer,
components: {
ExampleComponent: ExampleComponent
@@ -98,10 +106,12 @@
```ruby
RenderReact.create_context! File.read('path/to/your/server-bundle.js'), mode: :client_and_server
```
+You can use it without a server-side bundle by not passing any file source.
+
The optional `mode:` keyword argument can have one of the following values
- `:client_and_server` (default) - component will be rendered server-side and mounted in the client
- `:client` - component will be mounted in the client
- `:server` - component will be render statically
@@ -122,6 +132,6 @@
## MIT License
Copyright (C) 2017 Jan Lelis <http://janlelis.com>. Released under the MIT license.
-React is BSD licensed.
\ No newline at end of file
+React is BSD licensed.