Update docs (#548)

* Use crossorigin script tags, per React docs * Update documentation - Update .NET Core docs to React 16 - Clean up a few other documentation pages * Use cdnjs in documentation, for consistency
reactjs · Jun 11, 2018 · 5cbcd22 · 5cbcd22
1 parent 12ff098
commit 5cbcd22
Show file tree

Hide file tree

Showing 11 changed files with 330 additions and 303 deletions.
diff --git a/site/jekyll/getting-started/tutorial.md b/site/jekyll/getting-started/tutorial.md
diff --git a/site/jekyll/getting-started/tutorial_aspnet4.md b/site/jekyll/getting-started/tutorial_aspnet4.md
@@ -71,8 +71,8 @@ Replace the contents of the new view file with the following:
 </head>
 <body>
   <div id="content"></div>
-  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
-  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+  <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.development.js"></script>
+  <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.development.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script>
   <script src="@Url.Content("~/Scripts/Tutorial.jsx")"></script>
 </body>
@@ -874,7 +874,7 @@ class CommentBox extends React.Component {
   constructor(props) {
     super(props);
     this.state = { data: [] };
-		this.handleCommentSubmit = this.handleCommentSubmit.bind(this);
+    this.handleCommentSubmit = this.handleCommentSubmit.bind(this);
   }
   loadCommentsFromServer() {
     const xhr = new XMLHttpRequest();
@@ -885,15 +885,15 @@ class CommentBox extends React.Component {
     };
     xhr.send();
   }
-	handleCommentSubmit(comment) {
+  handleCommentSubmit(comment) {
     const comments = this.state.data;
     // Optimistically set an id on the new comment. It will be replaced by an
     // id generated by the server. In a production application you would likely
     // use a more robust system for ID generation.
     comment.Id = comments.length + 1;
     const newComments = comments.concat([comment]);
     this.setState({data: newComments});
-		
+
     const data = new FormData();
     data.append('Author', comment.Author);
     data.append('Text', comment.Text);
@@ -964,8 +964,8 @@ Now that the bundle has been registered, we need to reference it from the view:
 </head>
 <body>
   <div id="content"></div>
-  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
-  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+  <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.development.js"></script>
+  <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.development.js"></script>
   @Scripts.Render("~/bundles/main")
   @Html.ReactInitJavaScript()
 </body>
@@ -992,7 +992,7 @@ class CommentBox extends React.Component {
   constructor(props) {
     super(props);
     this.state = { data: this.props.initialData };
-		this.handleCommentSubmit = this.handleCommentSubmit.bind(this);
+    this.handleCommentSubmit = this.handleCommentSubmit.bind(this);
   }
   loadCommentsFromServer() {
     const xhr = new XMLHttpRequest();
@@ -1003,12 +1003,12 @@ class CommentBox extends React.Component {
     };
     xhr.send();
   }
-	handleCommentSubmit(comment) {
+  handleCommentSubmit(comment) {
     const comments = this.state.data;
     comment.Id = comments.length + 1;
     const newComments = comments.concat([comment]);
     this.setState({data: newComments});
-		
+
     const data = new FormData();
     data.append('Author', comment.Author);
     data.append('Text', comment.Text);
@@ -1074,8 +1074,8 @@ In the view, we will accept the list of comments as the model, and use `Html.Rea
     submitUrl = Url.Action("AddComment"),
     pollInterval = 2000
   })
-  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
-  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+  <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.development.js"></script>
+  <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.development.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script>
   <script src="@Url.Content("~/Scripts/Tutorial.jsx")"></script>
   @Html.ReactInitJavaScript()

diff --git a/site/jekyll/guides/cassette.md b/site/jekyll/guides/cassette.md
@@ -36,8 +36,8 @@ render from your view using Cassette:
 </head>
 <body>
 	...
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
+	<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.development.js"></script>
+	<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.development.js"></script>
 	@Bundles.RenderScripts()
 </body>
 ```

diff --git a/site/jekyll/guides/server-side-rendering.md b/site/jekyll/guides/server-side-rendering.md
@@ -47,8 +47,8 @@ code.
 ```html
 <!-- Load all your scripts normally before calling ReactInitJavaScript -->
 <!-- Assumes minification/combination is configured as per previous section -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
+<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.development.js"></script>
+<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.development.js"></script>
 @Scripts.Render("~/bundles/main")
 @Html.ReactInitJavaScript()
 ```
@@ -63,8 +63,8 @@ code.
 	</div>
 </div>
 
-<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
+<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.development.js"></script>
+<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.development.js"></script>
 <script src="/Scripts/HelloWorld.js"></script>
 <script>ReactDOM.render(HelloWorld({"name":"Daniel"}), document.getElementById("react1"));</script>
 ```

diff --git a/site/jekyll/index.md b/site/jekyll/index.md
@@ -112,8 +112,9 @@ bundles.Add(new JsxBundle("~/bundles/main").Include(
 })
 
 <!-- Initialise the component in JavaScript too -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
+<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.development.js"></script>
+<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.development.js"></script>
+
 @Scripts.Render("~/bundles/main")
 @Html.ReactInitJavaScript()
 ```

diff --git a/src/React.Sample.Cassette/Views/Home/Index.cshtml b/src/React.Sample.Cassette/Views/Home/Index.cshtml
@@ -20,9 +20,9 @@
 	@Html.React("CommentsBox", new { initialComments = Model.Comments })
 
 	<!-- Load all required scripts (React + the site's scripts) -->
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.development.js"></script>
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.development.js"></script>
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>
+	<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.development.js"></script>
+	<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.development.js"></script>
+	<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>
 	@Bundles.RenderScripts()
 	<!-- Render the code to initialise the component -->
 	@Html.ReactInitJavaScript()

diff --git a/src/React.Sample.CoreMvc/Views/Home/Index.cshtml b/src/React.Sample.CoreMvc/Views/Home/Index.cshtml
@@ -17,9 +17,9 @@
 	@Html.React("CommentsBox", new { initialComments = Model.Comments, ThrowRenderError = Model.ThrowRenderError })
 
 	<!-- Load all required scripts (React + the site's scripts) -->
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.development.js"></script>
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.development.js"></script>
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>
+	<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.development.js"></script>
+	<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.development.js"></script>
+	<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>
 	<script src="~/js/Sample.jsx"></script>
 	<!-- Render the code to initialise the component -->
 	@Html.ReactInitJavaScript()

diff --git a/src/React.Sample.Mvc4/Views/Home/Index.cshtml b/src/React.Sample.Mvc4/Views/Home/Index.cshtml
@@ -17,9 +17,9 @@
 	@Html.React("CommentsBox", new { initialComments = Model.Comments, page = Model.Page })
 
 	<!-- Load all required scripts (React + the site's scripts) -->
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.development.js"></script>
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.development.js"></script>
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>
+	<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.development.js"></script>
+	<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.development.js"></script>
+	<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>
 	@Scripts.Render("~/bundles/main")
 	<!-- Render the code to initialise the component -->
 	@Html.ReactInitJavaScript()

diff --git a/src/React.Sample.Owin/Content/Index.html b/src/React.Sample.Owin/Content/Index.html
@@ -8,9 +8,9 @@
 </head>
 <body>
 	<div id="container"></div>
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.development.js"></script>
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.development.js"></script>
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>
+	<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.development.js"></script>
+	<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.development.js"></script>
+	<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>
 	<script type="text/javascript" src="Sample.jsx"></script>
 	<script type="text/javascript">
 		ReactDOM.render(

diff --git a/src/React.Sample.Webpack/Views/Home/Index.cshtml b/src/React.Sample.Webpack/Views/Home/Index.cshtml
@@ -16,9 +16,9 @@
 	@Html.React("Components.CommentsBox", new { initialComments = Model.Comments })
 
 	<!-- Load all required scripts (React + the site's scripts) -->
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.development.js"></script>
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.development.js"></script>
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>
+	<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.development.js"></script>
+	<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.development.js"></script>
+	<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>
 	<script src="@Url.Content("~/build/client.bundle.js")"></script>
 	<!-- Render the code to initialise the component -->
 	@Html.ReactInitJavaScript()

diff --git a/tutorial-code/Views/Home/Index.cshtml b/tutorial-code/Views/Home/Index.cshtml
@@ -14,9 +14,9 @@
 		submitUrl = Url.Action("AddComment"),
 		pollInterval = 2000,
 	})
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.development.js"></script>
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.development.js"></script>
-	<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>
+	<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.development.js"></script>
+	<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.development.js"></script>
+	<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js"></script>
 	<script src="@Url.Content("~/js/tutorial.jsx")"></script>
 	@Html.ReactInitJavaScript()