React 学習記録 #1
初めに
Reactについて学習したので、学習した内容を数回に分けて書いていきたいと思います。
今回はReactがどんなものなのか・環境構築・実行手順について書いていきます！(私自身もかなり苦戦しました)
この記事はNext.js学習記録と同時期に書いています。(書き終わった時点で公開します)
筆者は半年ほど前にReact公式ドキュメントの五目並べを模写したことがあります。
この記事は、html(webページ)についてのある程度の知識を持った初心者に向けた内容となります
参考にしたサイトは以下の通りです
Reactとは？
Reactとは、Javascriptのライブラリで、webアプリなどのUI(ユーザーインターフェース)部分を実装するフロントエンドの技術です。
UI はボタンやテキスト・画像といった小さな要素から構成されていて、React ではこれらをネストして、再利用できるコンポーネントにまとめることができるそうです。
私は、自由にUIがかけるものである。というふうにとらえています
VSCodeでコーディングする
実行環境
windows11
以前一度Reactを使ったことがあるので、その他必要なものはパソコン内に入っているような状態です。Next.jsは時間がたっていたため、今回はアップデート手順も載せています。
さて、ではVSCodeでコーディング(コードを書く)しようと思い、typescriptファイルに記述しましたが、以下のようにエラーが出てきてしまいました。
どうやら、いきなりファイルに記述することはできず、環境構築をしないといけないようです。
もしそれが面倒だよという方は、こちらのリンクから、webブラウザ上で動作するCodeSandboxでコードを記述するか、こちらのhtmlコードをコピーして、ご自身のローカルのhtmlファイルに記述してみてください。
初心者の方も、環境構築はかなり大変なので、書き方を学ぶだけなら上記の方法で記述していくのがよいと思います。(コードを書いていくうえで、最初の鬼門は環境構築だと思っています笑)
CodeSandboxの方では、 export default function App(){~~~~} の部分がUI部分に反映されるところとなるため、関数は別で作り、その関数などをこの中 { } に記述する感じになります。
htmlファイルでも、
function MyApp() {
return <h1>Hello, world!</h1>;
}
と書かれていますが、UIに返されるのはreturn内の文章ですので、この部分に表示したい内容を記述していく感じになります。
githubから構築済みのファイルをダウンロードする
こちらは、ご自身で面倒な環境構築を最小限に抑えてReactの記述をすることができる方法となります。
まずは、こちらのページからgithubページにアクセスします。
続いて、githubページにある Code ボタンから、Download ZIPを押し、.zip ファイルをダウンロードします。
そのファイルの中身をご自身の好きなファイルに移動し、VSCodeで開けば実行環境はほぼ完成です。
あとは、Nodeをインストールし、ターミナルで cd my-app と入力し、npm run dev と入力すれば http://localhost:3000 で表示されるはずです！
以下はVSCodeでjs,tsxファイル・Next.js(Reactのフレームワーク)を用いるときのセットアップ手順について書いていきますので、他の方法で進めていく方は飛ばしてください。
以下のコードをターミナルに入力します。Next.js(pages router)というReactのフレームワークを用いました！
npx create-next-app@latest
こちらを入力すると、Yesか、Noがいくつか出てきたので、そちらはすべてapp routerの部分のみ変更して(Noとして)進めていきました。
参考：https://zenn.dev/ikkik/articles/51d97ff70bd0da
そうすると、いろいろとファイルが追加されていきます。
実行...？
それでは実行しようと思い、npm run dev とターミナルに入力したのですが、Next.jsを利用するには私の入れた以前のNode.jsのversionでは実行できないと表示されました。
そこで、Neode.jsの公式サイトから、最新版またはおすすめのものをインストールします。
インストールが完了したら、npm run dev とターミナルに入力すると無事にhttp://localhost:3000 で、デフォルトの画面が表示されました。
終了したい場合には、ターミナルにカーソルを合わせ、ctrl + C コマンドを実行することで停止します
Reactの練習
さて、環境構築が済んだところで実際にVSCodeで記述していきたいのですが、色々なファイルがあり、勝手に消したり・変更を加えると予想外の動作をすることがあると思いますので、今ある関数などはすべて残しておき、そこに追加していく形で学習を進めようと思います！(筆者はNext.jsを用いて開発を進めていこうと思います！)
他の方法で学習を行う方は、その都度変更場所について記述します。
終わりに
今回は開発環境構築のみとしたいと思います！
予想以上に環境構築に時間がかかり、かなり大変でしたが、せっかくNext.jsで環境を整えたので、そこで学習していきます！
それでは！
Discussion