浅谈vscode+react环境部署,运行第一个react框架

本文详细介绍了如何从零开始搭建React开发环境,包括安装VSCode、使用淘宝镜像安装Node.js和Yarn,以及通过npx创建React应用并启动项目的步骤。按照教程操作,读者可以成功运行React的第一个项目。
摘要由CSDN通过智能技术生成


前言

运行结果图:

在这里插入图片描述


一、安装vscode

见链接:https://www.cnblogs.com/csji/p/13558221.html

二、安装node、npm、yarn(采用淘宝镜像)

1.安装node

见链接:https://blog.csdn.net/bbj12345678/article/details/106741758

  • 检测是否已经安装
    键盘同时按下win+r,然后输入cmd,在黑窗口内输入:node -v
    在这里插入图片描述

会出现相应的版本号,说明已经安装好了。

2.安装yarn

见链接:https://blog.csdn.net/qq_45011985/article/details/105566648

  • 检测是否已经安装
    键盘同时按下win+r,然后输入cmd,在黑窗口内输入:yarn -v
    在这里插入图片描述

三、拉取React脚手架,运行第一个项目

  • 官网教程:
    在这里插入图片描述
  • 在vscode终端里面运行下面的语句:
npx create-react-app my-app
cd my-app
npm start

等待加载完毕,我们再输入 yarn run start 运行即可。


总结

待更新。

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是在 VSCode 中配置 React 环境的步骤: 1. 确认已安装 Node.js 和 npm。可以在终端输入以下命令进行确认: ``` node -v npm -v ``` 如果没有安装,可以去 Node.js 官网下载并安装。 2. 创建一个新的 React 应用程序。在终端中运行以下命令: ``` npx create-react-app my-app ``` 这将创建一个名为 `my-app` 的新 React 应用程序。 3. 打开 VSCode 并打开 `my-app` 文件夹。 4. 安装 VSCode 插件: - 安装 `ESLint` 插件:用于代码风格检查。 - 安装 `Prettier` 插件:用于代码格式化。 5. 在 VSCode 中打开终端(快捷键为 `Ctrl + Shift + `)并运行以下命令: ``` npm install ``` 这将安装所有必要的依赖项。 6. 在 VSCode 中打开 `package.json` 文件,并添加以下代码: ```json "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, ``` 7. 在 VSCode 中打开 `src/index.js` 文件,并添加以下代码: ```javascript import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(<App />, document.getElementById('root')); ``` 8. 在 VSCode 中打开 `src/App.js` 文件,并修改为以下代码: ```javascript import React from 'react'; function App() { return ( <div className="App"> <h1>Hello, World!</h1> </div> ); } export default App; ``` 9. 在 VSCode 中打开终端并运行以下命令: ``` npm start ``` 这将启动 React 应用程序并在浏览器中打开它。 至此,你已经成功配置了 React 环境并创建了一个简单的 React 应用程序。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值