介绍React Spectrum

react和react2

Adobe has more than 5,000 engineers working across the world on hundreds of products, which must all meet high standards for UI consistency, accessibility, internationalization, and usability. Meeting these standards at our scale has been a challenge for us. We acknowledge design systems are now more popular than ever, and many companies both large and small are implementing their own component libraries from scratch.

Adobe在全球拥有5,000多名工程师，致力于数百种产品，这些产品都必须满足UI一致性，可访问性，国际化和可用性的高标准。 在我们的规模上达到这些标准对我们来说是一个挑战。 我们承认，设计系统现在比以往任何时候都更加流行，许多大小公司都从头开始实现自己的组件库。

Even with the rise of the modern view libraries, it is still extraordinarily difficult to do so in a fully accessible way with interactions that work across many types of devices. This represents millions of dollars of investment for each company as they duplicate work that could have been shared. Additionally, many companies and teams don’t have the resources or time to prioritize features like accessibility, internationalization, full keyboard navigation, and touch interactions. This leads to many apps having sub-par accessibility and interactions which contributes to the perception of the web as an inferior app platform compared to native apps.

即使随着现代视图库的兴起，使用跨多种类型的设备进行交互的完全可访问的方式来进行操作仍然非常困难。 这代表着每家公司数百万美元的投资，因为它们重复了本来可以共享的工作。 此外，许多公司和团队没有资源或时间来安排功能的优先级，例如可访问性，国际化，完整的键盘导航和触摸交互。 这导致许多应用程序具有低于同等的可访问性和交互性，与本地应用程序相比，这有助于将网络感知为劣等应用程序平台。

We’re excited to share what we learned in this blog through our announcement and release of React Spectrum, a collection of libraries and tools that help you build adaptive, accessible, and robust user experiences for web applications. React Spectrum includes three libraries:

我们很高兴通过宣布和发布React Spectrum来分享在此博客中学到的知识， React Spectrum是一组库和工具，可帮助您为Web应用程序构建自适应，可访问且健壮的用户体验。 React Spectrum包含三个库:

• React Spectrum — A React implementation of Spectrum, Adobe’s design system.

  React Spectrum — Adob​​e的设计系统Spectrum的React实现。

• React Aria — A library of React Hooks that provides accessible UI primitives for your design system.

  React Aria — React Hooks库，为您的设计系统提供可访问的UI原语。

• React Stately — A library of React Hooks that provides cross-platform state management and core logic for your design system.

  有状态的响应 — React Hooks库为您的设计系统提供跨平台状态管理和核心逻辑。

Before we dive into each library, here are the four key concepts.

在我们深入研究每个库之前，这里有四个关键概念。

React谱的关键概念 (Key concepts of React Spectrum)

React Spectrum addresses these four key concepts for developers within companies to meet standards and improve experiences.

React Spectrum解决了这四个关键概念，供公司内的开发人员满足标准并改善体验。

1. ♿ Accessible — Accessibility and behavior are implemented according to WAI-ARIA Authoring Practices, including full-screen reader and keyboard navigation support. All components have been tested across a wide variety of screen readers and devices to ensure the best experience possible for all users.

   ♿ 可访问性 —可访问性和行为是根据WAI-ARIA创作规范实现的 ，包括全屏阅读器和键盘导航支持。 所有组件均已通过各种屏幕阅读器和设备进行了测试，以确保为所有用户带来最佳体验。

2. 📱 Adaptive — All components are designed to work with mouse, touch, and keyboard interactions. They’re built with responsive design principles to deliver a great experience, no matter the device.

   📱 自适应 -所有组件均设计为可与鼠标，触摸和键盘进行交互。 它们采用响应式设计原则构建，无论设备如何，都可提供出色的体验。

3. 🌍 International — Support for more than 30 languages is included out of the box, with support for right-to-left languages, date and number formatting, and more.

   🌍 International —开箱即用，包括对30多种语言的支持，并支持从右到左的语言，日期和数字格式等等。

4. 🎨 Customizable — React Spectrum components support custom themes, and automatically adapt for dark mode. For even more customizability, you can build your own components with your own DOM structure and stying using the React Aria and React Stately hooks to provide behavior, accessibility, and interactions.

   🎨 可自定义 -React Spectrum组件支持自定义主题，并自动适应黑暗模式。 为了获得更大的可定制性，您可以使用React Aria和React Stately挂钩使用自己的DOM结构和样式来构建自己的组件，以提供行为，可访问性和交互作用。

