Tag: React

0

React Native 快速學習自我挑戰 Day1

開始課程 第一支程式的 Roadmap 在每個作業系統安裝 dependencires 針對不同編輯器安裝不同的 ESLint 生成 React Native 專案 課程 Repo 在不同的系統部署環境 OSX 安裝流程 了解 Dependency 的用途 XCode:打包程式和 React Natvie Library 到可安裝的 app,然後用 iOS 模擬器運行 HomeBrew

0

React快速學習自我挑戰 Day12

{title.touched ? title.error : ''},如果 title.touched 是 true,顯示 title.error,如果不是,什麼都不要顯示。 {`form-group ${title.touched && title.invalid ? 'has-danger' : ''}`},如

0

React快速學習自我挑戰 Day11

React Lifecycle method 是一個 React Component class 的 function,用來被 React 自動呼叫。 componentWillMount 是一個 Lifecycle method,他會在第一次 component 將要被 DOM render 的時候自動呼叫 componentWillMount,但是當下一次執行 component 的時候

0

React快速學習自我挑戰 Day10

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 互動,並將更新

0

React快速學習自我挑戰 Day9

React Sparkline(畫圖工具)。 class based component:有變數傳遞。 function based component:無變數傳遞。 action type 用 const 定義,這樣才能在 action 和 reducer 裡面指定 action type。 在本專案中用的 middleware 就是 redux promise,我們用 redux pro

0

React快速學習自我挑戰 Day8

Middleware 是一個 function,Middleware 可以選擇讓 action 通過,還可以操縱 action。 在到達 reducer 之前,我們可以在 action 上的所有不同型態的小任務做 console.log 或 stop。 application state 擁有 application 全部的 data。 新增 data 需要 dispatch 一個 acti

0

React快速學習自我挑戰 Day7

React Component 只負責顯示 data,而 Redux 則負責提取 data。 設計一個元件的時候,記得要先問自己該元件是 Container 還是 Component。 基本上需要跟 Redux 溝通的就是 Container。 下面範例中,this (就是 SearchBar) 有一個 function 叫做 onInputChange,然後把這個 function bin

0

React快速學習自我挑戰 Day6

當知道 action creactor 將要呼叫(但不知道什麼時候),當被呼叫的時候,我想要確定 flow 的結果能夠經過 dispatch function,然後這個 dispatch function 會像是漏斗般的接收這些 actions,最後再把 actions 分別送回不同的 reducers。 action 通常有兩種值:type 和 payload。 不管 action 有沒有

0

React快速學習自我挑戰 Day5

Reducer 是一個 function 用來 return piece of the application state。 Reducer 產出 state 的值。 在檔名的命名中,應該在前面加前綴,例如:reducer_books.js。(不是一定要,作者提供的方法) Container 是 react component,對 Redux 所管理的 state 有直接的連結。 有一個 L

0

React快速學習自我挑戰 Day4

Redux 參考資料。 學習完 Redux 之後,還要學 webpack、Redux Router、Redux Promise、Redux Thunk、Hot Reloading。 Redux 是一個針對 JS application 的可預測 state container。 Redux 處理 data 的部分,React 處理 View 的部分。 React 和其他框架不同的地方就是將所

0

React快速學習自我挑戰 Day3

在 React 中,只有最上層的元件需要從 API 或 flux 取得資料。 用 className 來當作平常在 html 看到的 class,以跟 class based function 做區別。 function()可以簡化為() =>。 React 處理 List 的時候,不要使用 for 迴圈,用 map 來取代。 React 會辨識變數是否為 List 或是 Array

0

React快速學習自我挑戰 Day2

從 node modules 呼叫 react:import React from 'react';。 從 node modules 呼叫 react-dom:import ReactDOM from 'react-dom';。 React Render 要用元件方式包裝:<App />。 指定 Render 的地方:document.querySelector('.contai

0

React快速學習自我挑戰 Day1

Reactjs 和 Redux 有 Library 可以使用。 瀏覽器尚未支援 ES6。 完成的檔案用 webpack + babel 來 transpile 變成網頁。 index.html application.js style.css 起手專案(boilerplate):React + Youtube API 直接在 Command line 開 atom: atom .