React 入门 01 - Hello World

Posted 逆風的薔薇

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React 入门 01 - 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 👇戳我吧~

以上是关于React 入门 01 - Hello World的主要内容,如果未能解决你的问题,请参考以下文章

React 入门 01 - Hello World

[React-Native]入门(Hello World)

react native 入门 - 环境搭建, 创建第一个Hello World

React Native入门环境搭建与Hello World

reactjs入门到实战---- hello world例子

angular从入门到...之hello world。