79 - 《手写 Umi 一：让 React Run 起来》

本篇是手写 Umi 的第一篇，让 React Run 起来。目标是 70+ 行代码写一个 TodoList Demo，见图 1，用我当下觉得极简的方式。环境方面无要求，参考 76 - 《2022 最潮的 Demo 编写方式》，一个 HTML 文件即可。知识储备需要基本 React 经验。

0️⃣

高效的教与学。

很多网上教学的课程都是从基础甚至历史开始讲起的，这和我们九年义务教育的方法是一致的，但是不是高效的学习方式呢？上周翻了下支付宝的前锋营的课程，也是如此，上来先是讲前端是什么、前端的未来、JavaScript 语法进阶、TS 基础、环境搭建等。从基础学不是不好，只是效率不高，可以有更好的方式。

我倾向的方式是实践为主。先从中间开始，教流程性的知识，让大家知道如何 run 起来，先有个手感，形成骨架。然后再逐渐往前讲基础，往后讲深度，逐渐加入事实性和概念性的知识。先有流程性的骨架，后续的知识才更容易粘附在上面。

1️⃣

找个目录，新增 index.html，填入以下内容，

<div id="root"></div>
<script type="text/jsx" data-type="module">
import React from 'react';
import ReactDOM from 'react-dom';
<!-- 后续新代码放这 -->
function App() {
 return <h1>Hello World</h1>
}
ReactDOM.render(<App />, document.getElementById('root'));
</script>

<!-- 以下代码不用理解意思 -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="importmap">
{
 "imports": {
  "react": "https://ga.jspm.io/npm:react@17.0.2/dev.index.js",
  "react-dom": "https://ga.jspm.io/npm:react-dom@17.0.2/dev.index.js",
  "react-router-dom": "https://ga.jspm.io/npm:react-router-dom@6.2.2/index.js",
  "valtio": "https://ga.jspm.io/npm:valtio@1.4.0/esm