# React

* 英文官网：[React – A JavaScript library for building user interfaces (reactjs.org)](https://reactjs.org/)
* 中文官网：[React 官方中文文档 – 用于构建用户界面的 JavaScript 库 (reactjs.org)](https://zh-hans.reactjs.org/)
* Github：[facebook/react: A declarative, efficient, and flexible JavaScript library for building user interfaces. (github.com)](https://github.com/facebook/react)

由Facebook开源的用于动态构建用户界面的 JavaScript 库(只关注于视图)。

## 特点

1. 声明式编码
2. 组件化编码
3. React Native 编写原生应用
4. 高效
   1. 使用虚拟DOM，不总直接操作真实DOM
   2. DOM Diffing算法，最小页面重绘

## 安装React

1. `react.js`：React核心库。
2. `react-dom.js`：提供操作DOM的react扩展库。
3. `babel.min.js`：解析JSX语法代码转为JS代码的库。

## Hello World

### 非JSX方式

```html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="app"></div>

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script type="text/javascript">
    // 创建虚拟dom
    const vdom = React.createElement("h1", {id: "title"}, "Hello World");
    // 渲染虚拟dom到页面指定的div中
    ReactDOM.render(vdom, document.getElementById('app'));
</script>
</body>
</html>
```

### JSX方式

```html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="app"></div>

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
    // 创建虚拟dom
    const vdom = (
        <h1 id="title">Hello World</h1>
    );
    // 渲染虚拟dom到页面指定的div中
    ReactDOM.render(vdom, document.getElementById('app'));
</script>
</body>
</html>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://yangsx95.gitbook.io/notes/front-end/react.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
