1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【React】超カンタンなSPAサイトを一通り作成してみて

Last updated at Posted at 2020-03-29

#経緯
フロントエンドエンジニアとしてキャリアチェンジするにあたって、React.jsでのポートフォリオ作成に取り組む過程で、中でも一番興味があり、尚且つはじめに取り組むのに比較的カンタンなSPAサイトを作成してみました。

#注意
あくまで、初学者が自分用のメモ、もしくは同じく同等のレベルの初学者方の参考に少しでもなればと思い投稿いたしますので、中級者異常の方にとってはあまり参考にならない記事となっておりますので、ご了承ください。

#今回のディレクトリ構成
directory
 ーApp.js
 ーindex.js
 ーcomponents
  ーHeader
   ーHeader.jsx
  ーTop
   ーTop.jsx
  ーimg
   ーreact.png
あくまで、わかりやすいように今回の記事で解説する部分のみ表示しています。

#個人的につまづいたポイント

  1. 各コンポーネント同士の連携
  2. 画像の読み込み
  3. .jsxはHTMLではなくてXML
  4. 階層構造

#1. 各コンポーネント同士の連携
今回のポートフォリオを作成するにあたって、表示したいページごと単位だけではなくてHeaderやFooterもコンポーネントで作成してみました。
その際に、一般的なサイトと同様にHeader部分にナビゲーションを入れて、各ページに遷移することを試みました。
それにあたって、Header.jsxに非同期処理でのページ遷移を行うためのRouterタグ等を、以下のように予め用意しておきます。

Header.jsx
import React from 'react';
import {
    Route,
    Link
  } from "react-router-dom";
  import Top from '../Top/Top';

function Header() {
  return (
    <div>
     <Router>
      <nav>
      <ul>
        <li><Link to="/">top</Link></li>
      </ul>
      </nav>
      <Route path="/" exact component={Top} />
    </Router>
    </div>
  );
}

  export default Header;

そして、このHeaderコンポーネントを受けるApp.jsには以下のように読み込みを行います。
ただ、私が個人的に勘違いしていたポイントとして、このHeaderコンポーネントを受けるApp.jsにも以下のようなimportが必要と思い混んでいたため、、

import {
    HashRouter as Router,
    Route,
    Link
  } from "react-router-dom";

このようなエラーメッセージが出てしまいました。
既にHeader.jsxでimportされているため、重複してしまっていますよというメッセージですね。
スクリーンショット 2020-03-29 7.54.09.png

App.jsではこのようにシンプルで問題ありません。

App.js
import React from 'react';
import './App.css';
import Header from './components/Header/Header';

function App() {
  return (
    <div>
      <Header />
    </div>
  ); 
}


export default App;

#2. 画像の読み込み
画像の読み込みなんて、そんなところでつまずくわけないだろ笑って言われちゃうかもしれませんが、ここで個人的にはだいぶ時間を取られてしまいました。
その要因としては画像もimportしなければいけないということ。
入力方法としては以下の通り.

import Src from '../../img/react.png'
.
.
.
<img className="img" src={Src} alt="Src" />

そして、import後にはimgタグでこのように入力すれば問題ありません。

#3. .jsxはHTMLではなくてXML
ここが一番のカルチャーショックだったのですが、これまでHTMLでのコーディングしか経験がなかったため、XMLでのコーディングの作法とは若干異なる部分でやられました。
具体的にはbrやimgのような閉じタグのないようなものです。

//HTMLでの書き方
<br>
<img>

//XMLでの書き方
<br/>
<img/>

//閉じタグがないとこんな感じのエラーが出てしまいすよ
Parsing error: Expected corresponding JSX closing tag for <img>

とまあ、こんなことかよ!
と思われるようなことでも、XMLのカルチャーがない人間にとっては全くの想定外なので気をつけたいですね。

#4. 階層構造
これはシンプルに考え方や感覚、経験の問題なのですが、意外と気がつかなかったりもするので気をつけましょう。
参考記事を添付いたします。
http://w-d-l.net/html__course__high_level_link/

#最後に
ここまで、超初歩的なミスをまとめた記事を作成しましたが、自分にとっての振り返りとしてのみではなく、これから勉強される方にとっても何かしらの参考になれば幸いでございます。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?