Re: 新手让网页 act 起来: Day02 - 永远的起点 Hello world!
在开始使用 React 之前，先来回想一下刚学习原生 JS 的时候，我们是怎麽在页面产生 DOM Node，然後渲染出 Hello world：
原生 DOM 的操作
假设我们要在一个页面动态产生一个 div ，我们会这样做：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
const rootEl = document.createElement('div')
rootEl.setAttribute('id', 'root')
document.body.append(rootEl)
const titleEl = document.createElement('div')
titleEl.textContent = 'Hello world'
titleEl.className = 'container'
rootEl.append(titleEl)
</script>
</body>
</html>
顺利的话我们就能够在画面上看到 Hello world，如下
接下来，就让我来使用 React 提供的 api。首先，我们要引入 React 以及 ReactDOM。
为什麽需要引入 React 以外还需要 ReactDOM 呢？ React 主要负责建立 UI 介面，但它其实并没有与浏览器的 DOM 打交道，所以我们需要透过 ReactDOM 这个桥梁来与浏览器做交流。
在 React 中，第一个要学习的就是 creatElement()。这个 api 主要负责帮我们建立 React element，它可以接收至少三个参数。第一个可以是 HTML element，或是 component，第二个参数是 props，第三个参数之後都会被收集成 children，最後会回传一个 React element。简单一点，可以把它一点像 document.creatElemnt()。在後面的文章我们会再多介绍它。
再来就是 ReactDOM.render()，它接收两个参数，第一个是我们的 React element，第二个是 DOM Node，功能就是负责将我们制造出的 React element 渲染在 DOM Node 里。有一点像原生 append() 的感觉。
接下来就让我们实际使用看看：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script>
const rootEl = document.createElement('div')
document.body.append(rootEl)
const element = React.createElement('div', {
children: 'Hello React!',
className: 'container'
})
ReactDOM.render(element, rootEl)
</script>
</body>
</html>
顺利的话，我们就可在浏览器顺利看到 Hello React! 了！
以上就是今天的内容啦～，有什麽问题都欢迎在下方留言，明天将更近一步的了解 React.creatElement()。
>>: [Day13] - 利用 Button 范例 - 解说 render 函式
【把玩Azure DevOps】Day8 CI/CD从这里：设定第一个Pipeline(成功与失败)
前一篇文章介绍了Pipeline的范本与编辑介面，并且比较了.NET Desktop范本与Start...
树状结构转线性纪录-孩子标记法 - DAY 13
孩子标记 记录 子索引数量(几个孩子)，子索引值(孩子是谁) 完整树状转化 参考来源 大话资料结构 ...
【心得】不同 gradient 使用方式-- radial-gradient()
radial-gradient() 我从前只以为它只有圆形，只能从中心开始渐层 结果发现...不!不...
出生第48天 铁人完赛日
请不要在意我标题出生日期一直跳，育儿的日子没那麽多废文可以写ＸＤ～而且中间很多天在干嘛其实也忘了囧...
30天程序语言研究
今天是30天程序语言研究的第十五天，由於深度学习老师多让我们上了python的进阶课程里面包括之前没...