WebStrom创建ReactJs项目

1.下载安装 WebStrom 

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

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

2.下载NodeJS并安装

可以在网上直接百度官网下载并安装即可&＃xff0c;主要目的是为了安装和他一起下载并安装的NPM&＃xff08;包管理器&＃xff09;

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

3.安装脚手架

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

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

    启动win&＃43;R 输入cmd 

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

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

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

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

5.启动项目

按下图提示打开命令行

输入yarn start 启动项目

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

6.其他方法&＃xff1a;

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

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

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

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

    启动项目&＃xff1a;

        1.按住shift右击&＃xff0c;选择--在此处打开命令窗口

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

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

               先输入 cd demo

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