React Native 快速學習自我挑戰 Day1
開始課程 第一支程式的 Roadmap 在每個作業系統安裝 dependencires 針對不同編輯器安裝不同的 ESLint 生成 React Native 專案 課程 Repo 在不同的系統部署環境 OSX 安裝流程 了解 Dependency 的用途 XCode:打包程式和 React Natvie Library 到可安裝的 app,然後用 iOS 模擬器運行 HomeBrew
開始課程 第一支程式的 Roadmap 在每個作業系統安裝 dependencires 針對不同編輯器安裝不同的 ESLint 生成 React Native 專案 課程 Repo 在不同的系統部署環境 OSX 安裝流程 了解 Dependency 的用途 XCode:打包程式和 React Natvie Library 到可安裝的 app,然後用 iOS 模擬器運行 HomeBrew
{title.touched ? title.error : ''},如果 title.touched 是 true,顯示 title.error,如果不是,什麼都不要顯示。 {`form-group ${title.touched && title.invalid ? 'has-danger' : ''}`},如
React Lifecycle method 是一個 React Component class 的 function,用來被 React 自動呼叫。 componentWillMount 是一個 Lifecycle method,他會在第一次 component 將要被 DOM render 的時候自動呼叫 componentWillMount,但是當下一次執行 component 的時候
Redux Blog Post API Reference。 Postman 是一個 HTTP client 的 API。 npm install --save react-router@2.0.0-rc5,安裝 react router。 React-Router 套件有 History 的子套件,用來管理網頁的 URL,監控改變並隨著時間更新。 History 對 URL 互動,並將更新
React Sparkline(畫圖工具)。 class based component:有變數傳遞。 function based component:無變數傳遞。 action type 用 const 定義,這樣才能在 action 和 reducer 裡面指定 action type。 在本專案中用的 middleware 就是 redux promise,我們用 redux pro
Middleware 是一個 function,Middleware 可以選擇讓 action 通過,還可以操縱 action。 在到達 reducer 之前,我們可以在 action 上的所有不同型態的小任務做 console.log 或 stop。 application state 擁有 application 全部的 data。 新增 data 需要 dispatch 一個 acti
React Component 只負責顯示 data,而 Redux 則負責提取 data。 設計一個元件的時候,記得要先問自己該元件是 Container 還是 Component。 基本上需要跟 Redux 溝通的就是 Container。 下面範例中,this (就是 SearchBar) 有一個 function 叫做 onInputChange,然後把這個 function bin
當知道 action creactor 將要呼叫(但不知道什麼時候),當被呼叫的時候,我想要確定 flow 的結果能夠經過 dispatch function,然後這個 dispatch function 會像是漏斗般的接收這些 actions,最後再把 actions 分別送回不同的 reducers。 action 通常有兩種值:type 和 payload。 不管 action 有沒有
Reducer 是一個 function 用來 return piece of the application state。 Reducer 產出 state 的值。 在檔名的命名中,應該在前面加前綴,例如:reducer_books.js。(不是一定要,作者提供的方法) Container 是 react component,對 Redux 所管理的 state 有直接的連結。 有一個 L
Redux 參考資料。 學習完 Redux 之後,還要學 webpack、Redux Router、Redux Promise、Redux Thunk、Hot Reloading。 Redux 是一個針對 JS application 的可預測 state container。 Redux 處理 data 的部分,React 處理 View 的部分。 React 和其他框架不同的地方就是將所
在 React 中,只有最上層的元件需要從 API 或 flux 取得資料。 用 className 來當作平常在 html 看到的 class,以跟 class based function 做區別。 function()可以簡化為() =>。 React 處理 List 的時候,不要使用 for 迴圈,用 map 來取代。 React 會辨識變數是否為 List 或是 Array
從 node modules 呼叫 react:import React from 'react';。 從 node modules 呼叫 react-dom:import ReactDOM from 'react-dom';。 React Render 要用元件方式包裝:<App />。 指定 Render 的地方:document.querySelector('.contai
Reactjs 和 Redux 有 Library 可以使用。 瀏覽器尚未支援 ES6。 完成的檔案用 webpack + babel 來 transpile 變成網頁。 index.html application.js style.css 起手專案(boilerplate):React + Youtube API 直接在 Command line 開 atom: atom .