React.jsを真面目に習得してみよう（1/n）

Contents

はじめに

React.js、使えたら便利だよなぁ、と思いつつ幾星霜。
知り合いがReactはいいぞと喧しいのでw
ちょっと時間ができたので真面目に取り組んでみることにした(´・ω・`)

真面目にと言いつつ専らChatGPTに教わる気満々なんですがw w

今回のおしながき

Dockerでの環境構築
React Routerでルーティングまで確認

Dockerでの環境構築

取り敢えず最低限動く環境を作ります。

https://qiita.com/aka_ebi/items/79dd54982aeeb72aecf6

こちらに従います。

reactのプロジェクト作成

$ npx create-react-app react-app

これで現在のディレクトリの配下に /react-app ができるので、そちらにcd。

Dockerfileとdocker-compose.yml 作成

FROM node:20-alpine
ENV NODE_ENV=development

WORKDIR /usr/src/app

COPY package.json package-lock.json .
RUN npm install

COPY . .

version: "3"

services:
  react-app: #サービス名
    build: .
    volumes: #バインドマウント
      - ./:/usr/src/app
    command: npm start
    ports:
      - "3000:3000"

それそれ起動

せっかちなので、作ったらまず立ち上げたい

$ docker compose up --build -d

それっぽい画面が動いたら、ひとまずOK

React Routerでルーティングまで確認

さて、ここで知人とワイの噛み合わない会話をば

ワイ> さて学習を始めたはいいんだが、ルーティングがわからんのじゃ
知人 > pagesフォルダにjsを放り込めばおk。別段やること無いじゃろ

鵜呑みにしかけたワイ、めちゃくちゃ調べた

それNext.jsじゃろがぃワレ

Next.jsはReact.js上で動くフレームワーク
ならばReact.jsから習得して→Next.jsを追って習得したいワイ
（いやそこまで思ってなかったんだけど前述のインストールコマンドから違っていた）

仕方ないから、React Routerを習得

インストール

まずreact-router-dom をプロジェクトにインストール。

$ npm install react-router-dom

基本的なセットアップ

次に、react-router-domを使ってルーティングを設定。ここでは、BrowserRouter, Routes, Routeを使用します。

`App.js` の例

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>
  );
}

export default App;

各コンポーネントの例

例えば、Home.js, About.js, Contact.js といったコンポーネントを作成します。

`Home.js` の例

import React from 'react';

function Home() {
  return (
    <div>
      <h1>Home Page</h1>
    </div>
  );
}

export default Home;

`About.js` の例

import React from 'react';

function About() {
  return (
    <div>
      <h1>About Page</h1>
    </div>
  );
}

export default About;

`Contact.js` の例

import React from 'react';

function Contact() {
  return (
    <div>
      <h1>Contact Page</h1>
    </div>
  );
}

export default Contact;

ここまでの段階でアドレスバーで http://localhost:3000/about とか直リンすればルーティング通りに動きます。
コンポーネントらしく一手間入れます。

ナビゲーションの追加

ナビゲーションを追加するためには、Linkコンポーネントを使用します。

ナビゲーションバーの例

import React from 'react';
import { Link } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/contact">Contact</Link></li>
      </ul>
    </nav>
  );
}

export default Navbar;

このナビゲーションバーをApp.jsにインポートして使用します。

`App.js`の更新

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
import Navbar from './components/Navbar';

function App() {
  return (
    <Router>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>
  );
}

export default App;

画面上部にナビゲーションバー的なものが表示できていれば、OK

取り敢えず本日は以上。

終わりに

さて自称バックエンド屋のワイ、データがストアor取得できるサーバが欲しくなってきた。
qiitaなんかの有り物APIのデータをぐるぐるローテして遊ぶ。
あとjavascriptのギミックを入れたい。

それよりLaravelのスキルが中途半端なのでどうにかしないと…。