Introducing React View: A Set of Tools that Closes the Gap between Users, Developers

on YouTube ↗21m

" summary

A live-edit playground called react view synchronizes a rendered component, editable source and interactive knobs so changing a prop updates code and UI together; it uses Babel to parse and transform JSX, builds and generates ASTs, and runs Prettier to print readable snippets. The team ships this for a library used in over 600 apps with ~1,000 developers, demonstrates handling 384 permutations of a single component, and the system reliably produces runnable code.

AI-written summary · about

" chapters (7)

1. 0:00Documentation for developers
2. 3:51Documentation system evolution
3. 6:40Interactive playground
4. 10:56Knobs and ASTs in playground
5. 14:28Generating code from ASTs
6. 17:02Advanced React View features
7. 17:43Key takeaways and open-source

" related talks

• 28mRethinking the View using React.jsPrathamesh Sonpatki · RedDotRuby 2015
• 30mDesigning with ReactMark Dalgleish · React Amsterdam 2019
• 21mThe Evolution of React UI DevelopmentNik Graf, Max Stoiber · ReactEurope 2016
• 34mI Heard React Was GoodRyan Christiani · FITC Toronto 2016
• 01h 04mWhat makes React different?Jake Ginnivan · NDC Sydney 2016
• 29mEvolving the Visual Programming Environment with ReactJonas Gebhardt · ReactEurope 2016
• 32mWhy don’t browser dev tools understand your code?Steven Schkolne · Conf42 JavaScript 2023
• 27mI Heard React Was GoodRyan Christiani · Spotlight React 2016