Note: I will write the blog in both Chinese Mandarin and English. The Chinese version would be my own words, while I may use ChatGPT to translate them into English.
哈喽。我打算从今天开始有计划地学习React框架。其原因是早在暑假刚开始时就打算学习React来着，结果因为这件事情的优先级比较低，就总是拖拖拉拉没有完成。好，不说废话了，我们开始。。。
首先介绍一下环境：我在网上租了一个云主机（京东云主机50块钱一年，香得很），并将自己的域名挂到了这个主机上。没有云主机或者域名没关系，这并不影响配置和使用。
安装Node.js和NPM
nodejs在这里获取下载链接：https://nodejs.org/en/download/package-manager/current
有的人可能习惯使用apt安装，但是nodejs不支持……没关系，这时候选使用nvm安装就行了，总而言之就是运行以下命令。运行完第一行之后记得重启一下终端。
# installs nvm (Node Version Manager)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash # download and install Node.js (you may need to restart the terminal)
nvm install 22
运行完成后输入以下代码检查是否安装成功……
# verifies the right Node.js version is in the environment
node -v # should print `v22.4.1` # verifies the right NPM version is in the environment
npm -v # should print `10.8.1`
初始化react框架
在终端输入以下代码新建项目
npx create-react-app 项目名称
npx是啥？全称是”Node Package Execute”，可以简化执行npm包中的可执行文件。
接下来cd到项目文件夹下，然后npm start就可以启动了。启动之后命令行里会显示主机的ip地址——有可能是192.168.xx.xx，也有可能是别的。这个时候随便一个与服务器连接到同一网络下的设备打开浏览器，输入网址http://192.168.xx.xx:3000就能看到界面了。
Hello. I plan to start learning the React framework systematically from today. The reason is that I had intended to learn React since the beginning of the summer vacation, but it was always delayed due to its low priority. Alright, let’s get started without further ado…
First, let me introduce the environment: I rented a cloud server online (JD Cloud server, ~$7 USD per year, which is a great deal), and I have linked my domain name to this host. It’s okay if you don’t have a cloud server or a domain name, as this does not affect the configuration and use.
Installing Node.js and NPM
You can get the download link for nodejs here: https://nodejs.org/en/download/package-manager/current
Some might prefer using apt to install, but nodejs does not support it… No worries, at this point you should choose to install using nvm, simply run the following commands. Remember to restart the terminal after running the first line.
# installs nvm (Node Version Manager)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash # download and install Node.js (you may need to restart the terminal)
nvm install 22
After running, enter the following code to check if the installation was successful…
# verifies the right Node.js version is in the environment
node -v # should print `v22.4.1` # verifies the right NPM version is in the environment
npm -v # should print `10.8.1`
Initializing the React framework
Enter the following code in the terminal to create a new project
npx create-react-app project-name
What is npx? It stands for “Node Package Execute,” which simplifies the execution of executable files in npm packages.
Next, cd into the project folder, then npm start to launch it. After launching, the command line will display the host’s IP address—it might be 192.168.xx.xx or something else. At this point, any device connected to the same network as the server can open a browser and enter the URL http://192.168.xx.xx:3000 to see the interface.
Discover more from Coursity
Subscribe to get the latest posts sent to your email.