React jを使ってこの簡単なUIをどのようにレンダリングしますか？

Question

私はReactを初めて使用しており、画像に表示されているUIをレンダリングしたいと考えています。

説明： UIは、sidenavと表示コンテナの2つの主要コンポーネントで構成されています。サイドナビゲーションには、そのタブのタイトルと質問/回答のペア数が表示されます。ユーザがサイドナビゲータのタブをクリックすると、表示コンテナは選択されたタブを質問/回答のペアのタイトルとして出力します（apiを参照）。

EX：ユーザがサイドNAVにTAB2をクリックし、表示コンテナは TAB2

質問C質問D

質問Eへの質問Cに 回答

質問D 回答が表示されます 質問への回答

3つの質問/回答のペアがあるため、サイドナビゲーションタブ2には3が表示されます。

[IMG]データはJSON形式 [{ 'Tab1を' 内のAPIからフェッチされるhttp://imgur.com/fR4DVoP[/IMG] http://imgur.com/fR4DVoP

：[ { '質問'： 'QuestionA' '答え'： }]、 'TAB2' '質問Bの答え'： 'QuestionB' '答え'：[ {}、{ '質問' 回答の質問に ' '質問'： 'QuestionC' '答え'：} '質問Cに回答'、 { '質問'： 'QuestionD' '答え' '質問Dへの答え'}、 { '質問'： 'QuestionE'、 '答え'： } '質問Eに回答'] // ... TAB3、TAB4、ように... }

Answer 1

あなたがreac-を読んでいましたルータチュートリアル？ここにない場合はlinkです。

注意して読んでください。その後、反応ルータリンクを使用して簡単に要件を満たす方法を理解してください。