##
学习了几个星期的React,想稍微整合一下知识,所以写了这篇博文,以搭建一个基础的react的项目为线索整合学到的知识,具体很多的细节不深究。以及由于还是小白一个,可能我所提供的步骤不是最好的解决方案,甚至繁琐,但一步步操作是能够建立一个简单react项目的。对于初窥React比我还小白的小白还是有帮助的~
vscode编辑器:好东西!首先是不要钱,其次真的是好东西。https://code.visualstudio.com/download 下载,该编辑器是微软家族的一员。之前想使用webstorm开发,但是要钱又找不到破解版所以就作罢。vscode提供了大量插件供开发使用,本身vscode是非常干净,没有什么特别的功能,但是丰富的插件提供了各种各样的功能,会用后可以慢慢研究。vscode安装好后打开会有一个配置界面,我什么都没配置,说明不配置就可以直接用了,大家放心~
接下来就是要建立react了。React项目要配置的东西很多,作为小白我会写几行React破代码但还不会配置,但要自己一个个去写配置文件对于我这个小白来说是极不合理的。这里推荐使用create-react-app插件进行开发,这是facebook官方的脚手架工具,会帮你建立一个react项目,安装所需的包,并帮你写好配置文件。
安装命令cnpm install -g create-react-app。
cnpm的安装插件使用很简单,cnpm install -g [插件名] 就可以安装该插件到本地了。-g是全局的意思,没有的话就只安装到该目录(或该项目)下。
create-react-app 安装好之后我们(create-react-app插件)就要搭建一个简单的react项目了,在项目打算安放的路径下打开命令控制台。
执行create-react-app xiaobai-app,一个名为xiaobai-app的React项目就建立好了(我建立的时候时间要好一会,具体为什么还没细究,可能是由于项目所需的包是默认通过npm从国外下载的缘故)。
之后就可以用vscode的打开该项目进行编辑了。我们使用create-react-app的原因对我来说就是因为vscode没有帮你建立一个react项目的功能(插件里有没有就不知道了),但是webstorm里面是有提供创建react项目的功能,这也说明vscode工具是多么干净。。。
项目创建好后,打开vscodem,选择xiaobai-app目录打开。
一个简单的项目结构如上图,package.json是一个最重要的配置文件。里面配置了项目依赖的包,最新开始加载的入口文件等信息。
接下来我们就可以运行这个React项目了。Ctrl+` 打开终端,
cnpm install
cnpm start
该项目就运行起来了。
搭建结束,接下来就是编写自己的React项目了。