React Spectrum的架构 (React Spectrum’s architecture)

To enable the reusing of component behavior between design systems, React Spectrum splits each component into three parts: state, behavior, and the rendered component. This architecture is made possible by React Hooks, which enables the ability to reuse behavior between multiple components.

为了在设计系统之间重用组件行为，React Spectrum将每个组件分为三个部分:状态，行为和渲染的组件。 React Hooks使该体系结构成为可能，该体系结构具有在多个组件之间重用行为的能力。

庄严地做出React (React Stately)

React Stately is a collection of hooks that provide state management and core logic for each component. They make no assumptions about the platform they are running on, and have no theme or design system-specific logic.

React Stately是挂钩的集合，这些挂钩为每个组件提供状态管理和核心逻辑。 他们对运行的平台不做任何假设，也没有主题或设计系统特定的逻辑。

React Stately hooks accept common props from the component and provide state management. They implement the core logic for the component and return an interface for reading and updating the component state.

React Stately钩子从组件接受通用道具并提供状态管理。 它们实现了组件的核心逻辑，并返回一个用于读取和更新组件状态的接口。

React Stately can be used independently in your own components or paired with React Aria hooks to get more of the behavior and user interactions for web applications out of the box. Learn more about React Stately, and how to get started by reading the docs.

React Stately可以在您自己的组件中独立使用，也可以与React Aria挂钩配对使用，以获取更多Web应用程序的行为和用户交互信息。 详细了解React Stately，以及如何阅读文档以开始使用。

React咏叹调 (React Aria)

React Aria gives you complete control over the rendering and styling of your components rather than building everything from scratch. You start with higher-level primitives that have semantic meaning, behavior, and interactions built-in. This allows you to build components more quickly and ensures that they work well across devices and assistive technology.

React Aria使您可以完全控制组件的渲染和样式，而不是从头开始构建所有内容。 您从具有语义含义，行为和内置交互作用的高级基元开始。 这使您可以更快地构建组件，并确保它们在各种设备和辅助技术中都能正常运行。

React Aria implements behavior and accessibility for the web according to the WAI-ARIA Authoring Practices. It includes full-screen reader and keyboard navigation support, along with mouse and touch interactions that have been tested across a wide variety of devices and browsers. It also implements internationalization for over 30 languages, with right-to-left specific behavior, localized date and number formatting, and more.

React Aria根据WAI-ARIA创作规范来实现Web的行为和可访问性 。 它包括全屏阅读器和键盘导航支持，以及经过多种设备和浏览器测试的鼠标和触摸交互 。 它还实现了30多种语言的国际化 ，具有从右到左的特定行为，本地化的日期和数字格式等。

React Aria does not contain any design system-specific styling or logic. It implements event handling, accessibility, internationalization, etc. — all the parts of a component that could be shared across multiple design systems. It returns DOM props that can be spread onto the elements rendered by the component. These include semantic properties like ARIA, and event handlers. The event handlers in turn call methods on the state interface to implement the behavior for the component.

React Aria不包含任何设计系统特定的样式或逻辑。 它实现了事件处理，可访问性，国际化等功能-组件的所有部分都可以在多个设计系统之间共享。 它返回DOM属性，这些属性可以传播到组件渲染的元素上。 这些包括语义属性(如ARIA )和事件处理程序。 事件处理程序依次调用状态接口上的方法以实现组件的行为。

Building a component with React Aria and React Stately looks like this: call the hooks, and spread the resulting props onto the appropriate DOM elements.

用React Aria和React Stately构建组件看起来像这样:调用钩子，并将生成的prop传播到适当的DOM元素上。

https://react-spectrum.adobe.com/react-aria/useSwitch.html#examplehttps://react-spectrum.adobe.com/react-aria/useSwitch.html#example

Figure 2: Switch Component built with React Aria and React Stately

图2:使用React Aria和React Stately构建的开关组件

Read more about React Aria and the problems it solves, and check out the docs to get started building your own design system.

阅读有关React Aria及其解决的问题的更多信息，并查看文档以开始构建自己的设计系统。

React光谱 (React Spectrum)

