在code中安装react的方法:首先安装好vscode;然后使用npm安装“create-react-app”;接着通过“create-react-app my-app”命令创建一个React项目;最后运行npm start进行检测即可。
推荐:《js视频教程》
visual studio code + react 开发环境搭建
开发环境 windows
开发工具 visual studio code
windows 安装node 可以直接在 node官网 直接下载直接当作普通软件安装即可。
安装完成可以在控制台中运行node测试是否安装成功 win + r 输入 cmd
,直接在终端输入node -v
输出版本号及已经成功安装。
目前新版本的node自带npm(npm 是随同 node 一起安装的包管理工具)。这里安装好了 node并且测试安装成功之后,可以继续在控制台输入 npm -v
检查是不是安装成功。同样成功会输出版本号。
vs code 正常软件安装 没有需要注意的,直接下载安装(https://code.visualstudio.com/)
参照文档 React JavaScript Tutorial in VS Code (https://code.visualstudio.com/docs/nodejs/reactjs-tutorial)文档已经很详细 按照文档来一遍就基本上没问题。
npm install -g create-react-app
使用npm安装 create-react-appcreate-react-app my-app
来创建一个项目 my-app
是创建出来的 React 项目,等待一段时间(这里需要下载一些依赖包),即可看到创建完成的整个文件结构npm start
检测当前项目是否创建成功 正常情况下当输入命令之后 会直接打开默认浏览器预览 http://localhost:3000/ 此时会看到一个react的页面所有文件都可以直接使用VS Code直接修改。
launch.json
,我这里已经存在一个launch.json
文件则直接在里面添加配置即可,这里有一个添加配置的按钮可以直接添加配置节点 ,注意这里有两个chrome相关节点一个Launch 一个 Attach创建完两个节点 之后 找到 "request": "launch"
的一个节点里面有一个url将这个url设置为之前 React 项目启动的url,即 http://localhost:3000/
另一个配置节点默认即可如有问题再做修改,修改后的全部配置如下:
{ // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "attach", "name": "Attach to Chrome", "port": 9222, "webRoot": "${workspaceFolder}" }, { "type": "chrome", "request": "launch", "name": "chrome", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}" }, { "type": "node", "request": "launch", "name": "node", "program": "${workspaceFolder}\\start" } ]}
启动项目npm start
然后打开debug工具栏
选择之前添加的 chrome 节点启动 ,此时会打开一个新的chrome页面
Suchen Sie die Datei index.js
im Quellcode des Projekts, setzen Sie einen Haltepunkt, klicken Sie mit der linken Maustaste vor die Zeilennummer und aktualisieren Sie dann die Seite. Sie können den Endpunkt eingebenindex.js
文件打上断点在行号前面点左键即可 之后刷新页面,则可进入端点
至此已经可以简单进行调试了。
eslint 是一个可组装的JavaScript和JSX检查工具。可用于检查语法错误规范代码。
npm install -g eslint
安装 eslintCtrl+Shift+P
输入ESLint 找到创建.eslintrc.json
npm install -g eslint
in die Konsole ein, um eslint zu installieren🎜🎜Installieren Sie das Eslint-Plug-in über VS Code🎜🎜🎜Öffnen Sie das Befehlsfeld von VS Code und suchen Sie es direkt in der Ansicht oder geben Sie Strg+Umschalt ein +P
ESLint findet die Option zum Erstellen der Datei .eslintrc.json
. Einige Syntaxfehler in Ihrem Projekt werden automatisch erkannt 🎜🎜🎜🎜Referenzdokumentation Es gibt auch Regeln zum Konfigurieren von Semikolons, die bei Bedarf hinzugefügt werden können. 🎜🎜🎜Das obige ist der detaillierte Inhalt vonSo installieren Sie React im Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!