最简版 mini-react：新手必备指南

2023-12-10 18:37:53

来吧，小伙伴们！让我们踏上 mini-react 的激动人心的学习之旅吧。今天，我们将亲手打造我们自己的 mini-react，体验从无到有的构建过程。

mini-react 是一个精简版的 React，非常适合新手入门 React 的世界。它保留了 React 的核心思想，但去除了复杂性，让我们可以更轻松地理解 React 的运作方式。

为了开启我们的旅程，让我们先创建一个 Vite React 项目。在终端中键入以下命令：

npx create-vite-app <project-name> --template react

稍等片刻，Vite 就会帮我们创建一个 React 项目。

接下来，让我们安装 mini-react：

npm install mini-react

一切都准备就绪，让我们开始编写我们的第一个 mini-react 组件！

// MyButton.js
import { createElement } from 'mini-react';

const MyButton = props => {
  return createElement('button', props, props.children);
};

export default MyButton;

我们创建了一个简单的按钮组件，它接受一个 children 属性，用于显示按钮上的文字。

现在，让我们在 App.js 中使用我们的按钮：

import MyButton from './MyButton';

const App = () => {
  return (
    createElement('div', null, createElement(MyButton, { children: '点击我' }))
  );
};

export default App;

我们创建了一个名为 App 的组件，它包含一个包含我们的 MyButton 组件的 div。

最后，让我们启动我们的应用程序：