React 基础入门实战-快速上手体验

原创

已于 2025-02-21 10:53:12 修改 · 1.2k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #前端框架

于 2025-02-19 20:15:30 首次发布

1. 什么是 React

React 的定义：React 是一个自由及开放源代码的前端 JavaScript 工具库，用于基于 UI 组件构建用户界面。它由 Meta 和个人开发者及公司组成的社群共同维护。

官网：React

2. React 的特点

组件化
声明式编程
虚拟 DOM
高效的状态管理

3. 应用场景

单页面应用（SPA）：React 非常适合构建复杂的单页面应用，提供流畅的用户体验
移动应用：通过 React Native，可以使用 React 开发 iOS 和 Android 应用
跨平台开发：通过 Taro 框架，实现各平台跨端开发
服务器渲染应用：结合 Next.js 等框架，可以实现服务器渲染（SSR），提高首屏加载速度
大型企业级应用：React 的组件化和声明式编程使得大型应用的开发和维护更加高效

4. React 的 JSX 语法

4.1. 认识 JSX 语法

4.1.1. 代码体验

首先在你的 IDE 中创建一个名为 demo.html 的文件，输入下面这段代码，并运行

<!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>Hello React</title>
  </head>
  <body>
    <div id="root"></div>
    <!-- CDN引入，依赖三个包：react、react-dom、babel -->
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.development.js"
      ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
      ></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <script type="text/babel">
      // 编写 React代码(jsx语法)
      // jsx语法转换为普通的JavaScript代码，要依靠 babel
      const element = <h2>Hello World</h2>;
      const root = ReactDOM.createRoot(document.querySelector("#root"));
      root.render(element);
    </script>
  </body>
</html>

运行结果如下