创建react项目——初识create-react-app

开始学习react了，首先简单记录下react项目的创建

• 首先时create-react-app的安装 npm install create-react-app
• 然后使用创建项目的命令 create-react-app 项目名称
• 进入到项目对应目录后，使用npm start启动并在浏览器运行该项目

然后记录下创建的项目的目录文件

目录结构.png

记录常用命令与含义

• npm start 开发环境下，基于webpack编译处理，最后可以预览当前开发结果（基于webpack-dev-server插件，创建一个web服务，端口号默认3000）会默认自动打开网页展示页面，更新代码会自动重新编译，并刷新浏览器重新渲染。

• npm run build 将项目整体打包，执行后会在项目文件中生产一个build的文件夹，这个文件包含了编译后的内容。
  

  编译后新的build文件夹

• npm run eject 将webpack的配置文件暴露出来。

关于npm run eject
create-react-app脚手架为了让目录结构更加清晰明了，把安装的webpack及配置文件都集成在了react-scripts模块里，放到了node_modules中，但是真实项目里经常需要我们自己额外安装或配置一些模块，这些模块需要修改webpack的配置项时，就需要使用npm run eject将node_modules中的配置文件暴露出来。

注意，如果项目是git管理，在执行npm run eject时要先将代码提交到历史区，不然会报错。

执行完npm run eject会会产生两个新文件夹

eject出来的新的文件夹