React Spectrum puts all of these pieces together and implements the Adobe-specific styling. It’s designed to be adaptive, and works across mouse, touch, and keyboard interactions, on devices of any screen size. It supports theming, including automatic support for dark mode, and responsive scaling for large hit targets on touch devices.

React Spectrum将所有这些部分放在一起，并实现了Adobe特定的样式。 它具有自适应性，可以在任何屏幕尺寸的设备上跨鼠标，触摸和键盘交互进行工作。 它支持主题化 ，包括自动支持黑暗模式，以及针对触摸设备上的大型命中目标的响应缩放。

If you’re integrating with Adobe software or would like an end-to-end component library to use in your project, then React Spectrum is a great place to start. Save time by using Project Firefly, our complete framework for building custom cloud-native Adobe apps. Enterprise customers and partners can extend the functionality of Adobe Experience Platform and Adobe Experience Cloud solutions in a custom app that solves specific business and workflow needs. Sign up to get access to the Project Firefly developer preview.

如果您要与Adobe软件集成，或者想要在项目中使用端到端组件库，那么React Spectrum是一个很好的起点。 使用Project Firefly，这是我们用于构建自定义云原生Adobe应用程序的完整框架，可以节省时间。 企业客户和合作伙伴可以在解决特定业务和工作流需求的自定义应用程序中扩展Adobe Experience Platform和Adobe Experience Cloud解决方案的功能。 注册以访问Project Firefly开发人员预览。

We’ve designed the APIs in React Spectrum to be easy to use. The following example shows how simple it is to create a select element with support for sections and complex options.

我们已将React Spectrum中的API设计为易于使用。 下面的示例说明创建支持部分和复杂选项的select元素非常简单。

https://react-spectrum.adobe.com/react-spectrum/Picker.html#complex-itemshttps://react-spectrum.adobe.com/react-spectrum/Picker.html#complex-items

Figure 4: React Spectrum Picker Component

图4:React Spectrum Picker组件

Get started building an application with React Spectrum, and check out the docs for each component to learn more. In addition, if you’re building your own component library, React Spectrum is a good example of how to use React Aria and React Stately to build a full design system.

开始使用React Spectrum构建应用程序，并查看每个组件的文档以了解更多信息。 另外，如果您要构建自己的组件库，React Spectrum是一个很好的示例，说明了如何使用React Aria和React Stately构建完整的设计系统。

我们学到了什么 (What we learned)

We believe there is an opportunity to share much of the behavior and component logic between design systems and across platforms. For example, user interactions, accessibility, internationalization, and behavior can be reused, while allowing custom styling and rendering to live within individual design systems. This has the potential to improve the overall quality of applications while saving companies money and time and reducing duplicated effort across the industry. Modern view libraries like React Spectrum allow teams to build and maintain these components more easily than before.

我们认为，有机会在设计系统之间以及跨平台共享许多行为和组件逻辑。 例如，可以重用用户交互，可访问性，国际化和行为，同时允许自定义样式和渲染在各个设计系统中进行。 这有可能提高应用程序的整体质量，同时为公司节省金钱和时间，并减少整个行业的重复工作。 像React Spectrum这样的现代视图库使团队比以前更轻松地构建和维护这些组件。

试试看！ (Try it out!)

We’re really excited to see how you use React Aria, React Stately, and React Spectrum in your own applications! We’ve started with an initial set of components, and many more will be added in the coming months.

看到您如何在自己的应用程序中使用React Aria，React Stately和React Spectrum，我们感到非常兴奋！ 我们从一组初始的组件开始，并且将在未来几个月内添加更多组件。

Check out our documentation to learn more. We’ve put a huge amount of effort into making it easy to get started, with API docs and examples for each component, and a clear list of all of the functionality we handle out of the box.

查看我们的文档以了解更多信息。 我们已经投入了巨大的精力来使入门变得容易，每个组件的API文档和示例以及开箱即用地处理的所有功能的清晰列表。

Follow the Adobe Tech Blog for more developer stories and resources, and check out Adobe Developers on Twitter for the latest news and developer products. Sign up here for future Adobe Experience Platform Meetups.

请关注 Adobe技术博客， 以获取更多开发人员案例和资源，并 在Twitter上 查看 Adobe开发人员以 获取最新新闻和开发人员产品。 在 此处 注册 以进行以后的Adobe Experience Platform聚会。

翻译自: https://medium.com/adobetech/introducing-react-spectrum-2f3dfab45906

react和react2