Building an HTML5 Alien Periodic Table in React
Intended Audience: Web Developers
Estimated Reading Time: 3 minutes
In 2016, React was taking over frontend development — but most tutorials assumed a Node.js stack. What if you wanted to try React in an existing ASP.NET MVC application without overhauling your toolchain?
I built a demo called "Alien Periodic Table" to answer that question. The app displays a grid of randomly-generated element names with search functionality, demonstrating how to integrate React and TypeScript into a traditional .NET environment using Visual Studio 2015.
The Approach
- No Node.js required — React and TypeScript compiled directly in Visual Studio
- Flux architecture — Unidirectional data flow, implemented in a strongly-typed environment
- TypeScript throughout — Maintain data contracts with Visual Studio's tooling instead of fragile plain JavaScript
- Seamless integration — Build your next feature in React without scrapping your existing ASP.NET application
Presentations
I presented this talk at two events in early 2016:
- North Dallas .NET User Group — February 1st, 2016, 6:30pm at nThrive Headquarters in Plano, TX
- MVP MIX Dallas Conference — March 9th, 2016 at the Addison Convention Center. MVP MIX was a developer conference organized by Chander Dhall. I prepared exclusive additional content for this event, taking the code demo further than the user group version.
Code
The source code is available on GitHub: mikerandrup/alienperiodictable