The coding day 整天打扣

修訂了一版放在github上，步驟比較詳細 這裡 --- 想把React APP部屬在GitHub Pages上若有使用到React route最常見的問題就是出現"空白"或是自訂的404頁面，但是當你打開瀏覽器偵錯工具又發現資源是正確載入的 這個問題的原因發生在React route本身，可能因為React route偵測到的路徑發生一些問題導致元件沒有渲染，這時候你需要進行一些設置 1. 在你的package.json加入"homepage": "https://你的帳號.github.io/儲藏庫/index所在資料夾" 2. 修改package.json腳本 - ※修改後的package.json參考 - 3. 將Router替換成 HashRouter 本來可能是 BrowserRouter ，如果沒有進行替換會在reload後發生404，這是因為GitHub Pages無法設置404 redirect ※如果不換成 HashRouter ，須給 BrowserRouter 指定basename。 basename='儲藏庫/index所在資料夾/'

最近幫專題增加金流功能，使用了PayPal提供的方案，順便做點心得紀錄 PayPal提供了多種API供選擇，可惜文件寫得有點分散且不夠詳盡，讓第一次接觸金流API這部分的我吃了不少苦頭 欲實現目的 使用者在網站付款後自動實現充值 環境與方案 前端付款方案:PayPal Checkout ( https://developer.paypal.com/docs/checkout/ ) 收款通知方案:Instant Payment Notificatio(IPN)( https://developer.paypal.com/docs/classic/products/instant-payment-notification/ ) 前端:ReactJS 後端:Laravel 這邊不得不提一下PayPal提供了多種的前端付款方案除了本文使用的PayPal Checkout還有 Html form方案 目的都是幫助開法者快速建立付款按鈕，似乎還有單純使用API建立帳單的方式，看文件的時候沒注意真的會很容易被搞混... 在收到款項通知部分本以為可以有API去打，查閱開發文件後似乎是沒有這種選項，必須自己在伺服器建立IPN聆聽器來接收付款通知 流程邏輯 使用者發起付款(包含一組識別用invoice)->在自己伺服器建立紀錄 ->在paypal建立帳單->引導至paypal付款->paypal將付款結果通知IPN ->將付款通知中的invoice與自己記錄的invoce進行match並且更新資料庫 ->完成 建立付款按鈕 開始首要建立付款按鈕，在React部分我參考了 這篇 ，若非使用React的則可參考 官方文件 ，整體來說差異不大 而checkout button所需的token則可以在 https://developer.paypal.com/ 找到 ※DASHBOARD>My Apps & Credentials>REST API apps>Create App或是點擊已存在App 在React建立好的checkout button大概長這樣 - - 元件使用。此例中使用亂數字串當作發票號碼 - - 訂單追蹤 接著看回React che...

呼叫 electron api 參考: https://medium.freecodecamp.org/building-an-electron-application-with-create-react-app-97945861647c - 呼叫 node api ※以"os"舉例

系列目錄 React元件 class based 與 functional 差異 在開始之前必須提一下，上一篇雖然提到寫元件可以用class或是function的方式來撰寫，但是如果你的元件使用到狀態(stateful)的話，那就必須以class的方式來撰寫，functional只適合無狀態元件(stateless) 那什麼是state呢? 簡單來說就是元件內部之狀態，舉凡會動的東西都會有狀態。 e.g. 時鐘、使用者輸入都可能觸發或使用到狀態 那就開始吧! 今天來做一個打招呼的網頁，這個東西很簡單就是讓你透過input輸入名稱(使用state記住)然後顯示在網頁上面 這次內容可能比較多，大部分我都把它註解在程式碼裡面了，不過這邊還是在提一下 1. class內部方法使用前需要先bind()來綁定 2. this指的是實體化的自己本身 3. 狀態需要有初始值在 類別建構子constructor 4. 改變狀態需要使用 setState() 5. ref:一般js我們使用document.getElementById()來獲取節點，但是在react不推薦直接操作DOM節點，這被視為非受控的( ref推薦參考文章 ) Demo See the Pen react state by Philip ( @p208p2002 ) on CodePen . --- 程式碼 ---

這波變動滿大的...主要是在新的生命週期吧 雖然目前自己還停留在15 但是 這篇文章 還是值得一看的^^

不廢話的React教學 [01] - 第一次的React 不廢話的React教學 [02] - 子元件與Props 不廢話的React教學 [03] - 元件的state

系列目錄 上一篇說到了React的基本與核心，以及如何直接使用引入資源的方式建立第一次的React。這一次要來說明元件與Props的部分。 元件做什麼用? 元件的概念很簡單，就是讓你能夠將它重複利用，Do not try yourself 就是這麼簡單! 剩下還有很多拆件的優點請自己思考與體會 Props? 上一篇已經稍微提到Props了，不過並沒有說明。React三大核心之一，用意在 傳遞資料給予子元件 ，詳細見最下方code 如何寫一個子元件? 有兩種方式: 1. class base --- 2. function base --- 糟糕看不懂class base與function base在寫殺毀 class如果看不懂的話...就只能多去習慣了，ES6之後讓JS擁有了物件導向的概念不再只是程序導向，這是兩種不同的思維，一般來說如果不認識class那你的思維應該是程序導向，需要稍微轉換一下 function base我想有疑惑點大概在 (props)=>{}，這又是一個ES6的新特性，名稱是"箭頭函數"，現在不習慣沒關係，以後會愛上他的:D 下面用箭頭函數與匿名函數做比較來說明 ※一般函式你懂我懂，匿名函式就是顧名思義，剩下的請看code吧! --- 終於可以開始這次的主菜了XD~下面範例使用function base建立元件，並且使用了箭頭函式將其包裝。要注意的是元件的命名必須以大寫為開頭，以及在class中必須使用this來指定自己本身 如何重複使用原件以及利用Props傳遞資料? See the Pen eVpmNq by Philip ( @p208p2002 ) on CodePen . ---

系列目錄 學習React一陣子了，當初學習的時候網路上文章滿多的但是大多不友善，所以一直想以一個Javascript新手起手的角度來發一個React系列教學文 平常沒有接觸或是Follow Javascript生態的話可能還對JS停留在以前的印象，但是近幾年歷經幾次大型改版與新觀念導入後(ES6、ES7、CommonJS)JS幾乎可以說是一門新的語言，新特性與方法很棒但是常常讓新手看不懂再幹些什麼 自己就在自學React的途中因為高門檻與不友善的文章放棄了幾次，又回來練功，反覆幾次後才真的成功入"門"，說是門那是因為React已經是一個龐大的生態系，而我也僅是剛踏入的萌新罷了 這篇不會說明其他巴拉巴拉的東西了，我們 直接從"React"開始 ，剩下的巴拉巴拉後續再慢慢帶入會比較有感覺 React是什麼? Javascript前端library React的核心? props、state、JSX。這篇也只會先說明JSX，另外兩個先知道有他們的存在即可 JSX是什麼? 讓你在使用React(JS)設計網頁畫面的時候像是在寫HTML一樣。 舉例來說在html建立一個h1 tag，內容是 Hello --- 使用JS來建立一個h1 tag，內容是Hello --- 使用JSX來建立一個h1 tag，內容是Hello --- 你會說:阿靠這不是跟HTML一樣?沒錯!就是一樣(其實也還是有些地方不一樣，後篇探討)，只是他經過了Babel幫你實現轉譯 Babel是什麼? JSX的compiler，讓你的JSX語言轉變化成JS語言，舉例來說上面的h1 hello經過Babel編譯後會變成 --- 我要如何開始我的第一次React? 一開始就要使用打包好的環境太痛苦了(例如官方的create react app)，畢竟很多東西不認識。我覺得直接使用script引入資源的方式直接開始最好，稍微上手後再轉換環境開發 --- 這就是你的第一隻React!試著玩玩看吧(17行開始)! ※17~19行即是JSX的部分

use dangerouslySetInnerHTML method with HTML element in React will allow your browser to explane HTML element ,not just print it directly focus on   <div dangerouslySetInnerHTML={{ __html: this.props.context }} /> in child component class infoCard extends Component { render() { return ( <div id="infoCard"> <div className="card-block"> <h1>{this.props.title}</h1> <div className="card-block-text"> <p> <div dangerouslySetInnerHTML={{ __html: this.props.context }} /> </p> </div> <div className="center"> <Button width="240px" fontSize="20px" type="1" label="重新登入"/> </div> ...

action 定義 export function removeCartItem(id){ return{ type:REMOVE_CART_ITEM, id:id }; } reducer 寫法 export default (state = initstate(), action) => { console.log('userReducer was called with state', state, 'and action', action); switch (action.type) { case GET_CART_ITEMS: return assign({}, state, { cartItems: action.items }); case REMOVE_CART_ITEM: return assign({},{ cartItems:state.cartItems.filter( //return value without target id (item) => { console.log('act:'+action.id); console.log('item:'+item.id); return item.id !== action.id; } ) }); default: return state; } }; 說明 聚焦在 case REMOVE_CART_ITEM: 這邊 1. assign()這個函式會在第一個參數new...

為了不觸發請求給伺服器，我們會使用假網址"#"來避免觸發請求，好讓client side route能作動。但是如果今天屬於比較正式的開發我們並不希望見到使用"#"這種hash url的作法 請參考一樓解法即可 https://stackoverflow.com/questions/42672842/how-to-get-history-on-react-router-v4 補充: 如果直接輸入網址仍然可能發生404 not found ，關於這個問題因為卡在伺服端的樣子，稍微找了網路上的資料說要在伺服端做設定，無論如何伺服端接收到請求均應返還index.html即可

Webpack中使用Bootstrap 4 因為Bootstrap官方文件寫得不是很清楚，然後又有點問題，就順手做了紀錄。不過這篇跟React幾乎沒有什麼關係...主要只是因為我在自己建立的React開發環境中使用了Bootstrap而已 詳細或懶人可以參考我的 github 安裝Bootstrap、Bootstrap相依套件和css轉換套件 $ npm install bootstrap@4.0.0-alpha.6 popper.js jquery --save $ npm install css-loader style-loader --save-dev 設定webpack.config.js 全域中新增變數 var webpack = require('webpack'); 在plugins段落中新增 plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery', Tether: 'tether', Popper: ['popper.js', 'default'], // In case you imported plugins individually, you must also require them here: Util: "exports-loader?Util!bootstrap/js/dist/util", Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown", }) ] 在module段落中新增 { test: /\.css$/, use: [ 'style-loader', ...

前言         剛把react-redux看完順便整理寫了一些內容，唯一的感想大概就是痛吧...之前沒怎麼碰過JavaScript，一上來練習就是React全套，什麼Npm、ES6、webpack、NodeJS、CommonJS、React、JSX、Babel、Redux叭拉趴拉，對於一個完全新手真的是非常高的一個門檻、自己也是斷斷續續看了2個多月才終於走到最後把React結合Redux使用。         相對於前面的套件管理Npm或是打包工具webpack，雖然無形中增加許多門檻，但是真正學會如何使用後對於開發上有著莫大的效益，Redux我就不覺得是這麼一回事了，雖然它幫助我們達到元件中的互相傳遞，但是使用上非常不直覺，光是傳遞一個簡單動作就要建立2~3個js檔，雖然都是架構檔案，但是對於第一次接觸還是非常霧傻傻阿...不得不吐槽一下那個官方文件，非常的不好懂         最後如果還不知道怎麼使用Redux非常建議去看 這篇文章 雖然是英文的，但是非常易懂且搭配實例 react-redux 簡單使用範例與講解 由於編排問題就直接放在github上面方便閱讀 文件(英) https://github.com/p208p2002/simple-react-redux/blob/master/README.md 程式碼 https://github.com/p208p2002/simple-react-redux 這邊補充connect的兩種用法 https://hackmd.io/s/r1omeG12Z

前言 react的學習曲線真的是非常之高，痛苦阿...摸了好久，使用的東西非常之多，對新手來說光環境跟工具的設定就夠頭痛了，很難專注在code上面，所以之前都是直接引入CDN...但最近剛好有React的案子，再用CDN引入大概會被宰掉吧...畢竟練習跟開發是不一樣的 這邊提供我已經建置好的 React 15開發環境 開始 先假設你已經有接觸過npm，並且對使用的工具有概念，如果還沒有趕快去補補~ 安裝環境 $ npm init --yes 安裝webpack $ npm install webpack --save -dev 安裝babel $ npm install babel-core babel-loader --save -dev babel對js es6及react支持 $ npm install babel-preset-es2015 babel-preset-react --save-dev 安裝react $ npm install react react-dom --save 編寫配置文件 1. 建立 .babelrc ($touch .babelrc)  .babelrc { "presets" :[ "es2015" , "react" ] } 2. 建立 webpack.config.js 在根目錄 webpack.config.js var path = require( 'path' ); var config = { entry : [path.resolve(__dirname, 'app/main.jsx' )], output : { path : path.resolve(__dirname, 'build' ), filename : 'bundle.js' }, module : { loaders : [{ test : /\.jsx?$/ , loaders ...

< ! DOCTYPE html > < html > < head > < title > < / title > < style > table { font - family : arial , sans - serif ; border - collapse : collapse ; width : 100 % ; } td , th { border : 1px solid #dddddd ; text - align : left ; padding : 8px ; } tr : nth - child ( even ) { background - color : #dddddd ; } < / style > < / head > < body > < div id = " root " > <!-- render here -- > < / div > < script src = " react/react.js " > < / script > < script src = " react/react-dom.js " > < / script > <!-- babel 5.8 . 24 -- > < script src = " browser.js " > < / script > < script type = " text/babel " > const numbers = [ 1 , 2 , 3 , 4 , 5 ] ; const tableRow = null class MyTable extends React . Component { constructor ( props ) ...

Class based class MyButton extends React.Component{ //初始狀態 constructor(props) { super(props); this.state ={btnText:"click me"} this._clk = this.clk.bind(this) } clk(){ this.setState({ btnText:"click!" }); } render(){ return( <div> <button type= "button" id= "123" onClick= {this._clk} > {this.state.btnText} </button> </div> ) } } ReactDOM.render( <MyButton /> , document.getElementById('root') ); Functional based var NewComponent = React.createClass({ getInitialState: function(){ return { textContent:"click me" }; }, _event:function(e){ console.log("click"); console.log(e.target.textContent); this.setState({ textContent:"click!" }); }, render: function() { return ( <div> <button type= "button" id= "123" ...

開始之前 首先你需要知道react是一個javascript的函式庫 以及需要具備一些基礎的jacascript知識 準備檔案 從react git hub上下載需要的檔案(如欲跟隨本文章操作建議下載v15版本) https://github.com/facebook/react/releases 分別是 react.js react-dom.js 將react加入你的網頁 與你的網頁檔案放置在 一起然後引入 <script src="react/react.js"></script> <script src="react/react-dom.js"></script> ※這邊我已經先將檔案放置在react資料夾底下 編輯你的網頁 建立一個<div id="root">的標籤 然後加入 ReactDOM.render(      React.DOM.h1(null,"Hello World!"),      document.getElementById('root')  ); 到這邊，你已經完成Hello World! 完整的網頁參考如下 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id= "root" > <!-- render here --> </div> <script src= "react/react.js" ></script> <script src= "react/react-dom.js" ></script> <script > ReactDOM.render( React.DOM.h1( null , ...