【React 全家桶】简单使用React（Hello World级别）

最新推荐文章于 2025-06-22 12:18:35 发布

原创最新推荐文章于 2025-06-22 12:18:35 发布 · 157 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #javascript #html5 #ecmascript

React 全家桶专栏收录该内容

15 篇文章

订阅专栏

本文介绍了React的基础知识，包括其特点、所需引入的JS文件及两种使用方式（JS与JSX）。通过实例演示了如何创建并渲染虚拟DOM。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、React 介绍

React 是一个用于构建用户界面的 JAVASCRIPT 库。
React 主要用于构建 UI，很多人认为 React 是 MVC 中的 V（视图）。
React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

二、React 特点

1.声明式设计 −React采用声明范式，可以轻松描述应用。
2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
3.灵活 −React可以与已知的库或框架很好地配合。
4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

以上内容来自于菜鸟教程。

三、React 需要引入的 JS 文件

js	描述
react.development.js	核心库
react-dom.development.js	用于支持react操作dom
babel.min.js	将jsx转化为js（可选）

<!-- 引入react核心库 -->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作dom -->
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 引入bable，将jsx转化为js -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

四、React 使用的两种方式

用 React 来创建的步骤如下：
（1）引入 React 所需文件
（2）创建一个容器
（3）创建虚拟 DOM（ JS 和 JSX 的区别就在这里）
（4）渲染虚拟 DOM 到页面

1、JS

<!DOCTYPE html>
<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>js使用react</title>
</head>

<body>
    <!-- 创建一个容器 -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作dom -->
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 表示写的是js （无需引入babel）-->
    <script type="text/javascript">
        // 1.创建虚拟dom(h1里面包含span)
        const VDOM = React.createElement('h1', { id: 'title' }, React.createElement('span', {}, 'hello react'));
        //2.渲染虚拟dom到页面
        ReactDOM.render(VDOM, document.getElementById('test'))
    </script>
</body>

</html>

在这里插入图片描述

2、JSX

<!DOCTYPE html>
<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>jsx使用react</title>
</head>

<body>
    <!-- 创建一个容器 -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作dom -->
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 引入bable，将jsx转化为js -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <!-- 表示写的是jsx -->
    <script type="text/babel">
        // 1.创建虚拟dom(h1里面包含span)
        const VDOM = (
            <h1>
                <span>hello react</span>
            </h1>
        );//jsx中此处不要写引号，因为不是字符串
        //2.渲染虚拟dom到页面
        ReactDOM.render(VDOM, document.getElementById('test'))
    </script>
</body>

</html>