react出道101问-- 初出茅庐核心 React 什么是 React？ React（又名 React.js 或 Re

核心 React

什么是 React？

React（又名 React.js 或 ReactJS）是一个开源前端 JavaScript 库，用于构建可组合的用户界面，尤其是单页应用程序。它用于以声明式方法处理基于组件的 Web 和移动应用程序的视图层。
React 进化的历史是怎样的？

ReactJS 的历史始于 2010 年XHP的创建。XHP 是一个 PHP 扩展，它改进了语言的语法，使得 XML 文档片段成为有效的 PHP 表达式，其主要目的是用于创建自定义和可重用的 HTML 元素。

此扩展的主要原则是使前端代码更易于理解，并有助于避免跨站点脚本攻击。该项目成功阻止了清理用户提交的恶意内容。

但是 XHP 有一个不同的问题，即动态 Web 应用程序需要多次往返服务器，而 XHP 并没有解决这个问题。此外，整个 UI 都会因应用程序中的微小变化而重新渲染。后来，Jordan 受 XHP 的启发创建了 React 的初始原型，名为FaxJ。最终，一段时间后，React 作为一个新的库被引入 JavaScript 世界。

注意： JSX 源自 XHP 的理念
React 的主要特性是什么?

React 的主要特性包括：
- 使用JSX语法，这是 JS 的语法扩展，允许开发人员在 JS 代码中编写 HTML。
- 考虑到真实 DOM 操作成本高昂，它使用虚拟 DOM而不是真实 DOM。
- 支持服务器端渲染，这对搜索引擎优化（SEO）很有用。
- 遵循单向或单向数据流或数据绑定。
- 使用可重复使用/可组合的UI 组件来开发视图。
什么是 JSX？

JSX代表JavaScript XML，它是 ECMAScript 的类似 XML 的语法扩展。基本上，它只是为函数提供了语法糖React.createElement(type, props, ...children)，为我们提供了 JavaScript 的表达能力以及类似 HTML 的模板语法。

在下面的例子中，<h1>标签内的文本作为 JavaScript 函数返回给渲染函数。
```
export default function App() {
  return <h1 className="greeting">{"Hello, this is a JSX Code!"}</h1>;
}
```
如果你不使用 JSX 语法，则相应的 JavaScript 代码应按如下方式编写，
```
import { createElement } from "react";

export default function App() {
  return createElement(
    "h1",
    { className: "greeting" },
    "Hello, this is a JSX Code!"
  );
}
```
查看类别
注意： JSX 比 HTML 更严格
元素 (Element) 和组件 (Component) 有什么区别？

元素是一个简单的对象，它以 DOM 节点或其他组件的形式描述您想要在屏幕上显示的内容。元素可以在其 props 中包含其他元素。创建 React 元素的成本很低。元素一旦创建，就无法改变。

React Element 的 JavaScript 表示（没有 JSX）如下：
```
const element = React.createElement("div", { id: "login-btn" }, "Login");
```
这个元素可以使用 JSX 简化
```
<div id="login-btn">Login</div>
```
上述React.createElement()函数返回一个如下对象：
```
{
  type: 'div',
  props: {
    children: 'Login',
    id: 'login-btn'
  }
}
```
最后，该元素使用呈现到 DOM ReactDOM.render()。

而组件可以用几种不同的方式声明。它可以是具有render()方法的类，也可以定义为函数。无论哪种情况，它都以 props 作为输入，并返回 JSX 树作为输出：
```
const Button = ({ handleLogin }) => (
  <div id={"login-btn"} onClick={handleLogin}>
    Login
  </div>
);
```
然后 JSX 被转换成React.createElement()函数树：
```
const Button = ({ handleLogin }) =>
  React.createElement(
    "div",
    { id: "login-btn", onClick: handleLogin },
    "Login"
  );
```

react出道101问-- 初出茅庐

核心 React

什么是 React？

React 进化的历史是怎样的？

React 的主要特性是什么?

什么是 JSX？

元素 (Element) 和 组件 (Component) 有什么区别？

元素 (Element) 和组件 (Component) 有什么区别？