反应

web和本机用户界面库

从组件创建用户界面

React允许您用称为组件的各个部分构建用户界面。创建自己的React组件，如 缩略图,喜欢按钮、和 视频然后将它们组合成整个屏幕、页面和应用程序。

视频.js

功能 视频({ 视频 }) {
  返回 (
    <div公司>
      <缩略图 视频={视频} />
      <一 href公司={视频.网址}>
        <小时3>{视频.标题}</小时3>
        <第页>{视频.描述}</第页>
      </一>
      <喜欢按钮 视频={视频} />
    </div公司>
  );
}

我的视频

视频描述

无论您是独自工作还是与数千名其他开发人员一起工作，使用React的感觉都是一样的。它旨在让您无缝地组合由独立人员、团队和组织编写的组件。

使用代码和标记编写组件

React组件是JavaScript函数。想有条件地显示一些内容吗？使用如果声明。显示列表？Try数组地图（）Learning React是学习编程。

视频列表.js

功能 视频列表({ 视频, 空标题 }) {
  常数 计数=视频.长度;
  让 标题=空标题;
  如果 (计数>0) {
    常数 名词=计数>1?“视频”:“视频”;
    标题=计数+' '+名词;
  }
  返回 (
    <部分>
      <氢气>{标题}</氢气>
      {视频.地图(视频 =>
        <视频 钥匙={视频.身份证件} 视频={视频} />
      )}
    </部分>
  );
}

3个视频

第一个视频

视频描述

第二段视频

视频描述

第三个视频

视频描述

这种标记语法称为JSX。它是由React推广的JavaScript语法扩展。将JSX标记放在相关呈现逻辑附近，可以使React组件易于创建、维护和删除。

随时随地添加交互性

React组件接收数据并返回应显示在屏幕上的内容。您可以向他们传递新数据以响应交互，例如当用户输入输入时。React将更新屏幕以匹配新数据。

可搜索视频列表.js

进口 { 使用状态 } 从 “反应”;

功能 可搜索视频列表({ 视频 }) {
  常数 [搜索文本, 设置搜索文本]=使用状态('');
  常数 找到视频=过滤视频(视频, 搜索文本);
  返回 (
    <>
      <搜索输入
        价值={搜索文本}
        onChange（更改时）={新建文本 => 设置搜索文本(新建文本)} />
      <视频列表
        视频={找到视频}
        空标题={`没有与“${搜索文本}”`} />
    </>
  );
}

example.com/视频.html

反应视频

React简史

5个视频

反应：纪录片

React的起源故事

重新思考最佳实践

皮特·亨特（2013）

介绍React Native

Tom Occhino（2015）

React Hooks简介

索菲·阿尔伯特和丹·阿布拉莫夫（2018）

介绍服务器组件

Dan Abramov和Lauren Tan（2020年）

你不必在React中构建整个页面。将React添加到现有的HTML页面，并在其任何位置呈现交互式React组件。

将React添加到页面

全部堆叠
有一个框架

React是一个库。它允许您将组件放在一起，但没有规定如何进行路由和数据获取。要使用React构建整个应用程序，我们建议使用一个全栈React框架，如下一个.js或混音.

confs/[slug].js

进口 { 数据库 } 从 './数据库.js’;
进口 { 暂停 } 从 “反应”;

异步 功能 会议页面({ 段塞 }) {
  常数 conf公司=等待 数据库.Confs公司.找到({ 段塞 });
  返回 (
    <会议布局 conf公司={conf公司}>
      <暂停 退路={<通话加载 />}>
        <会谈 配置ID={conf公司.身份证件} />
      </暂停>
    </会议布局>
  );
}

异步 功能 会谈({ 配置ID }) {
  常数 会谈=等待 数据库.会谈.查找全部({ 配置ID });
  常数 视频=会谈.地图(谈话 => 谈话.视频);
  返回 <可搜索视频列表 视频={视频} />;
}