コード

どのアプリも本物のReactコードでできていて、エディタ上部のPreviewの隣にあるCodeですべて確認できます。開く必要は一度もありません。作りを見たいとき、場所を示したいとき、自分で変更したいときのためにあります。

Explorer

左側には次のものがあります。

• Search codeは、すべてのファイルから単語を探します。
• Open editorsは、開いているファイルをタブで表示します。
• Filesはアプリ全体です。App.js、componentsにある画面とパーツ、libにあるデータが入っています。
• Imagesは、アプリが使っている画像で、枚数も表示されます。クリックすると大きく表示されます。Drawで画像に赤い印を描いて何かを示せます。Add to chatを使うと、次のメッセージと一緒に送れます。

エディタの左上にあるボタンでExplorerを隠すと、画面を広く使えます。

チャットにコードを示す

どこにあるかを説明する必要はありません。

• コードの上にあるReference fileは、ファイル全体を次のチャットのメッセージに添付します。
• 行の左にある「+」は、その行を添付します。複数の行を選ぶと、まとめて添付できます。

あとは短い指示で十分です。「リストが空のとき、ここの動きがおかしいです」のように伝えてください。

要素の行を見つける

右上にある二つのペインのボタンSplit viewは、プレビューをコードの隣に表示します。コンピューターでCodeを開いている間だけ使えます。スマートフォンでは一度に一つのペインしか表示できません。開くとチャットの幅が狭くなって場所が空き、閉じるとチャットは元の幅に戻ります。そのため、読んでいる内容についてチャットで質問し続けられます。

Split viewをオンにすると、その隣にポインターボタン（Click an element to find it in the code）が表示されます。オンにすると、プレビュー内でクリックしてもアプリ本来の動作は起きません。代わりに、その要素を作っているファイルがその行で開きます。オフにすれば、プレビューを通常どおり使えます。「あの見出し」から、その裏にあるコードへ向かう最短の方法です。見つかった行は、左にある「+」で次のメッセージに添付できます。

手作業で編集する

有料プランでは、コードを自分で変更できます。コードの中に直接入力でき、下部のバーにあるAuto-save onは、入力するたびに保存されることを意味します。プレビューもそれに合わせて更新されます。Copy codeは、表示しているファイルをコピーします。

無料プランでは、コードの閲覧、検索、チャットへの指定はできますが、変更やコピーはできません。同じバーにあるUpgrade to editがそのことを示しています。