- <%%= react_component("HelloWorldComponent", @app_props_hello, prerender: false, trace: true) %>
-
-<%= react_component("HelloWorldComponent", @app_props_hello, prerender: false, trace: true) %>
-
- <%%= react_component("HelloWorldComponent", @app_props_hello_again, prerender: false, trace: true) %>
-
-
-<%= react_component("HelloWorldComponent", @app_props_hello_again, prerender: false, trace: true) %>
-
<%% cache @app_props_server_render do %>
<%% = react_component("App", @app_props_server_render, trace: true) %>
@@ -39,16 +22,52 @@
<% cache @app_props_server_render do %>
<% puts "=" * 80 %>
- <% puts "server rendering react component" %>
+ <% puts "server rendering react components" %>
<% puts "=" * 80 %>
<%= react_component("App", @app_props_server_render, trace: true) %>
+
+
+ Server Rendered/Cached React Component Without Redux
+
+ <%% cache @app_props_server_render do %>
+ <%% = react_component("HelloWorld", @app_props_server_render, trace: true) %>
+ <%% end %>
+
+
+ And this is an example of a server rendered React component without Redux
+
+
+ <%= react_component("HelloWorld", @app_props_server_render, trace: true) %>
<% end %>
+
+
+Simple Client Rendered Component
+
+
+ <%%= react_component("HelloWorldApp", @app_props_hello, prerender: false, trace: true) %>
+
+<%= react_component("HelloWorldApp", @app_props_hello, prerender: false, trace: true) %>
+
+Showing you can put the same component twice on a page with different props
+
+ <%%= react_component("HelloWorldApp", @app_props_hello_again, prerender: false, trace: true) %>
+
+<%= react_component("HelloWorldApp", @app_props_hello_again, prerender: false, trace: true) %>
+
+
+Simple Component Without Redux
+
+ <%%= react_component("HelloWorld", @app_props_hello, prerender: false, trace: true) %>
+ <%%= react_component("HelloES5", @app_props_hello, prerender: false, trace: true) %>
+
+<%= react_component("HelloWorld", @app_props_hello, prerender: false, trace: true) %>
+<%= react_component("HelloES5", @app_props_hello, prerender: false, trace: true) %>
+
Non-React Component
-For example, Suppose you have some JavaScript that generates a string of HTML:
-
+For example, Suppose you have some JavaScript that generates a string of HTML:
this.HelloString.world()
diff --git a/spec/dummy/client/app/components/HelloES5.jsx b/spec/dummy/client/app/components/HelloES5.jsx
new file mode 100644
index 0000000000..e2051efa36
--- /dev/null
+++ b/spec/dummy/client/app/components/HelloES5.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+// Super simple example of React component using React.createClass
+const HelloES5 = React.createClass({
+
+ getInitialState() {
+ return this.props.helloWorldData;
+ },
+
+ _handleChange() {
+ const name = React.findDOMNode(this.refs.name).value;
+ this.setState({name});
+ },
+
+ render() {
+ const { name } = this.state;
+
+ return (
+
+
+ Hello ES5, {name}!
+
+
+ Say hello to:
+
+
+
+ );
+ },
+});
+
+export default HelloES5;
diff --git a/spec/dummy/client/app/startup/ClientApp.jsx b/spec/dummy/client/app/startup/ClientApp.jsx
index f1568fc829..1e4f092428 100644
--- a/spec/dummy/client/app/startup/ClientApp.jsx
+++ b/spec/dummy/client/app/startup/ClientApp.jsx
@@ -10,6 +10,8 @@ import middleware from 'redux-thunk';
import reducers from '../reducers/reducersIndex';
import HelloWorldContainer from '../components/HelloWorldContainer';
+import HelloWorld from '../components/HelloWorld';
+import HelloES5 from '../components/HelloES5';
/*
* Export a function that takes the props and returns a ReactComponent.
@@ -28,3 +30,15 @@ window.App = props => {
);
return reactComponent;
};
+
+/*
+ * If you wish to create a React component via a function, rather than simply props,
+ * then you need to set the property "generator" on that function to true.
+ * When that is done, the function is invoked with a single parameter of "props",
+ * and that function should return a react element.
+ */
+window.App.generator = true;
+
+// This is an example of how to render a React component directly, without using Redux
+window.HelloWorld = HelloWorld;
+window.HelloES5 = HelloES5;
diff --git a/spec/dummy/client/app/startup/ClientHelloWorldComponent.jsx b/spec/dummy/client/app/startup/ClientHelloWorldApp.jsx
similarity index 52%
rename from spec/dummy/client/app/startup/ClientHelloWorldComponent.jsx
rename to spec/dummy/client/app/startup/ClientHelloWorldApp.jsx
index 8ef9628a4f..40b73a170e 100644
--- a/spec/dummy/client/app/startup/ClientHelloWorldComponent.jsx
+++ b/spec/dummy/client/app/startup/ClientHelloWorldApp.jsx
@@ -1,7 +1,5 @@
// Top level component for simple client side only rendering
-
import React from 'react';
-
import HelloWorld from '../components/HelloWorld';
/*
@@ -9,6 +7,14 @@ import HelloWorld from '../components/HelloWorld';
* This is used for the client rendering hook after the page html is rendered.
* React will see that the state is the same and not do anything.
*/
-window.HelloWorldComponent = props => {
+window.HelloWorldApp = props => {
return