React创建项目文件之自己搭建和运用脚手架搭建

1、WebStrom建立React App

方式一：

• 新建文件
• 终端运行npm init，填写package.json文件信息
• 终端运行npm install react --save，参数save是安装完成之后更新到package.json文件中
• 终端运行下面这些命令等
  npm install react react-dom --save
npm install babel babel-loader babel-core babel-preset-es2015 babel-preset-react --save
npm install babel webpack webpack-dev-server -g
• 此时的文件目录如下：

react-app
|---node_modules
|   |---一些功能模块
|---package.json

方式二：

• 安装合适的脚手架，在这里，我本人安装的是create-react-app，这是facebook官方开发的。个人认为它以便捷的安装方式，以及使用方式，甩其他脚手架几条街(●’◡’●)ﾉ
• 首先安装脚手架，只要在terminal中运行下面的命令
  sudo npm install -g create-react-app
• 创建react项目文件夹
  create-react-app demo
• 创建的文件目录简洁明了：

demo
|---node_modules
|   |---一些功能模块
|---public
|   |---favicon.ico
|   |---index.html
|---src
|   |---App.css
|   |---App.js
|   |---App.test.js
|   |---index.css
|   |---index.js
|   |---logo.svg
|---.gitignore
|---package.json
|---READ.md

• 运行项目：npm start，默认监听3000端口。
• 脚手架创建的项目文档也采用了webpack打包工具，具体可以查看/node_modules/react-scripts/config文件里面，webpack的配置都在该文件中。