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方式相同的页面

### 如何在Mac操作系统上创建和配置React项目 #### 创建React项目 为了快速启动一个新的 React 项目,推荐使用 `create-react-app` 工具来初始化项目。通过终端输入如下命令可实现项目的建立: ```bash npx create-react-app my-project-name ``` 上述指令完成后,会自动生成名为 `[project-name]` 的新文件夹,并构建出标准的项目结构[^2]。 #### 配置开发环境 对于 macOS 用户而言,在开始之前需确认已安装必要的软件包管理器 Homebrew 和 Node.js 版本不低于4.0[^1]。这可以通过以下方式验证并更新至最新版: - 更新 Homebrew 到最新的稳定版本; - 使用 Homebrew 来获取或升级 Node.js 至所需版本; #### 升级Ruby环境以兼容CocoaPods 鉴于 CocoaPods 对 Ruby 环境的要求较高,默认情况下 Mac 自带的 Ruby 可能无法满足需求。因此建议按照官方指引提升 Ruby 版本,具体操作是在终端内键入下列语句完成安装过程: ```bash brew install ruby ``` 此步骤有助于解决因 Ruby 不匹配而引发的各种问题,从而顺利集成 iOS 平台所需的依赖项[^3]。 #### 初始化Git仓库并与本地同步 一旦完成了基础设置之后,则应该考虑将源码纳入版本控制系统 Git 中加以保护。进入目标项目路径后依次执行这些命令: ```bash cd my-project-name git init git add . git commit -m "Initial commit" ``` 以上动作能够帮助记录每一次更改历史,便于后续追踪修改轨迹以及协作开发工作。值得注意的是,如果遇到 WebStorm 终端里某些命令不起作用的情况,尝试切换到系统的默认 Shell 或者 iTerm2 进行相同的操作往往可以获得更好的效果[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值