我想在浏览器上使用 React 作为原生库，而不需要任何额外的工具，例如 webpack 或 Babel。在开发过程中，我厌倦了将 React 代码转换为常规 JavaScript 代码。这也让我可以创建一个受益于 ES6 模块的 React 应用程序，因为它们也受到本机支持，并且不需要任何额外的工具，例如 webpack 或 Babel。
我研究过 React.createElement 但它不是很用户友好。这是 React.createElement 的示例
React.createElement('div', null, 'Hello');
// <div>Hello</div>
我想使用React的所有功能，包括钩子
useStateuseEffect有一个无需转译或捆绑即可使用 React 的解决方案。我编写了库 Arche，它为在纯 JavaScript 中使用 React 提供了一个不错的界面。以下是一些示例：
// --- these lines can go inside a global.js file
const ReactElement = Arche(React)
const { Div, P, Button } = ReactElement
const { useState } = React
// ---
const Example = ReactElement(() => {
const [count, setCount] = useState(0)
return Div([
P(`You clicked ${count} times`),
Button({
onClick() {
setCount(count + 1)
},
}, 'Click me'),
])
})
ReactDOM.render(Example(), document.getElementById('react-root')) <html>
<head>
<script src="https://unpkg.com/[email protected]/dist/rubico.min.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/index.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js" crossorigin></script>
</head>
<body>
<div id="react-root"></div>
</body>
</html>语法如下：
Arche(React {
createElement: (type, props?, children?)=>ReactElement,
}, options? {
styled?: {
div: function,
p: funcion,
span: function,
// etc
},
styledMemoizationCap?: number, // defaults to 1000
}) -> ReactElement