@25sprout/react-starter/template-simple/README.md

25sprout web starter with React

{{name}}
=====

[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)](http://commitizen.github.io/cz-cli/) [![Standard Version](https://img.shields.io/badge/release-standard%20version-brightgreen.svg?style=flat-square)](https://github.com/conventional-changelog/standard-version)

*新芽網路前端開發架構*

## 簡介

經由 `react-starter` 快速產生的專案，內建 `react` 開發用環境，此樣板是為了 component demo 或是製作 react library 使用。

## 資源介紹

使用 `webpack` 做建置工具，搭配 `eslint`、`react-storybook` 與 `jest` 開發，支援 `ES6`、`stage-3` 語法。

## 如何開始

- 安裝 nodejs v6 以上的版本
- 安裝套件: `npm i` or `yarn`

#### 踏出第一步

啟動開發 server

```
npm start
```

便可在 <http://localhost:3000> 看到本地伺服器～

啟動 storybook server

```
npm run storybook
```

便可在 <http://localhost:8000> 看到 storybook 開發伺服器～

#### npm script

- **npm start**: 啟動 storybook 開發伺服器
- **npm run dev**: 啟動開發 server
- **npm run demo**: 使用 `demo` 參數打包專案，部署在測試機。
- **npm run build**: 使用 `production` 參數打包專案，部署在正式機。
- **npm run lint**: 跑 eslint 跟 stylelint 檢查 coding style
- **npm run storybook**: 跑 storybook
- **npm test**: 跑 jest 測試

## 專案架構

以下是這個專案的各資料夾定義
- src
	+ **components**: 開發 component 的資料夾
	+ images
- **config**: 設定環境變數和調色盤
- **storybook**: 存放 storybook 的設定檔

> 0.8.0 之後 component 的 stories 和 test case 移至各自的 component 資料夾裡面

## 參數設定

#### 環境變數

以下是 `npm run dev`, `npm run demo`, `npm run build` 各自對應的環境變數

 script  |  NODE_ENV  |  process.env.NODE_ENV
-------- | ---------- | ----------------------
dev      | dev        | dev
demo     | demo       | demo
build    | production | production

#### CSS 標準色

CSS 所用的全域變數，可以於 `config/palette.js` 設定整個網站的標準色等。

```javascript
export default {
	standard: '#999',
	secondary: '#DDD',
	darkBlack: '#404040',
};
```

#### CSS Media Query 設置

CSS 所用的全域變數，可以於 `config/media.js` 設定整個網站的 media query。

```javascript
export default {
	'--phone': '(width < 600px)',
	'--small-tablet': '(900px > width >= 600px)',
	'--tablet': '(1200px > width >= 900px)',
	'--desktop': '(width >= 1200px)',
};
```

## Contribution

此專案 commit message 使用 angular format ，並使用 [commitizen](http://commitizen.github.io/cz-cli/) 輔助產生 commit message

- 加入修改的檔案 `git add .`
- 產生 commit message `npm run commit`

## Release

此專案使用 [standard-version](https://github.com/conventional-changelog/standard-version) 輔助 release 流程，自動產生 `CHANGELOG.md` 和 提升版本號（提升 major version 依據是否有 `feat` 來判斷）

- `npm run release`

可以自己決定 提升 patch, minor or major

- `npm run release -- --release-as minor`

**Warning**: 第一次 release 請下

- `npm run release -- --first-release`