Reactを使ってポートフォリオサイトを作ってみたいその１
こんにちは、とのっちょです。
前回はJavaScriptの勉強をしたので、いきなりReactに飛んでみようと思います。せっかくなので最新版を使っていきます。
練習用に自分のポートフォリオサイトを作ってみようと思います。進捗があったら今後も記事を書きます。
nodenvで環境を設定する
nodenvを使っているので、nodenvで環境を作ります。執筆時点のnode最新版は21.4.0なので、入れます。
nodenv install 21.4.0
nodenv local 21.4.0入れました。Reactでアプリを生成します。
nodenv exec npx create-react-app my_portfolio生成しましたので、試しに開発サーバーを起動します。
nodenv exec npm start勝手にブラウザが起動して以下の画面が表示されました。
アプリの雛形ができました。
少し覗いてみる
前回の記事で書いたんですが、index.htmlがどうなっているか見てみます。
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>bodyの下にrootとIDが割り当てられた要素があります。index.jsにはこのrootとアイデンティファイされた要素にレンダリングしている記述があります。
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);AppがコンポーネントでしょうからApp.jsを見てみると、この原子っぽいのがぐるぐる回る画面が生成されていることがわかります。ちなみにインスペクションでこの画像見ると画像が回転していますね。これはCSSでやっていました。今CSSそんなことできるんだ。
とりあえずベタ書きしてみる
ポートフォリオサイトと言っても何をかけばいいかあんまりわかっていないので、まずは自己紹介と簡単な職歴を書いていこうと思います。
ベタ書きで。
はい、クソダサウェブサイトです。とりあえず項目を埋めたので、今度はデザインを入れていきます。
ニュージーランドの景気について
ところでニュージーランドの景気についてちょっと書こうと思います。
ニュージーランドの景気を一言でいうとかなり悪いです。
景気が悪いだけならまだしも、cost of living crisisという状況になっています。
ニュージーランド政府がコロナ対策を厳格にしたせいかはわかりませんが、とにかく物価が高騰しています。更に今年はクマラ芋などの主食が不作だった時期があり、大惨事でした。
クマラ芋というのはさつまいものような芋で、ニュージーランドに住むパシフィカの主食でした。これまでは割と雑に買ってもそれほど高くはなかったんですが、今はキロ14ドルに高騰しています（昔は10ドルしなかった気がする）。
さらに、今年はクマラ芋を生産している地域が悪天候で不作となり、一時期キロ20ドルにまで跳ね上がっていました。今は14ドルで落ち着きを取り戻していますが、それでもかなり高いです。
今は一ドル90円程度になっていますので、日本からある程度お金を持ってきて長期滞在するのは大変な時期かもしれません。
この記事が気に入ったらサポートをしてみませんか？