Web应用程序没有经验的人尝试着使用React
听到妻子说“如果有这样的应用就好了”，我心血来潮地想试着做一个，但作为只懂C语言的人来说，对于”Web应用是用CSS和JavaScript做的吧？”这就是我所了解的知识了。
然而，我不想放弃，所以我做了一些搜索，结果发现了很多之前听过的词汇，比如React和Vue.js，这让我更加烦恼。但是，不知为何我有一种感觉，决定使用React。
如果谈到React的话，网络上有很多信息可以查阅，对于Web应用开发者来说应该会很容易上手，但对于没有经验的人来说可能会遇到一些困难。因此，我打算记录下这个现实，附带备忘录。
现在的理解
对于React的认识大致如此。
-
- WebのUI用JavaScriptライブラリ群
-
- これを使えばWeb画面であれやこれやできる
- Facebookが開発しているOSSで、今は商用に使っても大丈夫
此外我知道，要用React进行Web应用开发，需要以下的两个包。
npm ・・・ 「Node.js」に関連するパッケージを独自で管理するアプリケーションのこと
Node.js ・・・クライアントだけでなくサーバ側でも動作するJavascript実行環境で、Reactでの生産物をサーバ側で動作させるための土台
因此，我們從準備npm和node.js開始。
准备开发环境
开发环境是以下规格的旧笔记本。
-
- PC：FMV-BIBLO MG70W(2007年製)
CPU：Core2Duo T7100＠1.80GHz
Mem：4GB
SSD：50GBぐらい
OS：Linux Mint 20 Cinnamon
安装
使用apt来安装“npm”。
$ sudo apt install npm
:
$ npm -v
6.14.4
$ sudo apt install nodejs
パッケージリストを読み込んでいます... 完了
依存関係ツリーを作成しています
状態情報を読み取っています... 完了
nodejs はすでに最新バージョン (10.19.0~dfsg-3ubuntu1) です。
nodejs は手動でインストールしたと設定されました。
アップグレード: 0 個、新規インストール: 0 個、削除: 0 個、保留: 0 個。
$ nodejs -v
v10.19.0
“Node.js”已经自动安装了，因为它和npm及其依赖关系有关。
升级版本
在撰写时点（2020年11月19日），版本如下所示。
尽管npm还可以接受，但Node.js的版本相差太远了。
Node.js 是一个开源的、跨平台的 JavaScript运行环境。
先升级Node.js。
(1) 在npm上安装Node.js的包管理应用程序“n”。
$ sudo npm cache clean
$ sudo npm install -g n
使用n来引入稳定版本
$ sudo n stable
:
installed : v14.15.1 (with npm 6.14.8)
$
(3) 确认版本
$ nodejs -v
v10.19.0
$ node -v
v14.15.1
嗯？这是什么意思？
$ which node
/usr/local/bin/node
$ ls -l /usr/local/bin/node*
-rwxr-xr-x 1 root root 73828464 11月 19 13:19 /usr/local/bin/node
$ which nodejs
/usr/bin/nodejs
$ ls -l /usr/bin/node*
-rwxr-xr-x 1 root root 14416 3月 31 2020 /usr/bin/node
lrwxrwxrwx 1 root root 40 3月 7 2020 /usr/bin/node-gyp -> ../share/nodejs/node-gyp/bin/node-gyp.js
lrwxrwxrwx 1 root root 4 3月 31 2020 /usr/bin/nodejs -> node
$ env | grep PATH
PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin
由于/usr/local/bin目录中没有nodejs，所以我知道它会在/usr/bin目录下运行，但文件大小完全不同，这是怎么回事？
使用apt命令卸载已安装的nodejs和npm。根据我的调查，通过apt安装的”nodejs”和”npm”仅仅是为了安装上述新版本，现在它们已经不再需要了。因此，使用apt命令将其删除。
$ sudo apt purge -y nodejs npm
：
(ガッツリ削除されるが気にしない)
：
$
(5) 再一次确认版本
$ npm -v
6.14.8
$ node -v
v14.15.1
$ nodejs -v
bash: /usr/bin/nodejs: そのようなファイルやディレクトリはありません
$
这个 nodejs 是不是一种旧的命令符号呢？先做一下替换，然后保持现状。
npm是一个流行的软件包管理工具。
因为升级到Node.js 14.15.1时，其中包含了npm6.14.8，导致我不知情地升级完成了。
$ npm -v
6.14.8
# 個別にバージョンアップする場合は「sudo npm install -g npm」を実行する
你好，世界！
现在开发环境已经完成，我尝试了一下经典的”Hello World”程序。
然而，当谈到编程时，我只知道用vi打开.c文件并进行make操作，甚至几乎没有接触过Eclipse，所以对于现代的开发方法和工具每次都感到惊讶。
使用「Create-React-App」创建模板
以前是用vi一个文件一个地仔细编写…但是据说React提供了用于应用开发所需的模板，作为一个没有经验的人，不使用它是不可能的。
$ npx create-react-app helloworld
：
(ズラズラズラズラと結構時間がかかった)
：
Happy hacking!
$ ls -l
合計 4
drwxrwxr-x 5 xxx xxx 4096 11月 19 14:50 helloworld
$
(2) 确认动作
根据这个模板，只需在浏览器中执行以下步骤即可确认。在浏览器中访问“localhost:3000”，将显示React界面。
$ cd helloworld
$ npm start
：
(しばらく時間がかかった)
：
Compiled successfully!
You can now view helloworld in the browser.
Local: http://localhost:3000
On Your Network: http://xxx.xxx.xxx.xxx:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
(3) 实现「Hello World」
在浏览器中，有一个指示写着「Edit src/App.js and save to reload」，所以按照这个指示进行操作，编辑App.js文件（补充「Hello World」）→保存→刷新浏览器（不需要重新执行npm命令）。
$ cd src
$ vi App.js
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
+ <p>
+ Hello World!!
+ </p>
<img src={logo} className="App-logo" alt="logo" />
：
(省略)
：
</header>
</div>
);
}
export default App;
$
感慨万千
-
- 本当にひとまずWebアプリを作れる環境は出来上がったが、大抵「Hello World」で終わることが多いので、ここから続けられるのかが一番の課題。
-
- 作りたいもののイメージはあって、ロジックだけPythonで試作してみていけそうな感じはしているのだが、Webアプリのお作法が全くわかっていないので、Reactを利用しながら進められるのか不安。
- 次はどこに進めばいいのだろうか？
