Submit Search
Upload
Javascript template & react js 初探
•
11 likes
•
2,078 views
W
wantingj
Follow
Javascript template & react js 初探
Read less
Read more
Technology
Report
Share
Report
Share
1 of 17
Download now
Download to read offline
Recommended
React基礎教學
React基礎教學
昇倫 蔡
React js入門
React js入門
昶宇 賴
React js入門教學
React js入門教學
TaiShunHuang
ReactMaker start kit intro
ReactMaker start kit intro
昇倫 蔡
Angular js 入門介紹
Angular js 入門介紹
wantingj
React JS
React JS
漢麟 王
Single-Page Application Design Principles 101
Single-Page Application Design Principles 101
Jollen Chen
前端爆肝之旅+React上山前的小專案心得分享
前端爆肝之旅+React上山前的小專案心得分享
Yao Nien Chung
Recommended
React基礎教學
React基礎教學
昇倫 蔡
React js入門
React js入門
昶宇 賴
React js入門教學
React js入門教學
TaiShunHuang
ReactMaker start kit intro
ReactMaker start kit intro
昇倫 蔡
Angular js 入門介紹
Angular js 入門介紹
wantingj
React JS
React JS
漢麟 王
Single-Page Application Design Principles 101
Single-Page Application Design Principles 101
Jollen Chen
前端爆肝之旅+React上山前的小專案心得分享
前端爆肝之旅+React上山前的小專案心得分享
Yao Nien Chung
AngularJS training in Luster
AngularJS training in Luster
Jason Chung
Angular.js & ASP.NET in Study4
Angular.js & ASP.NET in Study4
Kyle Shen
Vue
Vue
國昭 張
Angularjs
Angularjs
宗哲 謝
Angular js twmvc#17
Angular js twmvc#17
twMVC
webpack 入門
webpack 入門
Anna Su
React js
React js
國昭 張
React Native on Android
React Native on Android
萬皇 楊
How tovuejs
How tovuejs
Daniel Chou
React Native + Redux
React Native + Redux
Ch Rick
ModernWeb 2017 angular component
ModernWeb 2017 angular component
Chieh Kai Yang
Study4 love.2016.2.20.ionic
Study4 love.2016.2.20.ionic
Kyle Shen
HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)
HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)
Will Huang
Angular 4 新手入門攻略完全制霸
Angular 4 新手入門攻略完全制霸
Will Huang
Angular 7 全新功能探索 (Angular Taiwan 2018)
Angular 7 全新功能探索 (Angular Taiwan 2018)
Will Huang
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
Jia Mi
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
Will Huang
SignalR實戰技巧 twmvc#17
SignalR實戰技巧 twmvc#17
twMVC
Build your ETL job using Jenkins - step by step
Build your ETL job using Jenkins - step by step
Bryan Yang
JSDC 2015 React-Native 實戰
JSDC 2015 React-Native 實戰
Sam Lee
Parse, cloud code 介紹
Parse, cloud code 介紹
wantingj
CSS 讀書會 - 1 (Grid system)
CSS 讀書會 - 1 (Grid system)
Chih-cheng Wang
More Related Content
What's hot
AngularJS training in Luster
AngularJS training in Luster
Jason Chung
Angular.js & ASP.NET in Study4
Angular.js & ASP.NET in Study4
Kyle Shen
Vue
Vue
國昭 張
Angularjs
Angularjs
宗哲 謝
Angular js twmvc#17
Angular js twmvc#17
twMVC
webpack 入門
webpack 入門
Anna Su
React js
React js
國昭 張
React Native on Android
React Native on Android
萬皇 楊
How tovuejs
How tovuejs
Daniel Chou
React Native + Redux
React Native + Redux
Ch Rick
ModernWeb 2017 angular component
ModernWeb 2017 angular component
Chieh Kai Yang
Study4 love.2016.2.20.ionic
Study4 love.2016.2.20.ionic
Kyle Shen
HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)
HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)
Will Huang
Angular 4 新手入門攻略完全制霸
Angular 4 新手入門攻略完全制霸
Will Huang
Angular 7 全新功能探索 (Angular Taiwan 2018)
Angular 7 全新功能探索 (Angular Taiwan 2018)
Will Huang
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
Jia Mi
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
Will Huang
SignalR實戰技巧 twmvc#17
SignalR實戰技巧 twmvc#17
twMVC
Build your ETL job using Jenkins - step by step
Build your ETL job using Jenkins - step by step
Bryan Yang
JSDC 2015 React-Native 實戰
JSDC 2015 React-Native 實戰
Sam Lee
What's hot
(20)
AngularJS training in Luster
AngularJS training in Luster
Angular.js & ASP.NET in Study4
Angular.js & ASP.NET in Study4
Vue
Vue
Angularjs
Angularjs
Angular js twmvc#17
Angular js twmvc#17
webpack 入門
webpack 入門
React js
React js
React Native on Android
React Native on Android
How tovuejs
How tovuejs
React Native + Redux
React Native + Redux
ModernWeb 2017 angular component
ModernWeb 2017 angular component
Study4 love.2016.2.20.ionic
Study4 love.2016.2.20.ionic
HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)
HTML5 規格最新發展現況 (HTML5 趨勢發展與技術應用論壇)
Angular 4 新手入門攻略完全制霸
Angular 4 新手入門攻略完全制霸
Angular 7 全新功能探索 (Angular Taiwan 2018)
Angular 7 全新功能探索 (Angular Taiwan 2018)
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
SignalR實戰技巧 twmvc#17
SignalR實戰技巧 twmvc#17
Build your ETL job using Jenkins - step by step
Build your ETL job using Jenkins - step by step
JSDC 2015 React-Native 實戰
JSDC 2015 React-Native 實戰
Viewers also liked
Parse, cloud code 介紹
Parse, cloud code 介紹
wantingj
CSS 讀書會 - 1 (Grid system)
CSS 讀書會 - 1 (Grid system)
Chih-cheng Wang
CSS preprocessor 介紹,與 SASS 入門分享
CSS preprocessor 介紹,與 SASS 入門分享
wantingj
透過範例學習React (react tutorial 2)
透過範例學習React (react tutorial 2)
Justin Wu
React.js - The Dawn of Virtual DOM
React.js - The Dawn of Virtual DOM
Jimit Shah
Npm 套件管理 & 常用開發工具介紹
Npm 套件管理 & 常用開發工具介紹
wantingj
認試軟體測試的世界 & TDD/BDD 入門
認試軟體測試的世界 & TDD/BDD 入門
wantingj
React JS and why it's awesome
React JS and why it's awesome
Andrew Hull
Viewers also liked
(8)
Parse, cloud code 介紹
Parse, cloud code 介紹
CSS 讀書會 - 1 (Grid system)
CSS 讀書會 - 1 (Grid system)
CSS preprocessor 介紹,與 SASS 入門分享
CSS preprocessor 介紹,與 SASS 入門分享
透過範例學習React (react tutorial 2)
透過範例學習React (react tutorial 2)
React.js - The Dawn of Virtual DOM
React.js - The Dawn of Virtual DOM
Npm 套件管理 & 常用開發工具介紹
Npm 套件管理 & 常用開發工具介紹
認試軟體測試的世界 & TDD/BDD 入門
認試軟體測試的世界 & TDD/BDD 入門
React JS and why it's awesome
React JS and why it's awesome
Similar to Javascript template & react js 初探
程式人雜誌 -- 2015 年1月號
程式人雜誌 -- 2015 年1月號
鍾誠 陳鍾誠
MobileWebAppFramework_V5_design
MobileWebAppFramework_V5_design
Jackson Tian
Real World ASP.NET MVC
Real World ASP.NET MVC
jeffz
J S教材
J S教材
yiditushe
常用Js框架比较
常用Js框架比较
Adam Lu
Asp.net mvc網站的從無到有
Asp.net mvc網站的從無到有
Wade Huang
Asp.net mvc 從無到有 -twMVC#2
Asp.net mvc 從無到有 -twMVC#2
twMVC
twMVC#02 | ASP.NET MVC 從無到有
twMVC#02 | ASP.NET MVC 從無到有
twMVC
Angular js入门分享 by 王栋
Angular js入门分享 by 王栋
栋 王
ASP.Net MVC2 简介
ASP.Net MVC2 简介
Allen Lsy
Hello reactJS 0~1 Bulid my first web app
Hello reactJS 0~1 Bulid my first web app
hungjie19
Js高级技巧
Js高级技巧
fool2fish
Javascript primer plus
Javascript primer plus
Dongxu Yao
twMVC#01 | ASP.NET MVC 的第一次親密接觸
twMVC#01 | ASP.NET MVC 的第一次親密接觸
twMVC
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
裕波 周
高雄前端上課簡報 #29
高雄前端上課簡報 #29
reactmaker9527
赶集团购开发总结4
赶集团购开发总结4
yangdj
客户端Javascript及浏览器
客户端Javascript及浏览器
lifehacker007
Ajax应用开发最佳实践
Ajax应用开发最佳实践
Fu Cheng
twMVC#20 | ASP.NET MVC View 開發技巧小錦囊
twMVC#20 | ASP.NET MVC View 開發技巧小錦囊
twMVC
Similar to Javascript template & react js 初探
(20)
程式人雜誌 -- 2015 年1月號
程式人雜誌 -- 2015 年1月號
MobileWebAppFramework_V5_design
MobileWebAppFramework_V5_design
Real World ASP.NET MVC
Real World ASP.NET MVC
J S教材
J S教材
常用Js框架比较
常用Js框架比较
Asp.net mvc網站的從無到有
Asp.net mvc網站的從無到有
Asp.net mvc 從無到有 -twMVC#2
Asp.net mvc 從無到有 -twMVC#2
twMVC#02 | ASP.NET MVC 從無到有
twMVC#02 | ASP.NET MVC 從無到有
Angular js入门分享 by 王栋
Angular js入门分享 by 王栋
ASP.Net MVC2 简介
ASP.Net MVC2 简介
Hello reactJS 0~1 Bulid my first web app
Hello reactJS 0~1 Bulid my first web app
Js高级技巧
Js高级技巧
Javascript primer plus
Javascript primer plus
twMVC#01 | ASP.NET MVC 的第一次親密接觸
twMVC#01 | ASP.NET MVC 的第一次親密接觸
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
高雄前端上課簡報 #29
高雄前端上課簡報 #29
赶集团购开发总结4
赶集团购开发总结4
客户端Javascript及浏览器
客户端Javascript及浏览器
Ajax应用开发最佳实践
Ajax应用开发最佳实践
twMVC#20 | ASP.NET MVC View 開發技巧小錦囊
twMVC#20 | ASP.NET MVC View 開發技巧小錦囊
Javascript template & react js 初探
1.
Javascript template 介紹 與
React JS 初探 Wan-Ting Jheng 2015/3/3
2.
Javascript template 將 資料
與 頁面外觀 分開 透過樣版引擎處理 產生最終頁面
3.
Why javascript template 網頁中有許多元素是重覆的,例如文章列表 使用樣版可減少程式碼 以往用
javascript 操作 DOM 的作法 讓程式碼變的冗長且難以閱讀 這種作法將 邏輯 與 頁面外觀 混在一起 透過樣版,寫出頁面內容,將會變動的欄位挖空 關注點分離,讓資料、畫面、邏輯各自獨立 讓樣版引擎處理產生頁面
4.
React JS 源自於 Facebook
的開源專案 作為一個 JavaScript-based UI rendering engine 它提供建立使用者介面的 javascript 函式庫 特色 virtual DOM : 讓執行速度加快的關鍵 component : 提高重用性
5.
Demo: Easy-Blog 使用react js
實作簡易blog系統,具有以下功能 ● 四種文章類別選項 ● 簡易貼文 ● 短留言 使用 React.js, Firebase, Bootstrap, jQuery github page http://wantingj.github.io/easy_blog/ github repo. https://github.com/wantingj/easy_blog
6.
Easy-Blog Component List Page PageNav CategoryItem
*n PageHeader OnePost *n OneReply *n ReplyForm PostForm
7.
由於操作 DOM 是個昂貴的動作 React
會將頁面結構透過 virtual DOM 紀錄起來 資料變動時,將 virtual DOM 與 實際的 DOM 比對 只更動需要異動的部份,以加快呈現速度 Virtual DOM <p>p1</p> <p>p2</p> <p>p2</p> <p>p1</p> <p>p2</p> <p>p2</p> <p>p2</p>
8.
JSX JSX 是在 javascript
程式碼當中,看起來類似 XML 的語法 用來描述頁面結構 (注意: 並不是真正的DOM物件) 不一定要使用,但它撰寫方便,增加程式可讀性 需使用 JSXTransformer 轉換為 javascript 語法 <a href='http://facebook.github.io/react'>React</a> var link = React.DOM.a({href: 'http://facebook.github.io/react'}, 'React');
9.
JSX transformer ● In-browser
JSX transformer 不建議在產品上使用 需要以下語法 <script src="js/lib/JSXTransformer.js"></script> <script type="text/jsx">/* 帶有 jsx 的程式 */</script> ● Online JSX Compiler -- JSX to js http://facebook.github.io/react/jsx-compiler.html ● 離線轉換JSX 透過 npm 安裝 react-tools
10.
JSX 注意事項 由於 JSX
語法存在於 javascript 中 因此 attribute 必須避開 javascript 關鍵字 class => className for => htmlFor JSX 撰寫要符合xml標準 開放標籤要記得結尾,例如 <br /> JSX array 要有 key 屬性並且在array之中唯一 否則會有以下警告訊息 Each child in an array should have a unique "key" prop
11.
元件 元件定義 透過 render() 繪製,將元件實例化
12.
props 通常用在靜態資料上 讓父元件傳遞資訊給子元件 父元件透過 attritube 指定給子元件 <Page
postLimit={10} nowCategory={-1}/> 在子元件 Page 的內部,可以用 props 取得 this.props.postLimit
13.
state 存放元件內部時常變動的資料 例如 Easy-Blog 的文章列表、回應 //初始化 getInitialState:
function(){ return {data: []}; } //修改 this.setState({data: [1,2,3]}) 一旦 state 有變動,就會觸發 React 重新繪製頁面
14.
refs 有像錨點的概念 定義結構時,埋入 ref 屬性 <textarea
ref="content"></textarea> 透過 this.refs 取得該元件 this.refs.content.getDOMNode().value
15.
生命周期 元件的生命週期有三個主要的部分 ● Mounting:元件正準備要被寫入 DOM ●
Updating:元件偵測到狀態的改變準備重新繪製 ● Unmounting:元件正要被從 DOM 中移除 React 根據以上情境提供對應的事件 ● Will:情境發生之前 ● Did:情境完成之後
16.
Mounting ● getInitialState() ● componentWillMount() ●
componentDidMount(DOMElement rootNode) 此時已經生成 DOM 物件,有需要操作DOM的話可以在這裡執行 after Mounting ● getDOMNode() 取得 DOM 物件 ● forceUpdate() 強制更新 Updating ● componentWillReceiveProps(nextProps) ● shouldComponentUpdate(nextProps, nextState) 回傳 boolean,代表是否要更新畫面。通常 React 反應速度很快不太需要用到 若是執行許多資料操作,希望資料都就定位後才更新畫面,可以透過這個控制 ● componentWillUpdate() ● componentDidUpdate(prevProps, prevState, rootNode) Unmounting ● componentWillUnmount()
17.
Reference React JS 官網 http://facebook.github.io/react/index.html iThome
- Reactjs 30 天系列 http://ithelp.ithome.com.tw/profile/share?id=20059915&page=2 [译]深入解析react http://www.ifeenan.com/javascript/2014-09-10-[%E8%AF%91]%E6%B7%B1% E5%85%A5%E8%A7%A3%E6%9E%90React/ 使用各種 javascript framework 實作 Todo App http://todomvc.com/
Download now