React の独習

2024年8月1日 20:24

なんだかよくわからないが React というのがよく使われてるらしいんで
独習してみよう。
とほほのWWW入門を読んでみる

👆　Node.JS は Windows にインストールしても練習用みたいなもんらしいんで、だったら Ubuntu に入れた方が良さそうなんで、 WSL を使うことにする

muzudho@Takahashi-PC:~$ mkdir react_practice
muzudho@Takahashi-PC:~$ cd react_practice
muzudho@Takahashi-PC:~/react_practice$

👆　とりあえず Windows 11 の WSL の中の Ubuntu に `react_practice` というディレクトリーを作った

muzudho@Takahashi-PC:~/react_practice$ code .

👆　WSL のターミナルの中で `code .` コマンドを打鍵すると　外側のホストの Visual Studio Code （以降、VSCodeと略記）が起動する。
コーディングは WSL の中から見て外側のホストの Windows 11 の Visual Studio Code で行うことにする

muzudho@Takahashi-PC:~/react_practice$ ls
hello.html

👆　VSCode で react_practice ディレクトリーの下に `hello.html` ファイルを作った。
その内容は　とほほのWWW入門にあるものをコピー＆ペーストした

WSL の中の Ubuntu にある `hello.html` を、Windows 11 の VSCode から、ファイル・エクスプローラーで開けられるみたいなんで、なんのことだかわからないが開けてみる

`file://wsl.localhost/Ubuntu/home/muzudho/react_practice/hello.html`

👆　上記のファイルパスで、HTML ファイルが開かれた。

とりあえず　CDN（※）　を使った方法では React を動かす練習は Ok なようだ

※CDN … サーバーのコピーのようなもの。インターネット上にたくさん置いてくれている。ここに React のファイルなどを置いてくれていると、その CDN へのリンクを HTML に書いておくだけで React を使えるようになるので便利

Node.JS 環境で React を動かす

とほほのWWW入門では、 Node.JS 環境で React を動かすサンプルが書いてある。
Node.JS 環境ではなく Next.JS 環境で勉強したいが、とりあえず　置いてあるサンプルで練習する

npm install -g create-react-app

👆　Node.JS には create-react-app コマンドというのがあるそうだ。それをインストールする

`deprecated` というメッセージがたくさん出てきたから、とほほの記事が古いのかもしれない。 2020年に更新されてるから、４年前なので　そんなに古くないが

create-react-app というコマンドを使うと、アプリケーション　が作れるらしい。なんのことか分からないが、とりあえずやってみる。

muzudho@Takahashi-PC:~/react_practice$ create-react-app my-app

Creating a new React app in /home/muzudho/react_practice/my-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...


added 1480 packages in 49s


～中略～


Success! Created my-app at /home/muzudho/react_practice/my-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd my-app
  npm start

Happy hacking!

👆　何やらいろいろ　パッケージをインストールしたり　されたようだ

muzudho@Takahashi-PC:~/react_practice$ cd my-app
muzudho@Takahashi-PC:~/react_practice/my-app$

👆　my-app というディレクトリーを作ったようなので、そこへ移動

muzudho@Takahashi-PC:~/react_practice/my-app$ ll
total 804
drwxr-xr-x   5 muzudho muzudho   4096 Aug  1 20:35 ./
drwxr-xr-x   3 muzudho muzudho   4096 Aug  1 20:34 ../
-rw-r--r--   1 muzudho muzudho    310 Aug  1 20:35 .gitignore
-rw-r--r--   1 muzudho muzudho   3359 Aug  1 20:35 README.md
drwxr-xr-x 872 muzudho muzudho  36864 Aug  1 20:35 node_modules/
-rw-r--r--   1 muzudho muzudho 749700 Aug  1 20:35 package-lock.json
-rw-r--r--   1 muzudho muzudho    809 Aug  1 20:35 package.json
drwxr-xr-x   2 muzudho muzudho   4096 Aug  1 20:35 public/
drwxr-xr-x   2 muzudho muzudho   4096 Aug  1 20:35 src/

