Eslint-plugin-react: Check for jsx's depth

[otakustay]

From #1217

We want to restrict jsx to a depth of 3 or 4, this is something like restricting nested block in common js code

This should be off by default, for those who want to restrict their depth, use 'jsx-max-depth': [2, 4] to enable it

[chriswong]

Working on it.

[ljharb]

One concern I have is that enabling this rule might encourage people to move clean inline jsx into renderFoo methods (instead of separate components, which would be the best).

It'd be great if this rule could also traverse to functions and instance methods to count the jsx; stopping counting only at component boundaries, not at function boundaries.

[otakustay]

Tracing function calls may not be easy, is it acceptable that we first implement the basic rule, then add a trackFunctions in the future?

Further more, I may propose a prefer-comopnent-to-function rule which warns on function calls that can be replaced with components