React 入门 01 - Hello World
Posted 逆風的薔薇
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React 入门 01 - Hello World相关的知识,希望对你有一定的参考价值。
前言
基于项目需求,最近开始不得不接触前端开发的领域啦。吼吼,从此是不是可以自称全栈开发了🤣~
此系列学习笔记依然是以帮助自己学习、消化以及回忆为目的,将会涉及学习React,Type Script 以及目标 React Native 的心路历程。
React
React 官方系列教程是我学习的主要参考资料。React 是一个用于构建用户界面的 javascript 库,起源于Facebook,2013年5月开始开源流行。
ReactJS官网地址:http://facebook.github.io/react/
Github地址:https://github.com/facebook/react
零安装、在html中使用React
使用React无需复杂安装配置,只需创建相应的html文件并引入React源文件即可。
步骤 1: 添加一个 DOM 容器到 HTML
首先,打开你想要编辑的 HTML 页面。添加一个空的 <div>
标签作为标记你想要用 React 显示内容的位置。例如:
<!-- ... 其它 HTML ... -->
<div id="root"></div>
<!-- ... 其它 HTML ... -->
我们给这个 <div>
加上唯一的 id
HTML 属性。这将允许我们稍后用 JavaScript 代码找到它,并在其中显示一个 React 组件。
步骤 2:添加 Script 标签
接下来,在 </body>
结束标签之前,向 HTML 页面中添加三个 <script>
标签:
<!-- ... 其它 HTML ... -->
<!-- 加载 React -->
<!-- 注意: 部署时,将 "development.js" 替换为 "production.min.js" -->
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone/babel.min.js"></script>
react.development.js
是 React 的核心库,react-dom.development.js
是提供与 DOM 相关的功能,引入babel进行语法编译。
上述以CDN链接方式引入React的UMD版本,具体介绍参见官方文档。
Hello World 完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>
ReactDOM.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点。
HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法,它允许 HTML 与 JavaScript 的混写。
以上是关于React 入门 01 - Hello World的主要内容,如果未能解决你的问题,请参考以下文章
react native 入门 - 环境搭建, 创建第一个Hello World
React Native入门环境搭建与Hello World