React 入门 01 - Hello World

最新推荐文章于 2024-06-28 08:56:25 发布

原创最新推荐文章于 2024-06-28 08:56:25 发布 · 592 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #js

React 专栏收录该内容

4 篇文章

订阅专栏

本文档分享了从零开始学习React的旅程，介绍了React的基本概念、安装方法及第一个Hello World实例，适合前端开发新手。

前言

基于项目需求，最近开始不得不接触前端开发的领域啦。吼吼，从此是不是可以自称全栈开发了🤣～

此系列学习笔记依然是以帮助自己学习、消化以及回忆为目的，将会涉及学习React，Type Script 以及目标 React Native 的心路历程。

Git 👇戳我吧～

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 的混写。

Git 👇戳我吧～