Reactを使ってポートフォリオサイト作成

はじめに

Reactの備忘録

Reactを使ってポートフォリオサイトを作成。

Reactを選定した理由

多くの方に使われてる。
コンポーネントという仕組みに興味があったため。

ポートフォリオサイトを作成する理由

ポートフォリオサイトを作って自分自身のやったことを整理して、これからのやったことも追加できるようにしよう作ろうと思ってます。

下調べしての気づき

• 時間をかけすぎない
  時間をあまりかけず、まずは骨組みを作るイメージからスタートします。
  サイトを作ることに時間をかけてしまって、大事な部分が疎かにならないように意識してます。

• 読み手が読みやすいを意識する。
  白を基調とした構成で読みやすくする。
  色であまりストレスを与えないようにする。

• 言葉をなるべくシンプルにする。
  無駄をなくすことで相手に伝わりやすくなる。
  伝えたいことがわかりやすくなる。

内容

Header.js

import React from "react";

function Header(){
    return (
        <header>
            <h1>ポートフォリオサイト</h1>
            <nav>
                <ul>
                    <li><a href="#profile">Profile</a></li>
                    <li><a href="#skill">Skill</a></li>
                    <li><a href="#portfolio">Portfolio</a></li>
                </ul>
            </nav>
            <div className="social-icons">
                <a href="#"><img src="x-logo.png" alt="X"></a>
                <a href="#"><img src="github-logo.png" alt="GitHub"></a>
                <a href="#"><img src="qiita-logo.png" alt="Qiita"></a>
            </div>
        </header>
    );
}

export default Header;

MainContent.js

import React from "react";

function MainContent(){
    return(
        <main>
            <h2 id="profile">Profile</h2>
            {/* {ここにプロフィールの内容を追加} */}

            <h2 id="skill">Skill</h2>
            {/* {ここにプロフィールの内容を追加} */}

            <h2 id="portfolio">Portfolio</h2>
            {/* {ここにプロフィールの内容を追加} */}
        </main>
    );
}

export default MainContent;

App.js

import React from 'react';
import Header from './Header';
import MainContent from './MainContent';

function App() {
  return (
    <div className="App">
      <Header />
      <MainContent />
      <Footer />
    </div>
  );
}

export default App;

押さえておくべき点

• Reactはfacebookが開発したJavaScriptのライブラリ
• コンポーネントというブロックをファイルごとに作成して組み合わせる。
• コンポーネントで作成したものは今後、再利用することができる。
• App.jsでまとめて実行するファイルを作成。
• 実行はターミナルにて「npm start」を入力して実行することでReactアプリ起動。

参考にしたサイト

コンポーネント