ReactでWebアプリをつくりはじめる際のメモ

ReactでWebアプリケーションのベースを作る流れのメモ

業務では、AngulerJSやVue.jsを利用する機会しかなくReactは、名前をよく聞く程度だったので時間があるいまならと思いちょっと触ってみました。
JSフロント系の環境は、コロコロ変わるので正直追従できなそうですが、今回は備忘録ということであくまでも自分用に記載しておく目的。

環境

OS:Windows11 Pro
IDE:VSCode
言語:JavaScript
ライブラリなど：Node.js 18.13.0

Reactのcreate-react-appを実行する

※npmインストールされている前提

npx create-react-app my-app(ここは自分のアプリ名）

実行すると以下のように処理されて、、

Need to install the following packages:
  create-react-app@5.0.1
Ok to proceed? (y) y
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.

Creating a new React app in C:\Users\hoge\ProgramHome\jsapp\my-app.

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

・・・省略

Success! Created my-app at C:\Users\hoge\ProgramHome\jsapp\my-app
Inside that directory, you can run several commands:

・・・省略

Happy hacking!

で、my-appの下に以下のようにフォルダやファイルができます。
tree表示したら、どえらい大量にファイルやフォルダができていたので、、
実行したtop階層にできていたフォルダ、ファイルのみ以下に記載。

node_modules
package-lock.json
package.json
public
README.md
src

Buildしてみる

JSなのにbuild、、と思ってはみたものの、公式のガイドを見ると

本番環境にデプロイする準備ができたら、npm run build を実行すれば、build フォルダ内に最適化されたアプリケーションのビルドが生成されます。

記載されているので、おもむろに打ち込んでみる。。

npm run build

と以下のようなメッセージが出て、buildフォルダの下にminifyされたjsやcss、htmlなどが出力される。

> my-app@0.1.0 build
> react-scripts build

Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  46.61 kB  build\static\js\main.10782217.js
  1.79 kB   build\static\js\787.8edf8729.chunk.js
  541 B     build\static\css\main.073c9b0a.css

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

Find out more about deployment here:

  https://cra.link/deployment

build配下のファイルを本番環境にdeployすることで軽量化されたファイルを配置することができる。ということの様子。

動かしてみる

生成されたREADME.mdにnpm startでポート3000でWebサーバー起動してアクセスできるということなので、
実行してみる。

npm start

以下のような画面がブラウザで表示された。

App.jsを編集して保存してみそと記載されているので、以下のところに、チョロッと記載して保存したところ、ブラウザをリロードしなくても自動的に画面反映された。

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;

以下のスクショのようにファイルをsaveすると即時反映しれくれてるのは、実装しながらすぐに確認できて、生産性上がってよいなと。

今日はこの辺で。。

基本的に、本家のガイドに従ってやっているだけなので、あくまでも作業メモとして残しておく目的。

React ガイド　新しい React アプリを作る：https://ja.reactjs.org/docs/create-a-new-react-app.html