reactjs - How do I debug when React.js produces no output?

Question

I have worked with React.js on and off for several years. When I make certain kinds of mistakes in the jsx code, React.js silently fails. Here's what happens:

• Compilation (with webpack) appears to succeed and produces no error messages or warnings.
• But when I open my index.html file, all React components are missing from the page. (The nav bar, which I have coded directly into my index.html file, is still present and is styled correctly. Below that, where my React content is supposed to be, the page is blank.)
• The browser console doesn't show any error messages.
• For some mistakes, when I inspect different versions of the page source using my browser, I see that the <div data-reactroot> element was present before my breaking change, but is now absent. For other mistakes, <div data-reactroot> is present, but its contents are empty or commented out.

There is no error message to help pinpoint the source of the problem, and in my experience this same behavior can be caused by many different kinds of mistakes. So my question is, how should one debug these silent failures from React?

I'm looking for a general debugging approach, analogous to these tips for debugging CSS. Good answers might include a list of mistakes to check for, useful debugging tools, or other ways to narrow down the cause of the problem.

标签： reactjsdebuggingwebpack