使用create-react-app来创建react项目

什么是create-react-app

create-react-app是一个js库,使用它能够很方便地建立react项目,免去了建立react项目时配置webpack、调试服务器、运行脚本等麻烦,你只需要使用这个库,便可以一键完成react项目的创建

开始使用create-react-app

先在cmd下使用npm指令来全局安装create-react-app

npm install -g create-react-app

接着在你要创建项目文件夹的位置使用create-react-app来创建项目文件夹

// project-name替换成你的项目名
create-react-app project-name

等待它自动完成项目的创建和配置后进入刚刚创建的项目文件夹,现在便可以使用npm指令来查看效果了

// npm 运行调试服务器
npm start
// npm 进行构建
npm build

运行调试服务器后会给出服务器的访问地址,输入地址即可看到React的欢迎页面

自定义我们的项目

但是你看到的网页只是它给出的React欢迎页,我们需要把这些文件全部删除,运行我们自己的项目,应该删除/src,/public中的所有文件,然后自己添加文件

初学者会有一个误区,可能认为自己每写一个新的网页,就需要新建一个html文件和一个js文件,但是事实上不是这样的,实际上整个React项目构建出的网站只有一个index.html页面和一个js文件,它会根据你写的js来自动在这一个页面渲染不同的组件,这样就以一个网页承担了整个网站的工作,如果你需要用不同的url访问到不同的网页,应该使用React Router这一概念,在以后我会详细地给大家介绍React Router 4这一神器