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,并且启动文件中有正确的端口号。