<html>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.8.3/babel.js"></script>
<script type="text/babel">
ReactDOM.render(<div>Hello World</div>, document.getElementById('root'))
</script>
</body>
</html>
请继续阅读以遵循我们如何到达此处的分步过程（并享受 贯穿始终的视频）。
当你正在学习新的东西时（或者你想巩固你的基础知识 对你已经熟悉的东西的理解），其中最 你能做的有价值的事情就是删除所有东西，直到你只剩下 你要学习的一件事。
当我们谈论构建应用程序时，我们将许多应用程序放在一起 不同的抽象（工具和库）来做到这一点。当所有你想做的事 是船，很自然地把所有这些东西都看作是一个大橡皮筋球 你不知道一个抽象什么时候开始，另一个抽象什么时候结束，它 老实说，这并不重要，因为你所关心的只是 把东西发货。
但是，如果你真的想打下坚实的基础，并使用抽象来 他们最大的潜力，那么你会发现你更有效率 那些橡皮筋分开并孤立地探索它们。你会知道的 它们的功能以及它们在整个应用程序中扮演的角色。那边 当你将来使用它们时，你不会尝试将两个部分放在一起 它们不是故意的，因为你会明白它们的预期用途 案例是。
因此，让我们继续尝试使用React。当我们构建一个 React 应用程序时，我们 一起使用大量工具（包括开发工具以及我们提供的库） 到生产）。如果你不知道 react 在哪里结束，webpack 从哪里开始，你就不会知道 与使用任何一种一样有效。所以，让我们把所有东西都剥离掉，让它变成 尽可能简单：一个直截了当的文件。index.html
接下来的一点点基本上是您可以观看的内容的简单版本 在我的 React 初学者指南课程中免费 博学的人。对于下一部分，您可以在 egghead.io 上观看“使用 Vanilla JavaScript 和 DOM 创建用户界面”
让我们从一个常规的 HTML 文件开始：
<html>
<body></body>
</html>
（从技术上讲，你甚至不需要那么多，因为浏览器非常 当涉及到这种事情时，请原谅，它会自动为您添加 AND 标签。但是让我们保留这些。htmlbody
好了，我们将使用 JavaScript 创建 DOM 节点，并将它们放入 容器或“根”DOM 节点。因此，让我们添加一下：
<html>
<body>
<div id="root"></div>
</body>
</html>
我们赋予它是为了让我们很容易在我们的 DOM 节点中找到那个 DOM 节点 JavaScript的。接下来让我们添加：idroot
<html>
<body>
<div id="root"></div>
<script type="module">
const rootElement = document.getElementById('root')
</script>
</body>
</html>
太好了，现在我们有了 ，让我们创建一个 DOM 元素来放置 里面：rootElement
<html>
<body>
<div id="root"></div>
<script type="module">
const rootElement = document.getElementById('root')
const element = document.createElement('div')
element.textContent = 'Hello World'
element.className = 'container'
rootElement.append(element)
</script>
</body>
</html>
现在，您将在页面上看到的是“Hello World”，它呈现在我们的 .divroot
让我们添加 React
对于下一部分，您可以在 egghead.io 上观看“使用 React 的 createElement API 创建用户界面”
好吧，让我们将 React 添加到页面中。这是一个第三方库，具有 JavaScript，因此我们需要在页面中添加单独的脚本标签 为我们加载该 JavaScript 的浏览器：
<html>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
<script type="module">
const rootElement = document.getElementById('root')
const element = document.createElement('div')
element.textContent = 'Hello World'
element.className = 'container'
rootElement.append(element)
</script>
</body>
</html>
太好了，在页面上使用 React（作为全局变量），我们现在可以开始了 创建 React 元素：React
<html>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
<script type="module">
const rootElement = document.getElementById('root')
// const element = document.createElement('div')
// element.textContent = 'Hello World'
// element.className = 'container'
// rootElement.append(element)
const element = React.createElement(
'div',
{ className: 'container' },
'Hello World',
)
</script>
</body>
</html>
棒。这是一个常规的 JavaScript 对象。继续并将其记录到 该页面，您将看到如下内容：element
{
$$typeof: Symbol(react.element)
key: null
props: {className: "container", children: "Hello World"}
ref: null
type: "div"
_owner: null
_store: {validated: false}
_self: null
_source: null
__proto__: Object
}
从我的博客文章《什么是 JSX？
现在我们必须有一些东西可以接受这个反应元素并把它转过来 到一个 DOM 节点中，然后将该 DOM 节点放在我们的 .这就是目的。因此，让我们添加一下：rootreact-dom
<html>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
<script type="module">
const rootElement = document.getElementById('root')
const element = React.createElement(
'div',
{ className: 'container' },
'Hello World',
)
ReactDOM.render(element, rootElement)
</script>
</body>
</html>
现在，我们将渲染与原始香草相同的内容 JavaScript 解决方案。
添加 JSX
对于下一部分，您可以在 egghead.io 上观看“使用 React 的 JSX 语法创建用户界面”
不过，没有人像我们上面那样写 React。我们都在使用 JSX！但是浏览器不知道JSX是什么！因此，虽然我们 就像使用这种特殊语法编写代码一样，我们需要提供浏览器 用它理解的东西。浏览器理解 .所以 如果我们使用 JSX 编写代码，然后我们有一些工具可以转换 JSX 到 ？这正是 Babel 编译器为我们所做的。React.createElementReact.createElement
碰巧的是，Babel 完全是用 JavaScript 编写的，实际上可以在 浏览器！因此，让我们将其添加到我们的页面：
<html>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.8.3/babel.js"></script>
<script type="module">
const rootElement = document.getElementById('root')
const element = React.createElement(
'div',
{ className: 'container' },
'Hello World',
)
ReactDOM.render(element, rootElement)
</script>
</body>
</html>
有了这个，现在我们可以告诉 babel 我们希望它编译我们拥有的代码 在标记中。为此，我们将scripttypetext/babel
<html>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.8.3/babel.js"></script>
<script type="text/babel">
const rootElement = document.getElementById('root')
const element = React.createElement(
'div',
{ className: 'container' },
'Hello World',
)
ReactDOM.render(element, rootElement)
</script>
</body>
</html>
现在我们已经设置好了，我们可以开始使用 JSX！
<html>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.8.3/babel.js"></script>
<script type="text/babel">
const rootElement = document.getElementById('root')
// const element = React.createElement(
// 'div',
// {className: 'container'},
// 'Hello World',
// )
const element = <div className="container">Hello World</div>
ReactDOM.render(element, rootElement)
</script>
</body>
</html>
就是这样！因此，这是您需要的所有内容的简化和最终版本 让 React 在没有任何构建工具的文件中运行：index.html
<html>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16.13.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.13.1/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.8.3/babel.js"></script>
<script type="text/babel">
ReactDOM.render(
<div className="container">Hello World</div>,
document.getElementById('root'),
)
</script>
</body>
</html>
结论
现在，我不建议像这样构建整个应用程序，但希望这 很有启发性，帮助你理解 React 的不同部分 基本抽象负责。将事物与其他事物区分开来 抽象并一次添加一个可以真正帮助您理解 这些工具和库如何单独工作以及如何最好地将它们一起使用 构建很棒的东西。
扫一扫
2250
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
