Catch invalid dom nesting on initial render

[brigand]

Currently, you get an error when react tries to update the DOM, and things aren't as expected. Early errors are much better, so in development React should give clear errors based on valid HTML structures.

For example, the select element has 1 valid child: option. The option element has 1 valid child: text node. Forms have one invalid deep child: form; and tables have a quite a few rules.

The suggested error format:

InvariantViolation: at FooComponent <select> may only have <option> children, but 
encountered: option, option, select, option, option

Forms. The element:N means displayName:childIndexIfNotZero.

InvariantViolation at FooComponent: <form> may not have any deep <form> children.
Culprit is form > div > form

InvariantViolation at FooComponent: <form> may not have any deep <form> children.  
Culprit is form -> div > div:3 > section:2 > BarComponent > div > form:1

Tables

InvariantViolation at FooComponent: <table> may only have <caption>, <thead>, <tfoot>, 
and <tbody> children, but encountered thead, tr*100

InvariantViolation at FooComponent: <table> may only have one <thead> child, but 
encountered thead, thead, tr*100

InvariantViolation at FooComponent: <table> may only have one <thead> child, but 
encountered thead, thead, tr*100

The less frequently encountered situations can be pushed to a different release, but I think it's important to have. These are bad habits that people are used to, because they're allowed in most other situations.

These are examples of people who have run into this problem.

select/option

• "Unable to find element" error on <option> elements #2620
• http://stackoverflow.com/questions/27776780/react-js-invariant-violation-findcomponentroot

nested forms:

• Provide a friendly path for reactID errors in ReactMount #1987

tables

• http://stackoverflow.com/questions/21594009/removing-row-from-table-results-in-typeerror
• http://stackoverflow.com/questions/26689900/react-js-invariant-violation-processupdates-when-rendering-a-table-with-a-di
• http://stackoverflow.com/questions/26809950/reactjs-dynamically-hiding-and-showing-table-column-causes-invariant-violation
• http://stackoverflow.com/questions/25026399/uncaught-error-invariant-violation-findcomponentroot-110-unable-to

[syranide]

#101 and #101 (comment)

As I mention, I think it's quite easily and realistically solvable (for DEV at least).

cc @zpao

[sophiebits]

This happened.