What interested me most about React is how I can use it to solve some basic data input problems. So the application needed to consist of these basic features:

1. Easy form creation
2. Simple, cross-field and custom validation
3. Look-up tables and dropdowns
4. After input calculations (between properties and components)
5. Detail input (invoice items)
6. Integration with server-side technologies

Honestly, I’m pretty frustrated with the current crop of Todo apps. They are completely useless. I think that a basic invoicing app does a much better job of presenting maturity and power of a certain framework, but I guess that would make too many frameworks and tools look ridiculous. To set up a basic invoicing app you need 3 tables: Partners, Invoice and InvoiceDetail. You need 2 forms, of which the invoicing form would be the one that holds most of the complexity. Actually, you could completely toss out the Partner form, and have it only as a look-up table. It’s a simple, yet very comprehensive demo app.

The invoice form contains partner dropdown, total fields for calculating netto, tax, and brutto values. Adding or subtracting invoice items should change calculated totals. Invoice items also contain calculations (multiplying quantity and unit price) that then have to trigger totals calculation. The validation should work on partner field, date and totals.

All of these features have to be easy to implement with minimal boilerplate and highly extensible (convention over configuration).

In the next post I’ll explain some libraries I used to achieve this, and some additions I had to do to make it all work. 
You can already check out the source code on github, and a demo app (link in the description)

https://github.com/brunoAltinet/ReactAspNetCrudExample