# create-react-app

**Repository Path**: zhangguangde/create-react-app

## Basic Information

- **Project Name**: create-react-app
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-02-20
- **Last Updated**: 2021-06-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


// 本地启动项目(3000)&启动mock服务(3001)
npm start
// 编译
npm run build
// 启动build文件夹中index.html(8084)
npm run server
// 打包并启动 使用8084端口（修改在server.js中
// 注意：运行的同时确保 npm start 已经启动 
npm run local(8084)
// 启动mock数据 （使用3001端口，修改在gulpfile.js中，并修改package.js中proxy）
npm run mock
// 测试
npm run test
// 暴露设置文件，慎重执行
npm run eject

// 安装插件
$ cnpm install


## git工作流程
1. 基于dev分支创建功能分支（用于开发某功能，编辑、暂存、提交）
    1. git checkout -b {dev/bug}-{tapdid}-{功能描述}-{创建人标识} dev
    2. git status
    3. git add
    4. git commit
2. 完成功能开发（这个分支决不应该直接合并到master分支）
    1. git pull origin dev
    2. git checkout dev
    3. git merge {dev/bug}-{tapdid}-{功能描述}-{创建人标识} (code view)
    4. git push
    5. git branch -d {dev/bug}-{tapdid}-{功能描述}-{创建人标识}
3. 创建准备发布分支（用于准备发布、测试、bug fix，只要创建这个分支并push到远程仓库，dev分支中有新功能都放到下个准备发布分支，例如：release-0.2）
    1. git checkout -b release-{日期} dev
    2. git merge {dev/bug}-{tapdid}-{功能描述}-{创建人标识}
    3: git push origin release-{日期}
4. 完成发布（master就是对外发布的分支。这里可以发起一个pull request来做code view, 还可以利用git hook在push到master时自动构建好对外发布）
    1. git checkout dev
    2. git merge release-{日期}
    3. git push
    4. git checkout master
    5. git merge release-{日期}
    6. git push
    7. git branch -d release-0.1



###文件用途说明
server.js // 本地服务
gulpfile.js // cgimock服务
/src/common // 共通方法类（操作类，ajax，cookie等，无关业务）
/src/utils // 工具类（业务相关）
Client.js // 所有路由包裹渠道，便于逻辑以及操作、跳转统一处理
config/api // 配置所有api接口
common/ajax.js // 封装ajax方法 基于fatch
config-overrides.js // 配置蚂蚁样式


// 转发配置
  package.js
  "proxy": "http://www.xxx.info"

// 打包前缀替换
  package.js
  homepage

// 开发使用端口配置
  node_modules\react-scripts\scripts\start.js
  // Tools like Cloud9 rely on this.
  const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3001;

// 配置启动项（启动文件）
  manifest.json


生命周期的方法有：
componentWillMount 在渲染前调用,在客户端也在服务端。
componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。 
可以在你确认不需要更新组件时使用。
componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
componentWillUnmount在组件从 DOM 中移除之前立刻被调用。

官方脚手架
https://reactjs.org/tutorial/tutorial.html
npx create-react-app my-app
cd my-app
npm start

// 安装 node环境
http://nodejs.cn/download/

// react-router-dom v4
https://www.cnblogs.com/dudeyouth/p/6617059.html

// 更换淘安装npm package
https://npm.taobao.org/
$ npm install -g cnpm --registry=https://registry.npm.taobao.org

create-react-app开发常用配置
https://www.jianshu.com/p/e09b2c57cf20

// Ant Design
https://ant.design/index-cn
// Ant Design 在 create-react-app 中使用
https://ant.design/docs/react/use-with-create-react-app-cn

// connect-cgi-mock HTTP接口模拟器
https://www.npmjs.com/package/connect-cgi-mock

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

## Available Scripts

In the project directory, you can run:

### `npm start`

Runs the app in the development mode.<br>
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits.<br>
You will also see any lint errors in the console.

### `npm test`

Launches the test runner in the interactive watch mode.<br>
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.

### `npm run build`

Builds the app for production to the `build` folder.<br>
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.<br>
Your app is ready to be deployed!

See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.

### `npm run eject`

**Note: this is a one-way operation. Once you `eject`, you can’t go back!**

If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

## Learn More

You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).

To learn React, check out the [React documentation](https://reactjs.org/).

### Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

### Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

### Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

### Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

### Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

### `npm run build` fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify