
2.3 编写第一个React应用
WebStorm准备就绪后,就可以搭建一个简单的React App了。打开WebStorm,选择Create New Project(创建一个项目),就会看到图2-5所示的界面,选择React App选项。


图2-5 创建一个React App工程
其中:
·Location:指定项目路径及项目名称。
·Node interpreter:指定Node路径及显示Node版本。
·create-react-app:指定create-react-app的安装路径及显示版本号。
·Scripts version:指定脚本的版本号。
提示
如果是第一次使用create-react-app,需要用npm去安装该脚手架,命令如下:

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

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

图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所示。

图2-7 第一个React App运行效果
create-react-app创建项目的默认路径是C:\Users\机器名\WebstormProjects,默认文件目录如下:

其中:
·node_modules:该目录里放的是项目需要的各种依赖模块。
·README.md:该文件会写一些关于项目说明的内容。
·package-lock.json:该文件用来记录当前状态下实际安装的各个包的来源以及版本号。
·package.json:该文件用来定义依赖关系树,以及各个依赖模块的版本范围。
·public:该目录的文件被index.html引用。
·src:该目录存放源码以及引用的一些.css、.js文件,只有该目录下的文件才会被webpack识别。
提示
初学者不用害怕这么多文件,本书前几章的示例都会采用直接引入React的方法来学习React基础,只需要一个HTML文件就能搞定。