Meta
Introduction
React.dev was created from the ground up to teach the React.js community how to build apps with modern React. Considered the canonical React reference, its content was created by community members and core team members. With interactive examples and code challenges, it can get learners from 0 to "hello world" in ten minutes! It replaces reactjs.org, an out of date documentation site perpetuating an older paradigm.
Why nominated
Best API Reference Documentation
React's Hooks API is challenging as it is entirely function and arguments-based. To create useful API references, we decided to show the whole shape of the function in a copy-pasteable chunk—rather than breaking it down into its component parts (which was unintelligible!) Each reference page contains copious use cases, gotchas, and usage notes from the core team.
Best Visual Design
The portal went through several design iterations before arriving at this one, an update to the older site's brand aesthetics while maintaining its developer-minded sensibilities. Content is the focus of the design, with gentle pastels and callouts used to draw the learner's attention to important details without flooding them information (see the expandable notes that let people dive deep on complex topics). The interactive code examples reconfigure for narrow view ports and work with touch inputs, giving busy learners commuting on buses (a real use case!) the same access and ability to learn as those sitting at a desk.
Best New DX Innovation
React.dev introduced interactive example code at a scale previously unseen in documentation in the frontend library space using CodeSandbox. All 600+ code examples are manipulable, and in each sections "code challenges," learners are encouraged to fix broken examples by following clues left by the core team. These challenges help make the lessons "stick," just as if the learner had been on the job encountering the same challenges!
