2.3　编写第一个React应用

WebStorm准备就绪后，就可以搭建一个简单的React App了。打开WebStorm，选择Create New Project（创建一个项目），就会看到图2-5所示的界面，选择React App选项。

其中：

·Location：指定项目路径及项目名称。

·Node interpreter：指定Node路径及显示Node版本。

·create-react-app：指定create-react-app的安装路径及显示版本号。

·Scripts version：指定脚本的版本号。

单击Create按钮创建项目，这个过程需要1分钟左右，这段时间里，create-react-app会帮助开发者创建必要的配置文件以及下载React项目所需要的各种依赖模块。这个过程的日志会在WebStorm中的Run栏中显示，内容如下：

接下来，进入WebStorm的Terminal模式（在主界面下方单击Terminal选项），执行npm start命令，项目进行构建后运行，终端提示如图2-6所示的信息。

在终端提示中，项目在浏览器的地址为http://localhost:3000／或者为http://192.168.0.104:3000／(192.168.0.104是笔者电脑的IPv4地址，在真正搭建项目时，该IP改为读者的本地IP)。create-react-app在构建项目时，端口号默认设置为3000。如果开发者想修改端口号，可以在node_modules/react-scripts/scripts/start.js文件中修改，该文件配置了项目启动的IP以及端口号，代码如下：

至此，React的第一个项目已经可以访问，打开浏览器，输入地址“http://localhost:3000/”或者“http://192.168.0.104:3000/”即可访问运行效果，如图2-7所示。

create-react-app创建项目的默认路径是C:\Users\机器名\WebstormProjects，默认文件目录如下：

其中：

·node_modules：该目录里放的是项目需要的各种依赖模块。

·README.md：该文件会写一些关于项目说明的内容。

·package-lock.json：该文件用来记录当前状态下实际安装的各个包的来源以及版本号。

·package.json：该文件用来定义依赖关系树，以及各个依赖模块的版本范围。

·public：该目录的文件被index.html引用。

·src：该目录存放源码以及引用的一些.css、.js文件，只有该目录下的文件才会被webpack识别。