我早已采用 React 一两年了，但当我早已开始自学它时，我并没过多高度关注 React 为我做甚么，比如说 React 透过它的 API 抽象化了甚么和为何我须要采用 JSX 来构筑模块，或是为何他们需要 Babel 之类。因而，假如您早已早已开始早已开始自学 React 或采用它，您可能会辨认出这首诗有利于介绍核心理念基本概念。
JavaScript 来积极响应
假定他们没任何人 React 库，他们多于一般的 JavaScript，他们须要建立两个单纯的网页，该网页仅在div DOM 结点中包涵文件格式“我早已早已开始自学 React Fundamentals”到建立了 id root 的 div 中.
<html>
<body>
<div id=”root”></div>
</body>
</html>
步伐：
div采用document.createElement创建HTML 原素，他们能在当中将模块div做为 tagName 传达加进文件格式“我早已早已开始自学 React 基本知识”。他们能采用textContent。采用Append 将建立的原素填入到文件格式中<html>
<body>
<div id=”root”></div>
<script type=”module”>
const rootElement = document.getElementById(“root”)
const element = document.createElement(“div”)
element.textContent = “Im learning React Fundamentals”
rootElement.append(element)
</script>
</body>
</html>
因而他们会获得：
<html>
<body>
<div id=”root”>
<div>Im learning React Fundamentals</div>
</div>
</body>
</html>
在主脑，这是 React 建立 DOM 结点的促进作用，假如您想深入细致介绍它，您能查阅React 源码。React 抽象化了那个陈述句应用程序 API，为他们提供更多了两个极具新闻稿性的 API 来采用。
有了这些解释，他们能说为了为Web建立 React 应用程序，他们须要：
阵营：帮助他们建立反应相似的原素，以建立在应用程序与原素document.createElement反应DOM：帮助他们使反应原素类似DOMappend采用原始 React API
现在，让他们建立与之前采用 Vanilla JavaScript 所做的相同的网页，但采用 React 库。为此，他们须要加进外部脚本，因而我将采用unpkgwhich 是 npm 上所有内容的 cdn，因而他们能只加进 url，然后他们将为 React 和 React DOM 加载文件。
步伐：
采用接收这些模块的createElement建立两个 React 原素：type：它能是原素的类型，能是像div,span等的字符串或 React 模块（通常是类或函数），也能是 React Fragment 类型props : 两个包涵属性的对象[… children] ： 它能是两个字符串（将被解释为文件格式），或对允许他们嵌套原素的其他模块的引用。第三个模块的其余部分将是孩子。请记住，children是 React 中的两个特殊道具采用接收这些模块的ReactDOM.render将React Element 渲染到 DOM ：element :两个反应原素container :原素将被填入的 DOM 结点<body>
<div id=”root”></div>
<script src=”https://unpkg.com/
[email protected]/umd/react.development.js”></script>
<script src=”https://unpkg.com/
[email protected]/umd/react-dom.development.js”></script>
<script type=”module”>
const rootElement = document.getElementById(root)
const element = React.createElement(
div,
{ className: “container” },
“Im learning React Fundamentals”
)
ReactDOM.render(element, rootElement)
</script>
</body>
现在，想象一下他们想要渲染两个水果列表，就像采用原始 React API 一样：
<div>
<p>List of my favorite fruits</p>
<ul>
<li>Apple</li>
<li>Orange</li>
</ul>
</div>
那将是这样的：
const rootElement = document.getElementById(root)
const element = React.createElement(div, null,
[
React.createElement(p, null, List of my favorite fruits),
React.createElement(ul, null,
React.createElement(li, null, Apple),
React.createElement(li, null, Orange),
),
],
})
ReactDOM.render(element, rootElement)
这对你来说看起来更容易理解吗？可能只是想象一下在大型应用程序中以这种方式采用 React。它可能难以阅读和维护，因而JSX它是原始 React API 之上的类似 HTML 的语法糖。
采用 JSX
JSX 不是 JavaScript，这意味着应用程序本身无法理解，因而他们须要采用诸如Babel将转换为标准 Javascript的代码编译器
你能在这里玩，看看 babel 如何将 JSX 兼容到 JavaScript
const element = <h1 className=”title”>I Love React!</h1>
// ↓ ↓ ↓ ↓ compiles to ↓ ↓ ↓ ↓
const element = React.createElement(
“h1”,
{
className: “title”
},
“I Love React!”
);
正如所展示的，JSX 为他们提供更多了一种简洁而熟悉的语法来定义树结构，不须要自学模板语言或离开 javascript。尽管您须要介绍JSX 陷阱，例如：
用户定义的模块必须大写：当 react 原素以小写字母开头时，它将做为内置模块，如span, div, h1。假定您建立了两个titlepage模块 function titlepage({children}) {
return <h1 className=”title”>{children}</h1>
}
function App(){
return(
<div>
<titlepage>My first blog!</titlepage>
</div>
)
}
// ↓ ↓ ↓ ↓ compiles↓ ↓ ↓ ↓
function titlepage(_ref) {
var children = _ref.children;
return React.createElement(“h1”, {
className: “title”
}, children);
}
var element = React.createElement(“div”,
null,
React.createElement(“**titlepage**”, null, “Hello World”));
// => ⚠️ titlepage is parsed as a string and doesnt take as a component/function
另外，你会在你的控制台中获得两个错误，它会建议你以大写字母开头
// Error: The tag <titlepage> is unrecognized in this browser.
// If you meant to render a React component, start its name with an uppercase letter.
最后的笔记
我鼓励你花一些时间在 React中查阅源码，在在线 babel REPL 中采用 JSX来查阅该代码的编译版本，这样你就能更好地理解、阅读和采用它。介绍抽象化的促进作用，将使您更有效地采用它。
