React 简介

React 是一种开源框架，用于创建用户界面。它最常用于创建 Web 应用程序。不过，我们可以通过 React Native 使用 React 生成移动或桌面应用程序。 React 主要处理[模型-视图-控制器]中的“视图”部分。因此，你可以对路由、管理状态以及访问 API 使用其他库。

JSX 简介

React 使用一种名为 JavaScript XML (JSX) 的特殊语法。借助 JSX，你可将 HTML（或可能会创建的自定义组件）和 JavaScript 集成到一个文件中，甚至可以集成到单个代码行中。通过使用 JSX，你可以依赖 JavaScript 语法来实现逻辑。 Visual Studio Code 为 JSX 文件提供 IntelliSense 功能，使用 React 时此工具会非常有用。

组件

React 开发基于组件完成。组件是自包含显示和工作单元。它们可在应用程序中重复使用。你可使用它们将应用程序按逻辑分解为更小的区块（或组件）

创建你的你一个项目

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

没别的就是在页面上找到那个ID叫root的容器在那里面渲染. 再让代码多两行

//下面一行长得像HTML和JS的被叫做jsx,React [不强制要求]使用 JSX，
const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

接上回书,就是多了两行的定义变量 ,这应该在上回的容器中渲染一行字 hello,Josh Perez 在 JSX 语法中，你可以在大括号内放置任何有效的 JavaScript 表达式让我们再加两行加一个事件

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
      <h1>
    Hello, {formatName(user)}!  
    </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

上回书说了,{}这里面可以加任意的JS表达式,那么函数也可以啊, 那么很明显就是在root下渲染调用函数最后的结果为

截屏2022-01-18 下午7.19.34.png 非常简单也就是说，你可以在 if 语句和 for 循环的代码块中使用 JSX，将 JSX 赋值给变量，把 JSX 当作参数传入，以及从函数中返回 JSX：

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;  }
  return <h1>Hello, Stranger.</h1>;}

所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。

例如，JSX 里的 class 变成了 className，而 tabindex 则变为 tabIndex。

写在最后工作可真难啊,从零开始学这些玩意,SharePoint我可记住你了.

看React文档的第一天 SharePoint要用的

React 简介

JSX 简介

组件

创建你的你一个项目