【第3回】ReactでHTMLコーディングされたWEBページを書き換える〜Reactのファイル構造とJSXについて〜

React入門

これまでの特集で、Reactで制作できる環境はできました。ここからWEBページを作っていきたいと思います。

以前の特集で制作したWEBページをReactで書き換えていきます。ゼロから作るより、Reactの特徴も感じやすいかと思います。何の変哲も無いページでも”これReactでできてんスよ。facebookと同じッスよ”って言えるので、実績作りとしてもお手軽ですね。

Create React Appのファイル構造はどうなっている？

さて、コーディングをしていきましょう！・・・となるのですが、どこから始めていけば良いのでしょうね。

Create React Appで作ってみたアプリケーションの中身をみると、以下のようになっています。

必要なものが一式揃えてもらってはいますが、”App.js”やら”index.js”など色々ありますね。Create React Appで作られるアプリケーションは以下のように読み取られていると思っておいてください。

↑index.htmlの中
↑index.jsの中

Reactでは、”index.js”のような中継役を通じてHTMLと各コンポーネントを繋いでいます。この構造なので、コンポーネントごとのカスタマイズがしやすくなっているんですね。

なので、まずは中身である”App.js”を書き換えていきましょう！

細かくしっかりJSX〜HTMLコーディングとの違い〜

“App.js”の中をみてみると以下のようになっています。

↑App.jsの中

importにて必要な情報を読み込み、compornetにて表示する内容を記載していっているのがわかるかと思います。

そして、Appという機能を設定しています。ここでは、Reactのclassを使ったコードが書かれています。Reactでは機能実装する際には関数を用いるものと、クラス指定するものがあります。他には、冒頭の情報を読み込む際のものとHTMLにレンダリングを行う際のコードを知っておけばまずは大丈夫でしょう。

基本を簡単に理解するためなので、説明が不足している点はご了承ください。

returnの()以降にでは、JSXにて書かれています。JSXはHTML風のコーディングが可能としているものでしたね。

ということは、ここに以前に作成したコードをコピペすれば、反映されるのでしょうか。試しにやってみます。

・・・エラーです。

JSXはあくまでHTMLに近いものであって、別物です。なので、細かい記載方法に違いがあるんですね。代表的なものだとclassは”claccName”と記載する、forでは”htmlFor”と記載するといったものですね。

あと、以下の記載だとエラーになり、renderメソッドの対象となるコンポーネントは一つを指定するというルールもあります。

▼エラー例

render(){
    return (
        <h1>テスト</h1>
        <p>このページはテスト。</p>
    )
}

▼実装するには以下のようにreturnの直下は1個にしないといけない。

render(){
    return (
        <div>
            <h1>テスト</h1>
            <p>このページはテスト。</p>
        </div>
    )
}

他にも細かい記載の違いはありますので、エラー表示画面を見つつ修正していきます。例えば、<img>タグではHTMLでは</>が必要なくとも読み込めましたが、JSX上ではエラーが出てしまいます。

▼HTMLだと以下記法でも読み出せるのですが・・・

<li><a href="images/sample_01.jpg" data-title="sample"><img src="images/sample_01.jpg"></a></li>
<li><a href="images/sample_02.jpg" data-title="sample"><img src="images/sample_02.jpg"></a></li>
<li><a href="images/sample_03.jpg" data-title="sample"><img src="images/sample_03.jpg"></a></li>
<li><a href="images/sample_04.jpg" data-title="sample"><img src="images/sample_04.jpg"></a></li>

▼JSXだと以下のようにaltタグ記載やimgタグでも</>を入れた記法でないとエラーが出ます。

<li><a href="./image/sample_01.jpg" data-title="sample"><img src="image/sample_01.jpg" alt=""/></li>
<li><a href="./image/sample_02.jpg" data-title="sample"><img src="./images/sample_02.jpg" alt=""/></a></li>
<li><a href="./image/sample_03.jpg" data-title="sample"><img src="./image/sample_03.jpg" alt="" /></a></li>
<li><a href="./image/sample_04.jpg" data-title="sample"><img src="./image/sample_04.jpg" alt="" /></a></li>

このJSX記法では細かい箇所でも違いがあります。なので、最初のうちはHTMLでコーディングしたものを検証していきながら覚えていくのも良いかもしれませんね。

他にもファイル構造で注意があります。App.jsなどのコンポーネント内にて読み込む画像データを格納する際は、publicフォルダに置いておかないと、うまく読み込まれません。設定を変えればできると思いますが、今はpublicフォルダ内に置いておくのが無難でしょう。（importで読み出すのもありですが、数が多いと大変ですし）

逆にCSSで読み込む時はsrcフォルダに格納しないといけません。この違いはApp.jsなどはHTMLに書き換えられた（コンパイルされた）後に読み込まれるので、index.htmlがあるpublicフォルダからの読み込みになるからでしょうね。

諸々修正していき、ReactでのWEBページができました！見た目はHTMLコーディングと変わりませんが、Reactで作られています！あのFacebookと同じ作り方です！

元となったページはこちら。

・・・色々、おかしいですね。そうです。前回はjQueryにて背景画像の表示・差し替え、ナビからのスクロールなどを行っていました。まだその部分が実装されていないんです。（一応、jQueryも併用することは可能なので、そのままの実装自体は可能です）

本当に一枚の静的ページでしたらこちらでも問題内ですが、まだまだ未完成品です。次回ではjQueryで実装されているような動きをReactで加えていき、完成させたいと思います！

コメント

タイトルとURLをコピーしました