React Beyond the Browser

Menahi Shayan, former CTO, discusses the power of React in software development beyond the browser, emphasizing its ease of use and versatility. JS developers face challenges beyond JS comfort zones when building tools for various platforms, illustrating diverse paradigms and syntaxes. Learn how to set up office add-ins with React using Yeoman, generating boilerplate for Excel add-ins and exploring code structure. Explore ExcelJS API integration with React for Excel add-ins, including manipulating Excel sheets and syncing data between JavaScript and Excel runtimes. Extract values and addresses from selected ranges in Excel using context.sync function. Display data in JSX/TSX and demonstrate accessibility of data selected in Excel sheets through JavaScript/React. Leverage NPM packages including generative AI and Tailwind CSS to create a React-powered Excel add-in. Utilize Fluent UI for consistent UI with Excel and demonstrate JS capabilities in modifying Excel content. Discussing challenges in utilizing an LCD display with limited capabilities for React implementation and highlighting the absence of CSS, state management, animations, and DOM updates in current rendering methods. Presenting a groundbreaking solution to render React on embedded system displays by utilizing the Linux system frame buffer with Chromium, achieving high FPS and full HTML, CSS, and JS support. Running a React-based package called Magic Mirror on an embedded system enables seamless API calls through JavaScript, full UI rendering, Chromium inspector access, and remote debugging experience. Leveraging all available packages beyond the browser unlocks JavaScript's full potential on embedded systems, urging users to explore unconventional setups and embrace the native development philosophy.