Use React element factory to instantiate component. Closes #46

Author: Daniel15

src/React.Sample.Mvc4/Content/Sample.jsx

@@ -9,8 +9,7 @@
 
 var CommentsBox = React.createClass({
 	propTypes: {
-		initialComments: React.PropTypes.array.isRequired,
-		commentsPerPage: React.PropTypes.number.isRequired
+		initialComments: React.PropTypes.array.isRequired
 	},
 	getInitialState() {
 		return {

src/React.Sample.Mvc4/Views/Home/Index.cshtml

@@ -17,7 +17,7 @@
 	@Html.React("CommentsBox", new { initialComments = Model.Comments })
 
 	<!-- Load all required scripts (React + the site's scripts) -->
-	<script src="http://fb.me/react-0.12.0.min.js"></script>
+	<script src="http://fb.me/react-0.12.0.js"></script>
 	@Scripts.Render("~/bundles/main")
 	<!-- Render the code to initialise the component -->
 	@Html.ReactInitJavaScript()

src/React.Tests/Core/ReactComponentTest.cs

@@ -42,15 +42,15 @@ public void RenderHtmlShouldCallRenderComponent()
 			};
 			component.RenderHtml();
 
-			environment.Verify(x => x.Execute<string>(@"React.renderToString(Foo({""hello"":""World""}))"));
+			environment.Verify(x => x.Execute<string>(@"React.renderToString(React.createElement(Foo, {""hello"":""World""}))"));
 		}
 
 		[Test]
 		public void RenderHtmlShouldWrapComponentInDiv()
 		{
 			var environment = new Mock<IReactEnvironment>();
 			environment.Setup(x => x.Execute<bool>("typeof Foo !== 'undefined'")).Returns(true);
-			environment.Setup(x => x.Execute<string>(@"React.renderToString(Foo({""hello"":""World""}))"))
+			environment.Setup(x => x.Execute<string>(@"React.renderToString(React.createElement(Foo, {""hello"":""World""}))"))
 				.Returns("[HTML]");
 			var config = new Mock<IReactSiteConfiguration>();
 
@@ -69,7 +69,7 @@ public void RenderHtmlShouldWrapComponentInCustomElement()
 			var config = new Mock<IReactSiteConfiguration>();
 			var environment = new Mock<IReactEnvironment>();
 			environment.Setup(x => x.Execute<bool>("typeof Foo !== 'undefined'")).Returns(true);
-			environment.Setup(x => x.Execute<string>(@"React.renderToString(Foo({""hello"":""World""}))"))
+			environment.Setup(x => x.Execute<string>(@"React.renderToString(React.createElement(Foo, {""hello"":""World""}))"))
 				.Returns("[HTML]");
 
 			var component = new ReactComponent(environment.Object, config.Object, "Foo", "container")
@@ -95,7 +95,7 @@ public void RenderJavaScriptShouldCallRenderComponent()
 			var result = component.RenderJavaScript();
 
 			Assert.AreEqual(
-				@"React.render(Foo({""hello"":""World""}), document.getElementById(""container""))",
+				@"React.render(React.createElement(Foo, {""hello"":""World""}), document.getElementById(""container""))",
 				result
 			);
 		}

src/React/IReactEnvironment.cs

@@ -27,6 +27,11 @@ public interface IReactEnvironment
 		/// </summary>
 		string Version { get; }
 
+		/// <summary>
+		/// Gets the name and version of the JavaScript engine in use by ReactJS.NET
+		/// </summary>
+		string EngineVersion { get; }
+
 		/// <summary>
 		/// Executes the provided JavaScript code.
 		/// </summary>

src/React/ReactComponent.cs

@@ -148,7 +148,7 @@ private string GetComponentInitialiser()
 		{
 			var encodedProps = JsonConvert.SerializeObject(Props, _configuration.JsonSerializerSettings); // SerializeObject accepts null settings
 			return string.Format(
-				"{0}({1})",
+				"React.createElement({0}, {1})",
 				ComponentName,
 				encodedProps
 			);

src/React/ReactEnvironment.cs

@@ -131,6 +131,14 @@ public bool EngineSupportsJsxTransformer
 			get { return Engine.SupportsJsxTransformer(); }
 		}
 
+		/// <summary>
+		/// Gets the version of the JavaScript engine in use by ReactJS.NET
+		/// </summary>
+		public string EngineVersion
+		{
+			get { return Engine.Name + " " + Engine.Version; }
+		}
+
 		/// <summary>
 		/// Gets the version number of ReactJS.NET
 		/// </summary>