【React】如何在MacBook的vscode中配置React环境

作者:CSDN-PleaSure乐事

欢迎大家阅读我的博客 希望大家喜欢

使用环境:Vscode

安装Node.js和npm

首先我们需要完成Node和npm的配置。

官网下载

下载安装包

首先最安全稳定的方法就是从官网下载。我们首先进入node.js的官网https://nodejs.org下载长期的node.js,即带有LTS字样的版本,我选择的是20.15.1版本,下载界面如下:

下载完成后,在相应的下载路径上点开pkg文件,一直点击继续即可完成下载。

检查是否下载完成

一直"继续"之后,我们可以打开终端,输入如下命令就可以检查相应安装信息。需要注意的是在我们安装node的同时npm也已经安装完成,不需要额外安装。

复制代码
node -v
nmp -v

此时node和npm就已经安装完成。

React安装

创建相关react文件夹

首先我们需要创建一个专门用于react代码编写的文件夹,用于后续代码存储。

同时在内部创建一个内置文件夹。

在终端中完成配置

使用集成终端打开该文件夹,并于集成终端中输入以下代码:

输入代码如下,注意,需要把newapp的地方换成你所创建的文件夹的名字,不要完全cv:

复制代码
npx create-react-app newapp

回车后会出现以下提示,提示正在安装

在等待过后,若无报错,即为安装成功。

完成后,我们输入以下代码就可以开启相关react环境

复制代码
 cd newapp
 npm start

此时,在vscode中创建的文件夹下,也会出现一长串相关的配置文件夹,有相关依赖,readme等等重要文件,请一定不要删除。之后写代码可以在此处进行。

其中入口文件为index.js,作为新手我们一般在App.js当中书写代码,现在更多会使用函数返回式的进行书写。即如下形式:

javascript 复制代码
function App() {
  return (
    <div className="App">

    </div>
  );
}

需要注意,在react当中,无论是单标签还是多标签都必须要正常闭合才可以。比如上面的div就是成对出现,如果用单标签,我们也要增加一个左斜杠来闭合,如<App />。

至此,在MacBook中配置react环境也就大功告成了。

作者:CSDN-PleaSure乐事

希望我的博客对您有帮助,也希望在对您有帮助时您可以为我留下点赞收藏与关注,这对我真的很重要,谢谢!

相关推荐
HelloRevit1 分钟前
React DndKit 实现类似slack 类别、频道拖动调整位置功能
前端·javascript·react.js
无名之逆25 分钟前
[特殊字符] Hyperlane 框架:高性能、灵活、易用的 Rust 微服务解决方案
运维·服务器·开发语言·数据库·后端·微服务·rust
Vitalia39 分钟前
⭐算法OJ⭐寻找最短超串【动态规划 + 状态压缩】(C++ 实现)Find the Shortest Superstring
开发语言·c++·算法·动态规划·动态压缩
ohMyGod_12341 分钟前
用React实现一个秒杀倒计时组件
前端·javascript·react.js
eternal__day1 小时前
第三期:深入理解 Spring Web MVC [特殊字符](数据传参+ 特殊字符处理 + 编码问题解析)
java·前端·spring·java-ee·mvc
最后一个bug1 小时前
PCI与PCIe接口的通信架构是主从模式吗?
linux·开发语言·arm开发·stm32·嵌入式硬件
落落鱼20131 小时前
TP6图片操作 Image::open 调用->save()方法时候报错Type is not supported
开发语言
醋醋1 小时前
Vue2源码记录
前端·vue.js
艾克马斯奎普特1 小时前
Vue.js 3 渐进式实现之响应式系统——第四节:封装 track 和 trigger 函数
javascript·vue.js
江耳1 小时前
从10秒到无限流:我用Vercel+NextJS实现AI流式对话遇到的超时问题及解决方案
前端