登录 主页

配置搭建 React 应用

2023-10-15 09:29AM

1. 使用下面这个命令

你可以通过一条命令安装多个 node 包:

$ npm install -g create-react-app

如果失败说:

$ npm install -g create-react-app

/usr/share/nodejs/npm/lib/cli.js:2
module.exports = async process => {
                       ^^^^^^^
SyntaxError: Unexpected identifier
    at Module._compile (module.js:439:25)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (/usr/share/nodejs/npm/bin/npm-cli.js:2:1)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)

就先使用下面这个命令:

$ nvm install node

等它安装成功

$ nvm install node
Downloading and installing node v20.8.1...
Downloading https://nodejs.org/dist/v20.8.1/node-v20.8.1-linux-x64.tar.xz...
############################################################################################################################################################################################################ 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v20.8.1 (npm v10.1.0)

然后重新使用 $ npm install -g create-react-app 命令

$ npm install react react-dom

added 5 packages in 2s
npm notice
npm notice New minor version of npm available! 10.1.0 -> 10.2.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.2.0
npm notice Run npm install -g npm@10.2.0 to update!
npm notice
meiyi@meiyi-Extensa-2511G:~/study$ npm install -g create-react-app
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.

added 67 packages in 3s

2.  首先你需要把它安装成 node 的全局包。你就可以在命令行创建和初始化 React 应用了。

$ npm install -g create-react-app

3. 可以通过检查 create-react-app 的版本来验证是否安装成功 

$ create-react-app --version

# 5.0.1

4. 然后你就可以创建你的第一个 React 应用了,我把它命名为 study_react,当然你也可以使用其他名字。

$ create-react-app study_react

Creating a new React app in /home/meiyi/study/study_react.

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


added 1459 packages in 40s

Initialized a git repository.

Installing template dependencies using npm...

added 69 packages, and changed 1 package in 7s
Removing template package using npm...


removed 1 package in 3s

Created git commit.

Success! Created study_react at /home/meiyi/study/study_react
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd study_react
  npm start

Happy hacking!

5. 创建成功之后,进入这个文件夹:

$ cd study_react

可以看到目录:

~/study/study_react$ ls
node_modules  package.json  package-lock.json  public  README.md  src

返回>>

登录

请登录后再发表评论。

评论列表:

目前还没有人发表评论