Web開発初心者にReact+Reduxについて質問された時どう答えるべきだったか…後悔することありますよね。そんな私が受けた質問と改めて回答考えてここに記載していきます。
なお私はWeb開発歴半年経ってないので、うまく答えられなかったらすみません。

stateを変更したらなぜレンダリングが走るの？

ローカルサーバー起動させてWebアプリ動かしていた時の質問。勝手にレンダリング 走ってReactすごい！と。

setState()を実行するとそのコンポーネントのレンダリングがレンダリングのキューに入るから

そもそもReactのレンダリングについて、簡単に言えばReactでは仮想DOMを比較して差分だけ実際のDOMに反映させていると言われている。
より詳しくいうなら、レンダリングプロセスは下記のようになる

• 更新が必要なコンポーネントを探しレンダリング出力結果を収集する
• 仮装DOMとレンダリング出力結果を比較して変更すべきDOMを収集する
• 変更すべきDOMを1つの同期シーケンスでDOMに適用する
  https://qiita.com/hellokenta/items/6b795501a0a8921bb6b5#レンダリングプロセスの概要 より

Raactコンポーネントのライフサイクル React lifecycle methods diagram をみると理解が深まる。

stateの更新によってレンダリングされるのは、setState()を実行するとそのコンポーネントのレンダリングがレンダリングのキューに入るからである。
キューに入ってレンダリングが実行される時、デフォルトではレンダリングしたコンポーネントのpropsが変更されるため再帰的に全ての子コンポーネントをレンダリングが走る。
コンテキストプロバイダはそれらをレンダリングするコンポーネント(通常は親コンポーネント)から値を受け取る。

ちなみにReduxを使用した時の再レンダリングについては、

Reduxを使用する必要があるUIレイヤーは、常にReduxストアにサブスクライブし、最新のStateを読み取り、値を差分し、関連するデータが変更された場合には再レンダリングします。

詳しくは、Reactのレンダリングに関する完全ガイド - Qiita をみよう。

ちなみにstateが変更された時だけでなく、そのコンポーネントに渡されているpropsが変更された時にも再レンダリングされる。

自動的にWebページが更新されたことがすごいという意味であれば、
ホットリロード機能が働いているからすぐにレンダリングしてくれると答える。
Reactでインストールしているパッケージの1つwebpack-dev-serverによって実現している。
webpack-dev-serverは、ざっくり言えばライブリロード、ファイルの変更を検知して再ビルド・リロードする HTTP サーバー。
webpackが使われており開発のみで使用する。
webpack/webpack-dev-server: Serves a webpack app. Updates the browser on changes. Documentation https://webpack.js.org/configuration/dev-server/.

Chrome DevToolからみるHTMLとJSXが結び付かず迷子になる。良い方法はない？

React Developer Toolsが便利

コンポーネントの構造を確認するには、 React Developer Tools - Chrome Web Store を使うとわかりやすい。

ちなみにJSXはJavaScriptにコンパイル可能で、BabelによってECMAScript2015以降の新しい構文をECMAScript2015構文に変換していたりする。