如何用vscode启动react项目

1.准备工作

在使用vscode启动react项目之前,需要确保本地已经安装了node.js和npm。如果你没有安装,可以通过以下命令行进行安装:

sudo apt-get update

sudo apt-get install nodejs

sudo apt-get install npm

1.1 创建react项目

在命令行中运行以下命令可以创建一个react项目:

npx create-react-app my-app

其中my-app为项目名称,你可以根据实际情况进行修改。

2.启动项目

在安装完成后,在命令行中进入项目目录,输入以下命令进行项目启动:

cd my-app

npm start

然后就可以在浏览器中进行访问了,如果没有自动打开,可以手动输入以下地址:

http://localhost:3000/

3.在vscode中启动react项目

如果你的项目已经是一个已有的项目,可以直接在vscode中打开该项目。在打开项目后,按下F5或者点击左侧的调试按钮,选择“创建启动文件launch.json”。

在弹出的配置文件中,选择“Node.js”,然后可以看到以下代码:

{

"version": "0.2.0",

"configurations": [

{

"type": "node",

"request": "launch",

"name": "Launch Program",

"program": "${workspaceFolder}/index.js"

}

]

}

将其中的program字段修改为你的启动文件,例如src/index.js。然后按下F5,即可启动React项目。

注意:在启动React项目时,需要确保启动文件中有正确的端口号,否则启动文件无法正常执行。如果没有正确的端口号,可以在package.json中添加如下代码:

"start": "set PORT=3006 && react-scripts start",

其中3006为端口号,可以根据实际情况进行修改。

4.总结

通过本文的介绍,相信大家已经掌握了如何在vscode中启动React项目的方法。需要注意的是,在启动项目时,需要确保安装了node.js和npm,并且启动文件中有正确的端口号。