初学react(1)——create-react-app创建项目

从事了一年多的前端开发工作，之前都是使用vue2.0作为主要的开发框架，最近打算学习一下当下比较火的react框架。有使用vue2.0的经验，所以在学习过程中，很自然地和vue2.0进行比较学习，react有与vue-cli类似的项目脚手架，我选择的是facebook官方推出的create-react-app，以下分享我的学习过程。

第一步，安装create-react-app。

安装上nodejs后，可以通过命令行工具输入：

npm i create-react-app -g

全局安装完毕之后，创建第一个项目

create-react-app my-app

我创建的项目叫“my-app”，下载项目模板需要等待一会儿，下载完毕后，将得到如下的文件：

其中文件的作用大概是:

node_modules 依赖包的目录，包含了打包的方法和配置

public 是放置index.html和一些资源文件

src 是开发者开发时编辑出来的代码，

package.json 是npm项目的配置文件

进入到public的index.html文件

body标签里有id为root的div元素，这个是用来整个react项目的dom。

在src的index.js，文件有

这句话就是将整个react项目放在这个dom元素里渲染。

这里使用了自定义的"App"组件，进入App.js文件

里面用class的方式创建了App组件，与localhost:3000看到的内容一致，修改这里的内容就可以修改localhost:3000页面上面的内容(要看到localhost:3000页面，首先要到项目目录下，命令行输入：npm start)。

整个项目没有打包相关的配置，其用意是想开发者只关注页面的开发，项目文件结构简单。要是不想监听3000端口，可以到node_modules/react-scripts/scripts/start.js文件修改以下的地方：

项目已经搭建起来了，下面将进行进一步的学习。