👆　public ディレクトリに、ホームページ関連のファイルが入っているそうだ

muzudho@Takahashi-PC:~/react_practice/my-app$ cd public
muzudho@Takahashi-PC:~/react_practice/my-app/public$ ll
total 44
drwxr-xr-x 2 muzudho muzudho 4096 Aug  1 20:35 ./
drwxr-xr-x 5 muzudho muzudho 4096 Aug  1 20:35 ../
-rw-r--r-- 1 muzudho muzudho 3870 Aug  1 20:35 favicon.ico
-rw-r--r-- 1 muzudho muzudho 1721 Aug  1 20:35 index.html
-rw-r--r-- 1 muzudho muzudho 5347 Aug  1 20:35 logo192.png
-rw-r--r-- 1 muzudho muzudho 9664 Aug  1 20:35 logo512.png
-rw-r--r-- 1 muzudho muzudho  492 Aug  1 20:35 manifest.json
-rw-r--r-- 1 muzudho muzudho   67 Aug  1 20:35 robots.txt

👆　index.html ファイルの内容を VSCode で見てみる

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

👆　この HTML ファイルの変わったところといえば `%PUBLIC_URL%` のような記述が変わっている。こういう書き方を覚えていくことになるか？

muzudho@Takahashi-PC:~/react_practice/my-app$ cd src
muzudho@Takahashi-PC:~/react_practice/my-app/src$ ll
total 40
drwxr-xr-x 2 muzudho muzudho 4096 Aug  1 20:35 ./
drwxr-xr-x 5 muzudho muzudho 4096 Aug  1 20:35 ../
-rw-r--r-- 1 muzudho muzudho  564 Aug  1 20:35 App.css
-rw-r--r-- 1 muzudho muzudho  528 Aug  1 20:35 App.js
-rw-r--r-- 1 muzudho muzudho  246 Aug  1 20:35 App.test.js
-rw-r--r-- 1 muzudho muzudho  366 Aug  1 20:35 index.css
-rw-r--r-- 1 muzudho muzudho  535 Aug  1 20:35 index.js
-rw-r--r-- 1 muzudho muzudho 2632 Aug  1 20:35 logo.svg
-rw-r--r-- 1 muzudho muzudho  362 Aug  1 20:35 reportWebVitals.js
-rw-r--r-- 1 muzudho muzudho  241 Aug  1 20:35 setupTests.js
muzudho@Takahashi-PC:~/react_practice/my-app/src$

👆　src フォルダーには `.js` ファイルや、 `.css` ファイルが置いてある

`my-app/src/index.js` ファイルの内容を見てみる

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

👆　Java Script のファイルの中に XML をベタ書きできるのが React の特徴のようだ

`src/App.js` は以下の通り

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Webサーバーを起動してみよう

WSL のターミナルの方で以下を打鍵

npm start

Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://172.27.135.133:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

👆　WSL の外側のホストの Windows 11 で Web ブラウザーが立ち上がり、
アドレスは `http://localhost:3000/` で、Webページが表示されている

React のロゴ画像か何かがグルグル回ってるだけのページだ。
`Edit src/App.js and save to reload.` とうメッセージが表示されている。
`src/App.js` をいじって保存したらリロードされるらしい

`src/App.js` の以下の箇所

          Edit <code>src/App.js</code> and save to reload.

を、VSCode で以下のように編集してみる

          <code>src/App.js</code> を編集し、保存したら自動でリロード。

👆　ソースコードを VSCode で保存すると、
サーバーを再起動したり、ブラウザーの更新ボタンを押したりすることなく、画面は更新された

WSL のターミナルで `[Ctrl] + [C]` キーを押してサーバーを終了させる

React の独習

Node.JS 環境で React を動かす

Webサーバーを起動してみよう

いいなと思ったら応援しよう！