build react frontends

React Hooks’ opaque semantics frequently lead to subtle UI bugs. To address this, we introduce React-tRace—the first formal semantic model targeting the core mechanisms of React Hooks. Grounded in operational semantics and definitional interpretation, our model precisely captures the execution ordering, state dependencies, and invocation constraints of Hooks within functional components. We formally prove that the model satisfies essential Hook properties—including call consistency and state persistence—and empirically validate its behavioral equivalence with the real React runtime. Leveraging this model, we develop a visualization-based debugging tool that significantly enhances developers’ understanding of Hook behavior and accelerates defect localization. This work establishes a verifiable, interpretable theoretical foundation for React Hooks while delivering practical tooling support for robust UI development.

This work addresses the challenges posed by implicit dependencies introduced by React Hooks, which often lead to anti-patterns that reduce code predictability and maintainability. To tackle this issue, we propose HookLens—the first interactive visualization system specifically designed for React Hooks—that integrates static and dynamic program analysis to explicitly reveal data flows and dependency structures across components. Through an iterative design process, HookLens provides an intuitive interface that enhances developers’ understanding of complex hook-based logic. A user study with 12 developers demonstrates that using HookLens significantly improves the accuracy of anti-pattern identification compared to conventional code editors and state-of-the-art large language model (LLM) coding assistants, thereby validating its effectiveness in supporting code comprehension and quality assurance for React Hooks.

This study addresses the lack of clarity regarding pain points experienced by React developers in practice. Leveraging React-related question–answer data from Stack Overflow, we conduct a multi-dimensional empirical analysis. Methodologically, we integrate exploratory text mining, manual annotation of error types, and reputation-based stratified statistical analysis—first establishing associations among eight high-frequency keywords (e.g., *code*, *link*, *vir*), error category distributions, and user community status. Results reveal that algorithmic errors constitute the largest error category; notably, medium-reputation users contribute 55.77% of all questions, underscoring their role as a critical bottleneck cohort. The study uncovers the under-recognized needs of intermediate-level developers within the React ecosystem, offering a data-driven perspective to inform community support strategies and framework design improvements.

This work addresses the limitations of large language models in fine-grained web interaction despite their strong performance in high-level semantic planning. To bridge this gap, the authors propose CI4A, a mechanism that abstracts complex UI component interactions into unified tool primitives through semantic encapsulation, thereby constructing an agent-optimized interaction interface that transcends traditional human-centric UI constraints. Implemented on Ant Design, CI4A covers 23 common UI components and features a hybrid agent architecture with a dynamically updated action space conditioned on page state. Evaluated on a reconstructed WebArena benchmark, the CI4A agent achieves a task success rate of 86.3%, substantially outperforming existing methods while significantly improving execution efficiency.

This work addresses the vulnerability of existing ReAct-based web agents to prompt injection attacks when encountering malicious web content, which can hijack their control flow. To mitigate this, the authors propose shifting to a “Plan-Then-Execute” paradigm: before observing any web page, the agent generates a task-specific static execution plan and relies on typed, task-level APIs instead of low-level browser operations, thereby isolating untrusted inputs from the decision-making logic. By combining programmatic planning with static task graphs, the approach eliminates runtime dependence on large language models for action generation. Evaluation on the WebArena benchmark shows that all tasks are compatible with this paradigm, and 80% can be completed entirely using pre-generated plans without any runtime LLM invocation, substantially enhancing security and auditability.

This study addresses the pervasive issue of prop drilling in React development, for which automated refactoring solutions remain lacking. This work proposes a static analysis-based approach to automate such refactoring. It first introduces a novel metric to quantify prop drilling complexity, enabling the precise identification of redundant property-passing paths. Subsequently, it leverages the React Context API and component composition patterns to automatically eliminate these redundancies. To operationalize this method, a Node.js command-line tool was developed and evaluated on real-world open-source projects, successfully resolving 76.3% of identified prop drilling instances. By achieving large-scale automated mitigation of prop drilling for the first time, this research significantly enhances the maintainability of React codebases.

This work addresses logical redundancy, state fragmentation, and poor maintainability arising from front-end/back-end heterogeneity in AI-generated web applications by proposing a backend-driven hypermedia application model. The approach uniquely integrates Kotlin’s statically typed HTML DSL with a reactive signal mechanism, enabling automatic synchronization between UI and backend state through type-safe custom HTML attributes and builder patterns, thereby substantially reducing reliance on JavaScript. Built upon HtmlFlow extensions, Datastar data attributes, and the Spring MVC architecture, the method demonstrates in the Petclinic case study a near-complete elimination of client-side scripting, enhanced type safety, and the realization of an isomorphic reactive interaction paradigm across frontend and backend.

该研究针对计算机使用代理中组件级故障诊断不足的问题，提出了ComponentBench基准测试和诊断流程，通过一系列标准化任务评估代理在现代网页界面中的表现。

研究评估了三种基于LLM的智能IDE（Copilot、Cursor和Windsurf）在从零开始生成五个全栈Web应用时的表现，发现它们在常见模式生成上成熟度高，但在分布式架构生成中错误较多。

研究探讨了低成本小模型在基于A2UI的UI生成中能否达到高质量，通过调整监督微调数据构建方法、模型大小和组件目录大小来实现。