CH22466[sc-website] - Update Node, YARN, Gatsby, React and other depe…

…ndencies, Update MDX syntax (#1626)

* fix: support view-helpers-api.md file in mdx v2 for sc-website

* fix: support code-splitting.md file in mdx v2 for sc-website

* fix: support deferred-rendering.md file in mdx v2 for sc-website

* fix: <!-- not displayed in docs after changes

docs/api/view-helpers-api.md

@@ -22,7 +22,7 @@ Uncommonly used options:
   id: nil,
 ```
 
-- **component_name:** Can be a React component, created using a React Function Component, an ES6 class or a Render-Function that returns a React component (or, only on the server side, an object with shape { redirectLocation, error, renderedHtml }), or a "renderer function" that manually renders a React component to the dom (client side only). Note, a "renderer function" is a special type of "Render-Function." A "renderer function" takes a 3rd param of a DOM ID.
+- **component_name:** Can be a React component, created using a React Function Component, an ES6 class or a Render-Function that returns a React component (or, only on the server side, an object with shape `{ redirectLocation, error, renderedHtml }`), or a "renderer function" that manually renders a React component to the dom (client side only). Note, a "renderer function" is a special type of "Render-Function." A "renderer function" takes a 3rd param of a DOM ID.
   All options except `props, id, html_options` will inherit from your `react_on_rails.rb` initializer, as described [here](https://www.shakacode.com/react-on-rails/docs/guides/configuration/).
 - **general options:**
   - **props:** Ruby Hash which contains the properties to pass to the react object, or a JSON string. If you pass a string, we'll escape it for you.

docs/javascript/code-splitting.md

@@ -16,10 +16,9 @@ Let's say you're requesting a page that needs to fetch a code chunk from the ser
 
 > Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 
-> (client) <!-- react-empty: 1 -
+> (client) `<!-- react-empty: 1 -`
 
-> (server) <div data-reactroot="
-<!--This comment is here because the comment beginning on line 13 messes up Sublime's markdown parsing-->
+> (server) `<div data-reactroot="`
 
 Different markup is generated on the client than on the server. Why does this happen? When you register a component or Render-Function with `ReactOnRails.register`, react on rails will render the component as soon as the page loads. However, react-router renders a comment while waiting for the code chunk to be fetched from the server. This means that react will tear all of the server rendered code out of the DOM, and then rerender it a moment later once the code chunk arrives from the server, defeating most of the purpose of server rendering.
 
@@ -119,7 +118,7 @@ See:
 
 - [spec/dummy/client/app/startup/client-bundle.js](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/startup/client-bundle.js)
 - [spec/dummy/client/app/packs/server-bundle.js](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/packs/server-bundle.js)
-- [spec/dummy/client/app/startup/DeferredRenderAppClient](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/startup/DeferredRenderAppClient.jsx)<-- Code splitting implemented here
+- [spec/dummy/client/app/startup/DeferredRenderAppClient](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/startup/DeferredRenderAppClient.jsx) # Code splitting implemented here
 - [spec/dummy/client/app/startup/DeferredRenderAppServer.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/startup/DeferredRenderAppServer.jsx)
 - [spec/dummy/client/app/components/DeferredRender.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/components/DeferredRender.jsx)
 - [spec/dummy/client/app/components/DeferredRenderAsyncPage.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/components/DeferredRenderAsyncPage.jsx)

docs/outdated/deferred-rendering.md

@@ -1,6 +1,6 @@
 # Deferred Rendering
 
-Please see [React on Rails Pro](https://www.shakacode.com/react-on-rails-pro/] if you are interested in code splitting using
+Please see [React on Rails Pro](https://www.shakacode.com/react-on-rails-pro/) if you are interested in code splitting using
 [loadable-components.com](https://loadable-components.com/docs) with React on Rails.
 
 -----
@@ -15,10 +15,9 @@ Let's say you're requesting a page that needs to fetch a code chunk from the ser
 
 > Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 
-> (client) <!-- react-empty: 1 -
+> (client) `<!-- react-empty: 1 -`
 
-> (server) <div data-reactroot="
-<!--This comment is here because the comment beginning on line 13 messes up Sublime's markdown parsing-->
+> (server) `<div data-reactroot="`
 
 Different markup is generated on the client than on the server. Why does this happen? When you register a component or Render-Function with `ReactOnRails.register`, React on Rails will by default render the component as soon as the page loads. However, code splitting requires that components render at a later time when the JavaScript chunks have loaded.
 
@@ -35,5 +34,5 @@ Do not attempt to register a renderer function on the server. Instead, register
 
 
 ## React on Rails Pro
-[React on Rails Pro](https://www.shakacode.com/react-on-rails-pro/] includes a complete setup using this technique for code splitting using
+[React on Rails Pro](https://www.shakacode.com/react-on-rails-pro/) includes a complete setup using this technique for code splitting using
 [loadable-components.com](https://loadable-components.com/docs) with React on Rails.