WebStrom创建ReactJs项目

本文介绍了如何使用WebStorm创建ReactJS项目。首先,详细讲述了WebStorm的下载安装,接着是NodeJS和NPM的安装。然后,重点介绍了如何安装前端脚手架create-react-app,并使用它创建项目。最后,讲解了通过WebStorm和命令行启动ReactJS项目的方法,为开发者提供了两种不同的启动方式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.下载安装 WebStrom 

可以在官网直接下载,也可以点击提供链接直接前往https://www.jetbrains.com/webstorm/



具体破解方法核心就是一直下一步出现在需要选择地址的时候输入http://idea.codebeta.cn(填写的地址不是超链接)


2.下载NodeJS并安装

可以在网上直接百度官网下载并安装即可,主要目的是为了安装和他一起下载并安装的NPM(包管理器)

win+R 输入cmd 进入熟悉的页面后输入npm -v     后出现下图版本号证明安装成功啦



3.安装脚手架

前端脚手架:对于脚手架我的理解是一种已经创建好的空的框架,类似于spring boot 在STS中已经有可以直接使用的,当你下载配置好后创建项目的时候层级关系配置文件等不需要自己配置,默认就是已经结构完成,基础配置合理start后就可以启动的。

好了言归正传,安装过程其实超级简单,这里我们推荐使用create-react-app ,具体步骤如下:

    启动win+R 输入cmd 

    输入npm install -g create-react-app yarn       (-g是全局安装,-save是本地安装,这里使用全局安装)

打开WebStrom 如果第一打开会和下

4.使用脚手架创建第一个项目

图样式有些许区别,不过基本一样,如果不是那么就点击File创建新的project,会出现下图界面,这是选择ReactJs,由于之前都是安装好的,因此点击创建后会自动创建

5.启动项目

按下图提示打开命令行

输入yarn start 启动项目


浏览器自动启动出现下图证明部署成功了



6.其他方法:

如果不想用WebStrom,想使用简单编辑器的话,可以直接在cmd界面自己创建一个项目,方法类似只不过需要自己输入几行命令具体步骤如下:

    找一个自己喜欢的文件夹按住shift右击,选择--在此处打开命令窗口

    输入 create-react-app 创建的demo的名称 例如 create-react-app demo 回车

    

    安装完毕后点击进入可以看到目录

    

    启动项目:

        1.按住shift右击,选择--在此处打开命令窗口

               直接输入yarn start 会出现和WebStrom方式相同的页面

        2.或者也可以在当前命令行中输入

               先输入 cd demo

               在输入 yarn start 也会出现和WebStrom方式相同的页面

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值