Html网页中驱动React组件

Html网页中驱动React组件

本文是《Html网页中驱动Vue组件》的姊妹篇。

通常React组件的使用办法，是通过create-react-app创建一个应用骨架，然后import相应组件，在应用中调用ReactDOM.createRoot创建根结点，然后初始化整个页面、应用。

这样得到的应用，是需要进行编译、打包转换后的js/css等文件。

我希望是在手工弄一个原始纯净的HTML，将React组件的js文件引入，然后初始化起来。

这样的做法类似于webpack的dll组件思想，组件应该是方便加载、适配、运行的，而不是必须编译、打包后才能正常支行。

React官方网站对这种情况即有相关说明与支持：https://zh-hans.reactjs.org/docs/add-react-to-a-website.html

1.前提

首先，能够这么做的React组件，必须打包成umd之类的组件包。

2.目标组件

选定math3d-component组件，github链接：https://github.com/ecuber/math3d-component

如下代码为GitHub的Readme中的组件使用示例代码。

import React from 'react'
import Math3D from 'math3d-component'
import myGraphs from './myGraphs.json'

export default const App = (props) => {
  /**
   * You may store your dehydrated graphs however you like. If you have an existing database 
   * for your website, that's a great option! In this case, I have a file called myGraphs.json
   * in the same directory as this component file.
   * */
  const graphID = 'z6rPenvx'
  const dehydratedScene = myGraphs[graphID] // a JSON object containing the Math3D scene data

  return <Math3D dehydrated={dehydratedScene} style={{ width: '80%' }} />
}

3.页面初始化脚本

页面初始化脚本，参考链接https://zh-hans.reactjs.org/docs/add-react-to-a-website.html说明，并根据应用转化，如下：

  <script>
    const saveGraph = (dehydrated) => {
	  console.log("json data: ", JSON.stringify(dehydrated));
	}
    var math3d_json = JSON.parse('{"math3d01":{"metadata":{"id":"math3d01","title":"Production Demo","versionAtCreation":"1.2.9"},"sortableTree":{"root":["mainFolder"],"mainFolder":["2","6"]},"folders":{"cameraFolder":{"isCollapsed":false}},"mathSymbols":{"6":{"type":"VARIABLE_SLIDER","min":"0","max":"2\\\\pi","isAnimating":true,"speedMultiplier":0.125}},"mathGraphics":{"2":{"type":"EXPLICIT_SURFACE_POLAR","color":"bluered","expr":"_f(r,\\\\theta)=\\\\frac{1}{2}r^2\\\\cdot\\\\cos\\\\left(4\\\\left(\\\\theta+T\\\\right)\\\\right)"},"camera":{"type":"CAMERA","relativePosition":[1.338764790884554,-0.5084826992278124,0.8021663774172647],"relativeLookAt":[0,0,0]}},"sliderValues":{"6":1.655881127829626}},"math3d02":{"metadata":{"title":"math3d02"},"sortableTree":{"root":["mainFolder"],"mainFolder":["1"]},"mathGraphics":{"1":{"type":"EXPLICIT_SURFACE","color":"bluered"},"camera":{"type":"CAMERA","relativePosition":[0.4999999999999996,-1.9999999999999984,0.49999999999999933],"relativeLookAt":[0,0,0]}}},"math3d03":{"metadata":{"id":"math3d03"},"sortableTree":{"root":["mainFolder"],"mainFolder":["1"]},"mathGraphics":{"1":{"type":"EXPLICIT_SURFACE","color":"rainbow"},"camera":{"type":"CAMERA","relativePosition":[0.4999999999999996,-1.9999999999999984,0.49999999999999933],"relativeLookAt":[0,0,0]}}},"math3d04":{"metadata":{"id":"math3d04","title":"Slanty Arrows"},"sortableTree":{"root":["mainFolder"],"mainFolder":["4","5"]},"folders":{"cameraFolder":{"isCollapsed":false}},"mathSymbols":{"5":{"type":"VARIABLE_SLIDER","min":"0","max":"2\\\\pi","isAnimating":true,"speedMultiplier":2}},"mathGraphics":{"4":{"type":"VECTOR_FIELD","color":"#8e44ad","expr":"_f(x,y,z)=\\\\frac{[\\\\sin\\\\left(T+y\\\\right),\\\\ \\\\cos\\\\left(-T-x\\\\right),\\\\ 0.5]}{\\\\sqrt{x^2+y^2}}"},"camera":{"type":"CAMERA","relativePosition":[-0.0000019807056698150444,1.0714418019475147e-8,1.9807346488578335],"relativeLookAt":[0,0,0]}},"sliderValues":{"5":4.293509959906047}},"math3d05":{"metadata":{"id":"math3d05","title":"Yo-Yo"},"sortableTree":{"root":["mainFolder"],"mainFolder":["9"]},"folders":{"cameraFolder":{"isCollapsed":false}},"mathGraphics":{"9":{"type":"PARAMETRIC_SURFACE"},"camera":{"type":"CAMERA","relativePosition":[0.551530987800248,-1.3354629664836548,0.7177437429437827],"relativeLookAt":[0,0,0]}}}}');
	var math3d = React.createElement(window["math3d-component"].default, {dehydrated: math3d_json.math3d04, style:{width: '80%'}, save: saveGraph, dev: true}, );
	ReactDOM.render(math3d, document.getElementById('root'));
  </script>

这儿的math3d_json是从上面的myGraphs.json中提取出来的，核心代码在这儿：

	var math3d = React.createElement(window["math3d-component"].default, {dehydrated: math3d_json.math3d04, style:{width: '80%'}, save: saveGraph, dev: true}, );
	ReactDOM.render(math3d, document.getElementById('root'));

4.拼装

完整的HTML需要引入依赖的react.development.js/react-dom.development.js，组件的js与css等，组件依赖的jquery/mathquill/mathbox等，如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="/assets/math3d-component/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Website using this D.M.A.F.: Dope Math Authoring Framework" />

  <!-- JQuery -->
  <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
  <!-- MathQuill -->
  <script src="/assets/math3d-component/mathquill.min.js"></script>
  <link rel="stylesheet" href="/assets/math3d-component/mathquill.css">
  <!-- MathBox -->
  <script src="/assets/math3d-component/mathbox-bundle.min.js"></script>
  <link rel="stylesheet" href="/assets/math3d-component/mathbox.css">

    <link rel="manifest" href="/assets/math3d-component/manifest.json">
    <link rel="shortcut icon" href="/assets/math3d-component/favicon.ico">
	<script type="application/x-javascript" src="/assets/math3d-component/react.development.js"></script>
    <script type="application/x-javascript" src="/assets/math3d-component/react-dom.development.js"></script> 
    <!-- Math3D component -->
    <script type="application/x-javascript" src="/assets/math3d-component/dist/bundle.js"></script>

  <title>MAF App</title>
</head>

<body>
  <noscript>
    You need to enable JavaScript to run this app.
  </noscript>

  <h1 style="width: 95vw;margin: 1.5rem auto;"><strong>Math3D Component Demo</strong></h1>
  <div id="root">
  </div>

  <script>
    //...
  </script>
</body>

</html>

HTML中的/assets等目录即为网站部署的资源文件路径。

5.总结

React组件质量相对较好些，但这个封装性也是看组件开发者。