Vite + React で、クライアントサイド( ブラウザー ) での開発を試してみた。
今回は、ブラウザー上で動作する Javascript の開発を試す。
サーバーサイドの開発か、クライアントサイドの開発か、あまり明言せずに書いているページが多いので、こんがががったぞね。
React の開発をするには、 Vite を使うのが良いらしい。
参考にさせてもらったのは、下記のぺーじです。ありがとう!!
【図解解説】0からReact開発して基礎をマスターできる最強チュートリアル 映画アプリ編【初心者完全版】
しかし、この環境はすごい。
Vscode で、src/App.tsx を変更すると、
即座に、ブラウザーに反映される。
注意しないと行けないのは、ここで作った、ファイルは、最終的には、 build して、
サーバー上にアップロードしないと使えないみたいじゃ。
google ai さんに教えてもらった。
1. React を勉強してみる。
下記が、React の本家ページみたい。
react.dev
Quick Start を見てみる。
Creating and nesting components
React apps are made out of components. A component is a piece of the UI (user interface) that has its own logic and appearance. A component can be as small as a button, or as large as an entire page.
React components are JavaScript functions that return markup:
そうか、コンポーネントは、Javascript の function で、html tag を返す。
か、Typescript であれば、ここが入れ替わるのか。
JSX について、書かれている。
html を jsx に変換する Web ツールがあるみたい。
html-to-jsx
少し、かいつまんでみる。
JSX lets you put markup into JavaScript.
JSX は、JavaScript の中に、 html tag を書けるようにする。
次に、
Tutorial: Tic-Tac-Toe
Setup for the tutorial のところに、 Live Editor( CodeSandbox ) の紹介がある。
画面上の、各ソースの、右上の、Fork をクリックすると入れるみたい。
ブラウザー上で、VScode( CodeSandbox ) を開いて、ソースを作って確認できるみたい。
Note のところに、ローカルでの始め方の記述がある。
You can also follow this tutorial using your local development environment. To do this, you need to:
Install Node.js
In the CodeSandbox tab you opened earlier, press the top-left corner button to open the menu, and then choose Download Sandbox in that menu to download an archive of the files locally
Unzip the archive, then open a terminal and cd to the directory you unzipped
Install the dependencies with npm install
Run npm start to start a local server and follow the prompts to view the code running in a browser
If you get stuck, don't let this stop you! Follow along online instead and try a local setup again later.
そうか、
試してみる。
~/www/react/ ディレクトリーで、ダウンロードした、 xxx.zip を展開する。
ディレクトリーの名前を、 tic_tac_toe に変更して、
$ cd tic_tac_toe
$ npm install
ここで、9 vulnerabilities (3 moderate, 6 high) の、エラーが出るが、決して、
$ npm audit fix --force を行わない事。
そのまま、実行する。
$ npm start
これで、うまく行った。
後は、VScode で、App.js を作っていけばできる。
$ cdoe .
$ npm start
を実行して、App.js の結果が、ブラウザーに表示されている状態で、
VScode で、 App.js に修正を加えて、Ctl+s で保存した場合。
ブラウザーを、リロードすれば、再コンパイルされて、最新が表示されるみたい。
これなら、Vite も必要なか。ただし、Vite だと、リロードしなくても反映されるが。
Overview の箇所を、一つずつ、試すのも良いかも。
今日は、おんちゃんは、Lifting state up のところまで、試した。
少し、休憩して、残りを試す。
2. Typescript 言語 の学習。
そもそも、Typescript 言語自体を、先ず勉強せねばならん。
サバイバルTypeScript が良いみたい。