通过React尝试实现了HelloWorld程序

2 年 ago

韵, 科

2 minutes

简要

我尝试实现了一个用React来显示HelloWorld的程序。
参考了以下页面：
https://www.techpit.jp/courses/48/curriculums/51/sections/426/parts/1454
https://www.suzu6.net/posts/128-ubuntu-yarn-error/

环境配置

sudo apt install yarn

那就是 (nà jiù shì)

$ yarn add react react-dom
00h00m00s 0/0: : ERROR: [Errno 2] No such file or directory: 'add'

由于出现了该错误，无法安装React，因此我使用以下命令重新安装了Yarn。

$ sudo apt remove cmdtest
$ sudo apt remove yarn
$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
$ sudo apt update
$ sudo apt install yarn

到目前为止，yarn已经可以运行了。虽然出现了警告，但由于本次目的是暂时运行，所以忽略了这些警告。
通过以下命令安装了react和react-dom。

$ yarn add react react-dom

我也安装了一个叫做Parcel的工具。

$ yarn global add parcel-bundler

源代码

JSON的内容如下所示。

{
    "name": "react-music-app",
    "version": "1.0.0",
    "main": "index.js",
    "license": "MIT",
    "scripts": {
	"dev": "parcel src/index.html -d dist",
	"build": "parcel build src/index.html -d dist"
    },
    "dependencies": {
	"parcel": "^1.12.3",
	"react": "^18.2.0",
	"react-dom": "^18.2.0"
    }
}

HTML的内容如下：

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>music app</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./index.js"></script>
  </body>
</html>

JavaScript代码如下：

import React from "react";
import { hydrate } from "react-dom";
import App from "./components/App";

hydrate(<App />, document.getElementById("app"));

执行

我执行了以下命令。

$ yarn dev
yarn run v1.22.19
$ parcel src/index.html -d dist
Server running at http://localhost:1234 
✨  Built in 3.79s.

如果能对某种事情有所帮助的话。