React
用于构建用户界面的 JAVASCRIPT 库。

声明式

React 用于无痛创建交互式 UI。为您的应用程序中的每个状态设计简单的视图,并且当你的数据更改时,React将有效地更新和渲染正确的组件。

声明式视图使您的代码更可预测,更易于调试。

基于组件

构建封装的组件,管理自己的 state,然后组合它们以创建复杂的UI。

由于组件逻辑是用 JavaScript 而不是模板编写的,因此你可以轻松地通过应用程序传递丰富的数据,并将 state 保留在DOM之外。

学习一次,到处使用

我们不会对你的技术栈的其余部分做出假设,所以您可以在React中开发新功能,而无需重写现有的代码。

React也可以使用 Node 在服务器端渲染 ,并为移动应用使用 React Native 提供动力。


一个简单的组件

React 组件实现一个 render() 方法,它接收输入数据并返回显示的内容。此示例使用类似XML的语法,称为 JSX 。输入数据可以通过 this.props 传入组件,被 render() 访问。

JSX是可选的,对于使用 React而言不需要。 尝试点击 “Compiled JS(编译后的 JS)”选项卡 来查看 JSX 编译器生成的原始 JavaScript 代码。

有状态的组件

除了获取输入数据(通过 this.props 访问)之外,组件可以维护内部 state(状态) 数据(通过 this.state 访问)。当组件的 state(状态) 数据发生变化时,渲染标记将通过调用 render() 来重新更新。

一个应用

我们可以通过一个小的Todo应用程序,把 propsstate 放在一起使用。此示例使用 state 来跟踪当前项目列表以及用户输入的文本。虽然事件处理程序似乎是内联渲染,将使用事件委托来收集和实现。

使用外部插件的组件

React是灵活的,并提供钩子,允许您与其他库和框架进行交互。这个例子使用了 remarkable ,一个外部的 Markdown 库,用于实时地转换 textarea 的值。