首先

React的笔记本

使用React创建个人作品集网站。

为什么选择了React？

因为对于组件的机制很感兴趣，所以受到许多人的使用。

创建投资组合网站的原因

我打算制作一个作品集网站，整理一下我自己做过的事情，并希望能在未来增加即将做的事情。

进行调查后的发现

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

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

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

请将以下内容用中文进行改述，只需一个版本：

这本书的内容很有趣。

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;

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;

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アプリ起動。

参考网站

组件