Please enable JavaScript.

Coggle requires JavaScript to display documents.

HKL React Coggle (React 200210 (MISC XXX (NPM（Node Package Manager）…

- - - - 自動化code打包
        
        translate + compile
        
        transpiling 转/辑
      - webpack
        
        module bundler
        
        css,image , asset 打包
        
        js split成多檔
        
        js loader
        
        打包前預處理 (less,coffeescript,jsx,es6)
      - browserify + Gulp
        
        browserify
        
        也可用在前端
        讓前端也可用export,require 使用node的commonjs規範
        
        Gulp
        
        Task Runner , 打包文件 , gulify,less_css, trranslate ES6
        
        alter Grunt
        
        gulp好用是,因pipeline方式
  - - - NPM 是基於 Nested Dependency Tree
        
        不同的套件有可能會在引入依賴時會引入相同但不同版本的套件，造成檔案大小過大的情形
      - 基於 CommonJS 的規範
      - 是 Node.js 下的主流套件管理工具
    - - 为mac开发工具
        
        geymotion (paas)
    - - Android 4.1 (API 16)
        IOS 70
    - - 保留字
        
        for->htmlFor
        
        class->className
      - component
        
        字首为大写
    - - 二种写法
        
        function式
        
        不用class的方式, 简单props方式.
        
        const ABC=()=>(---)
        
        class式
    - - npm globally
        
        for run
      - npm locally
        
        for require
    - - state
        
        在建构中进行
        (只可在在初始化时进行)
        
        setstate,
        this.setstate()
      - props
        
        是react父子元件间沟通的桥梁
        
        由父元素传入, 只有父元才可更改
        
        readonly
    - - 传统是用imperative命令式
      - xml like表逹js func, 明白定义declarative
    - - 通过props通讯
- - - - npm init
      - $ npm install --save-dev babel-core babel-eslint babel-loader babel-preset-es2015 babel-preset-react html-webpack-plugin webpack webpack-dev-server
    - - 也是script程式的一种.
      - https://github.com/kdchang/reactjs101/blob/master/Ch02/webpack-dev-enviroment.md
  - - - npm install --save react react-dom
    - - index.htm :red_flag:
        
        index.js :red_flag:
      - React 開發環境設置與 Webpack 入門教學
        
        https://github.com/kdchang/reactjs101/blob/master/Ch02/webpack-dev-enviroment.md
  - - - 用 JSX 進行宣告式（Declarative）UI 設計
      - 使用 Virtual DOM
      - Component PropType 防呆機制
        
        propTypes ,defaultProps
      - Component 就像個狀態機（State Machine），而且也有生命週期（Life Cycle）
      - 一律重繪（Always Redraw）和單向資料流（Unidirectional Data Flow）
      - 在 JavaScript 裡寫 CSS：Inline Style
      - 基於元件（Component）化思考
        
        在 React 的世界中最基本的單元為元件（Component）
        
        並依照需求組裝成一個組合式的（Composable）元件，因此具有封裝（encapsulation）、關注點分離 (Separation of Concerns)、複用 (Reuse) 、組合 (Compose) 等特性。
- - - - 由父元素传入, 只有父元才可更改
      - readonly
      - 预设值设定
  - - - setstate,
        this.setstate()
- - - - 使用 ES6 的 Class（可以進行比較複雜的操作和元件生命週期的控制，相對於 stateless components 耗費資源）
      - :red_flag:
    - - const ABC=()=>(---)
      - 不用class的方式, 简单props方式.
      - 使用 Functional Component 寫法（單純地 render UI 的 stateless components，沒有內部狀態、沒有實作物件和 ref，沒有生命週期函數。若非需要控制生命週期的話建議多使用 stateless components 獲得比較好的效能）
      - :red_flag:
- - - - Xcode
- - - - nodejs, browserify 主流
        
        moduleJS开发的好处
        
        1.maintainability
        2.namespacing
        3.reusability
        
        composable
        encapsulation
        reuse
        compose
        
        require
        
        export
  - - - :red_flag:
  - - - requireJS
  - - - sea.js
        
        :red_flag: