最初の表示
画面に出るまでの道すじ
このコースの演習画面には、左にファイル、右にプレビューが出ています。書いたコードがどうやって右の画面になるのか、先に道すじを見ておきます。
登場するものは3つだけです。
App.jsx… 画面の入口になるファイル。ここが必ず読まれるApp関数 … 画面の形を返す関数。返した形がそのまま表示になるstyles.css… 置いておくと自動で読み込まれる見た目の指定
App.jsx を読む
一番小さい App.jsx は次の形です。
export default function App() {
return <h1>あおいのプロフィールサイト</h1>;
}export default は「このファイルの代表はこれです」という印です。React 側はファイル名だけを知っていて、中の関数の名前までは知りません。だから代表に印を付けておきます。印が無いと、React はどれを表示すればよいのか分からず、画面が真っ白になります。
App は普通の JavaScript の関数です。引数を取らず、画面の形を return で返します。返した形が右のプレビューに出ます。逆に言うと、return していないものは絶対に画面に出ません。
ファイルを増やす
ファイルは1つでなくてもかまいません。styles.css を置けば、自動で読み込まれて見た目が変わります。
body {
font-family: sans-serif;
padding: 24px;
}あとの章では Header.jsx のように部品ごとにファイルを分けていきますが、そのときも入口は App.jsx のままです。App.jsx から他のファイルを呼び出す、という形になります。
つまずきどころ
画面が真っ白になったときに疑うところは3つあります。export default を書き忘れていないか、return を書き忘れていないか、タグの閉じ忘れが無いか。この3つでほとんど解決します。
また、App 関数の中に console.log を書いても画面には出ません。画面に出るのは return した形だけです。
演習
自分が書いた文字を、右のプレビューに出してみます。ここで一度、手を動かして画面が変わる感触をつかんでください。