Submit Search
Upload
React基礎教學
•
Download as PPTX, PDF
•
26 likes
•
5,377 views
昇
昇倫 蔡
Follow
2015/12/06 React Workshop - React 基礎教學
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 28
Download now
Recommended
Javascript template & react js 初探
Javascript template & react js 初探
Javascript template & react js 初探
wantingj
React JS
React JS
React JS
漢麟 王
React js入門
React js入門
React js入門
昶宇 賴
透過開發一個簡單的 to do list ,了解 React.js 的觀念
React js入門教學
React js入門教學
TaiShunHuang
https://github.com/ReactMaker/simple_react_start_kit_2017
ReactMaker start kit intro
ReactMaker start kit intro
昇倫 蔡
Angular js 入門介紹
Angular js 入門介紹
Angular js 入門介紹
wantingj
在衝動想栽進 React 的當下,請先且慢!還有很多你必須先學的知識,否則會摔得。。。很重。共勉之,前端世界就是狂。
前端爆肝之旅+React上山前的小專案心得分享
前端爆肝之旅+React上山前的小專案心得分享
Yao Nien Chung
Introduce Vue.js 2.0 and its family: Vue-Route, Vuex
Vue
Vue
國昭 張
Recommended
Javascript template & react js 初探
Javascript template & react js 初探
Javascript template & react js 初探
wantingj
React JS
React JS
React JS
漢麟 王
React js入門
React js入門
React js入門
昶宇 賴
透過開發一個簡單的 to do list ,了解 React.js 的觀念
React js入門教學
React js入門教學
TaiShunHuang
https://github.com/ReactMaker/simple_react_start_kit_2017
ReactMaker start kit intro
ReactMaker start kit intro
昇倫 蔡
Angular js 入門介紹
Angular js 入門介紹
Angular js 入門介紹
wantingj
在衝動想栽進 React 的當下,請先且慢!還有很多你必須先學的知識,否則會摔得。。。很重。共勉之,前端世界就是狂。
前端爆肝之旅+React上山前的小專案心得分享
前端爆肝之旅+React上山前的小專案心得分享
Yao Nien Chung
Introduce Vue.js 2.0 and its family: Vue-Route, Vuex
Vue
Vue
國昭 張
2014 達暉資訊教育訓練課程 - AngularJS 課程簡介: 想要開發複雜的互動網頁,卻被拉哩拉咂的 JS 和 HTML 搞得暈頭轉向? 還在為處理大量的動態資料顯示感到厭煩? 想猶如造物主般的自己創造自己的 HTML 標籤? 來試試 AngularJS 吧 ~ *MVVM 讓你的 Code 清爽又乾淨。 *2-way Data Binding 保證你藥到病除。 *Directive 讓你擴展 HTML,享受自在的樂趣。 AngularJS 是一個極其優美的前端架構,使用它,讓你的開發路更有趣,更有成就感~
AngularJS training in Luster
AngularJS training in Luster
Jason Chung
痞客邦內部前端技術會議分享
webpack 入門
webpack 入門
Anna Su
Angular.js & ASP.NET in Study4
Angular.js & ASP.NET in Study4
Kyle Shen
ReactJs完整的介紹
React js
React js
國昭 張
分享 Angular 啟動 Component 的小技巧
ModernWeb 2017 angular component
ModernWeb 2017 angular component
Chieh Kai Yang
Basic and level 101 introduction to Single-Page Application (SPA) design principles.
Single-Page Application Design Principles 101
Single-Page Application Design Principles 101
Jollen Chen
Introducing Facebook's React.js.
React.js what do you really mean?
React.js what do you really mean?
昱安 周
分享Goodnight的開發之路 我的看法也不一定正確,有任何想法歡迎討論。
React Native on Android
React Native on Android
萬皇 楊
用Maven管理專案的依賴關係
用Maven管理專案的依賴關係
用Maven管理專案的依賴關係
Huang Bruce
使用Angular.js開發大型系統架構 講者:小風 講者簡介: 課程簡介:如何使用Angular.js的特性讓程式碼更好維護。輕鬆打造行動版網頁,實現SPA(Single Page Application)。 完整的JavaScript程式碼測試解決方案。這次的主題將向大家介紹如何使用Angular.js開發大型網站架構, 並且讓程式碼兼具可維護性,提供一個高品質的前端Javascript解決方案。 課程時間:70 分鐘
Angular js twmvc#17
Angular js twmvc#17
twMVC
在 Web 的世界裡,推坑是唯一不變的真理,有好的技術,就是要拿出來一起分享。想當年,AngularJS 的出現,帶給大家的是一次又一次的驚喜,但這高潮迭起的學習曲線,著實讓人又愛又恨。大家也見識過 React 的絢麗登場,效能優異的 VDOM 技術霎時震攝了不少前端攻城獅,不過能力越強,責任也就越大,隨之而來的便是架構上的混亂與不知所措。現在,Angular 2 的到來,不但挾帶強大的架構優勢與全新的元件化技術降低學習門檻,優異的 TypeScript 與各式開發工具的火力支援更是如虎添翼,如果再算上國內外龐大的社群基礎,可預見的必在這活熱的前端世界掀起一場絢麗的戰火。本堂講座,將帶大家快快樂樂上手 Angular 2 網站開發框架。
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
Will Huang
2009/10/07 meeting
2009/10/07 meeting
Che-Hsien Lin
React Native + Redux
React Native + Redux
React Native + Redux
Ch Rick
錄影重播: https://www.facebook.com/will.fans/videos/1824473347581801/ 有很多人在不同前端框架之間難以抉擇,Angular、React、Vue 傻傻分不清楚,不同的框架自然會有不同的門檻存在,也因此,當前端工程師入坑之後,轉換框架的成本極高,從這個坑跳到另一個坑之後,誰知道這坑是更大、還是更小?到最後,前端框架的選擇卻變成了一種信仰。但我個人認為,初學者要學哪一套框架都沒關係,不過能不能跨出第一步就很難說了。 本次的直播課程,我將帶來一段 Angular 新手上路的入門攻略,帶你一揭 Angular 前端框架的神秘面紗,無論你寫的是 React、寫的是 Vue 或是還在寫 jQuery,通通沒關係,隨時歡迎大家一同參與互動。 最後,我在講解完 Angular 基本觀念與開發流程後,便會開放大家隨意提問,歡迎大家踴躍參與! 請記得推薦好友參加並幫推此活動喔 ※ 本活動將以 Facebook 直播方式進行,請記得訂閱 Will 保哥的技術交流中心的「搶先看」以免錯過直播連結! 落
Angular 4 新手入門攻略完全制霸
Angular 4 新手入門攻略完全制霸
Will Huang
後端工程師當了這麼多年,練就了一身功力,卻敵不過大環境的劇烈變遷。前端工程近幾年的的發展相當迅速,成為 Web 開發的主要角色。不過,這個情勢可能在不久的將來即將翻盤,因為 WebAssembly 的出現,讓後端開發者也能用熟悉的程式語言與框架,開發出即時互動的 SPA 網站應用程式。本次演說,將帶來 .NET 最新最夯的 Blazor 框架,讓你迅速了解如何利用 C#/Razor 與 HTML5 開發出優異的網站應用程式。 Modern Web 2018 👉 http://modernweb.tw/
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
Will Huang
Sharing material for VueJS without sample code.
How tovuejs
How tovuejs
Daniel Chou
Angular 在 2018 十月推出 v7.0 版本,不但大幅降低應用程式大小,提升執行速度,在開發流程上的效率改善更是顯著。本次演說將為大家帶來 Angular 7 各種全新特性與改進項目,讓你體驗 Angular 開發框架的強大魅力!
Angular 7 全新功能探索 (Angular Taiwan 2018)
Angular 7 全新功能探索 (Angular Taiwan 2018)
Will Huang
Template-Driven v.s. Model-Driven
Angular 2 Taiwan 小聚 Forms 介紹
Angular 2 Taiwan 小聚 Forms 介紹
Jeff Wu
「我是一個前端工程師,每次要進行頁面套版時,都要等後端工程師寫好 API 才能測試,我覺得很痛苦,但公司的後端我又叫不動,有沒有甚麼方法可以簡單的設計出 RESTful API,讓我可以立即套版使用?我不想每次都苦苦哀求後端工程師快點生出 API 給我!」這是之前某位學生告訴我的一段話,也想必是許多前端工程師的痛,現在,你可以不一樣! 我將在這場分享中講解如何利用 JSON Server 快速建立 RESTful API 服務,讓前端工程師可以在完全沒有後端開發能力的情況下,自行設計出任意格式的 API 讓自己使用。本次直播完全免費,當天還會簡單示範如何在 Angular 使用 Http 服務元件呼叫自製的 API!
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
Will Huang
Webpack 是德國開發者 Tobias Koppers 開發的模組整合工具,但Webpack 並 不是一般的前端打包工具,透過模組系統將 CSS 、圖片與其他資源打包至 JS 中,更能預處理 less、sass、jsx 等語法。在日新月異的前端技術中,擁有好的工具和技術,才能獲得更好的作品和成就感,就讓我們一同來瞧瞧這包達人的厲害之處~
Honey's Data Dinner#7 webpack 包達人(入門)
Honey's Data Dinner#7 webpack 包達人(入門)
beehivedata
React.js introduction for people who know just enough jquery to get by
只需要懂Jquery也能學react js
只需要懂Jquery也能學react js
Justin Wu
more examples for learning react.js
透過範例學習React (react tutorial 2)
透過範例學習React (react tutorial 2)
Justin Wu
More Related Content
What's hot
2014 達暉資訊教育訓練課程 - AngularJS 課程簡介: 想要開發複雜的互動網頁,卻被拉哩拉咂的 JS 和 HTML 搞得暈頭轉向? 還在為處理大量的動態資料顯示感到厭煩? 想猶如造物主般的自己創造自己的 HTML 標籤? 來試試 AngularJS 吧 ~ *MVVM 讓你的 Code 清爽又乾淨。 *2-way Data Binding 保證你藥到病除。 *Directive 讓你擴展 HTML,享受自在的樂趣。 AngularJS 是一個極其優美的前端架構,使用它,讓你的開發路更有趣,更有成就感~
AngularJS training in Luster
AngularJS training in Luster
Jason Chung
痞客邦內部前端技術會議分享
webpack 入門
webpack 入門
Anna Su
Angular.js & ASP.NET in Study4
Angular.js & ASP.NET in Study4
Kyle Shen
ReactJs完整的介紹
React js
React js
國昭 張
分享 Angular 啟動 Component 的小技巧
ModernWeb 2017 angular component
ModernWeb 2017 angular component
Chieh Kai Yang
Basic and level 101 introduction to Single-Page Application (SPA) design principles.
Single-Page Application Design Principles 101
Single-Page Application Design Principles 101
Jollen Chen
Introducing Facebook's React.js.
React.js what do you really mean?
React.js what do you really mean?
昱安 周
分享Goodnight的開發之路 我的看法也不一定正確,有任何想法歡迎討論。
React Native on Android
React Native on Android
萬皇 楊
用Maven管理專案的依賴關係
用Maven管理專案的依賴關係
用Maven管理專案的依賴關係
Huang Bruce
使用Angular.js開發大型系統架構 講者:小風 講者簡介: 課程簡介:如何使用Angular.js的特性讓程式碼更好維護。輕鬆打造行動版網頁,實現SPA(Single Page Application)。 完整的JavaScript程式碼測試解決方案。這次的主題將向大家介紹如何使用Angular.js開發大型網站架構, 並且讓程式碼兼具可維護性,提供一個高品質的前端Javascript解決方案。 課程時間:70 分鐘
Angular js twmvc#17
Angular js twmvc#17
twMVC
在 Web 的世界裡,推坑是唯一不變的真理,有好的技術,就是要拿出來一起分享。想當年,AngularJS 的出現,帶給大家的是一次又一次的驚喜,但這高潮迭起的學習曲線,著實讓人又愛又恨。大家也見識過 React 的絢麗登場,效能優異的 VDOM 技術霎時震攝了不少前端攻城獅,不過能力越強,責任也就越大,隨之而來的便是架構上的混亂與不知所措。現在,Angular 2 的到來,不但挾帶強大的架構優勢與全新的元件化技術降低學習門檻,優異的 TypeScript 與各式開發工具的火力支援更是如虎添翼,如果再算上國內外龐大的社群基礎,可預見的必在這活熱的前端世界掀起一場絢麗的戰火。本堂講座,將帶大家快快樂樂上手 Angular 2 網站開發框架。
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
Will Huang
2009/10/07 meeting
2009/10/07 meeting
Che-Hsien Lin
React Native + Redux
React Native + Redux
React Native + Redux
Ch Rick
錄影重播: https://www.facebook.com/will.fans/videos/1824473347581801/ 有很多人在不同前端框架之間難以抉擇,Angular、React、Vue 傻傻分不清楚,不同的框架自然會有不同的門檻存在,也因此,當前端工程師入坑之後,轉換框架的成本極高,從這個坑跳到另一個坑之後,誰知道這坑是更大、還是更小?到最後,前端框架的選擇卻變成了一種信仰。但我個人認為,初學者要學哪一套框架都沒關係,不過能不能跨出第一步就很難說了。 本次的直播課程,我將帶來一段 Angular 新手上路的入門攻略,帶你一揭 Angular 前端框架的神秘面紗,無論你寫的是 React、寫的是 Vue 或是還在寫 jQuery,通通沒關係,隨時歡迎大家一同參與互動。 最後,我在講解完 Angular 基本觀念與開發流程後,便會開放大家隨意提問,歡迎大家踴躍參與! 請記得推薦好友參加並幫推此活動喔 ※ 本活動將以 Facebook 直播方式進行,請記得訂閱 Will 保哥的技術交流中心的「搶先看」以免錯過直播連結! 落
Angular 4 新手入門攻略完全制霸
Angular 4 新手入門攻略完全制霸
Will Huang
後端工程師當了這麼多年,練就了一身功力,卻敵不過大環境的劇烈變遷。前端工程近幾年的的發展相當迅速,成為 Web 開發的主要角色。不過,這個情勢可能在不久的將來即將翻盤,因為 WebAssembly 的出現,讓後端開發者也能用熟悉的程式語言與框架,開發出即時互動的 SPA 網站應用程式。本次演說,將帶來 .NET 最新最夯的 Blazor 框架,讓你迅速了解如何利用 C#/Razor 與 HTML5 開發出優異的網站應用程式。 Modern Web 2018 👉 http://modernweb.tw/
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
Will Huang
Sharing material for VueJS without sample code.
How tovuejs
How tovuejs
Daniel Chou
Angular 在 2018 十月推出 v7.0 版本,不但大幅降低應用程式大小,提升執行速度,在開發流程上的效率改善更是顯著。本次演說將為大家帶來 Angular 7 各種全新特性與改進項目,讓你體驗 Angular 開發框架的強大魅力!
Angular 7 全新功能探索 (Angular Taiwan 2018)
Angular 7 全新功能探索 (Angular Taiwan 2018)
Will Huang
Template-Driven v.s. Model-Driven
Angular 2 Taiwan 小聚 Forms 介紹
Angular 2 Taiwan 小聚 Forms 介紹
Jeff Wu
「我是一個前端工程師,每次要進行頁面套版時,都要等後端工程師寫好 API 才能測試,我覺得很痛苦,但公司的後端我又叫不動,有沒有甚麼方法可以簡單的設計出 RESTful API,讓我可以立即套版使用?我不想每次都苦苦哀求後端工程師快點生出 API 給我!」這是之前某位學生告訴我的一段話,也想必是許多前端工程師的痛,現在,你可以不一樣! 我將在這場分享中講解如何利用 JSON Server 快速建立 RESTful API 服務,讓前端工程師可以在完全沒有後端開發能力的情況下,自行設計出任意格式的 API 讓自己使用。本次直播完全免費,當天還會簡單示範如何在 Angular 使用 Http 服務元件呼叫自製的 API!
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
Will Huang
Webpack 是德國開發者 Tobias Koppers 開發的模組整合工具,但Webpack 並 不是一般的前端打包工具,透過模組系統將 CSS 、圖片與其他資源打包至 JS 中,更能預處理 less、sass、jsx 等語法。在日新月異的前端技術中,擁有好的工具和技術,才能獲得更好的作品和成就感,就讓我們一同來瞧瞧這包達人的厲害之處~
Honey's Data Dinner#7 webpack 包達人(入門)
Honey's Data Dinner#7 webpack 包達人(入門)
beehivedata
What's hot
(20)
AngularJS training in Luster
AngularJS training in Luster
webpack 入門
webpack 入門
Angular.js & ASP.NET in Study4
Angular.js & ASP.NET in Study4
React js
React js
ModernWeb 2017 angular component
ModernWeb 2017 angular component
Single-Page Application Design Principles 101
Single-Page Application Design Principles 101
React.js what do you really mean?
React.js what do you really mean?
React Native on Android
React Native on Android
用Maven管理專案的依賴關係
用Maven管理專案的依賴關係
Angular js twmvc#17
Angular js twmvc#17
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
快快樂樂學會 Angular 2 網站開發框架 (Modern Web 2016)
2009/10/07 meeting
2009/10/07 meeting
React Native + Redux
React Native + Redux
Angular 4 新手入門攻略完全制霸
Angular 4 新手入門攻略完全制霸
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
How tovuejs
How tovuejs
Angular 7 全新功能探索 (Angular Taiwan 2018)
Angular 7 全新功能探索 (Angular Taiwan 2018)
Angular 2 Taiwan 小聚 Forms 介紹
Angular 2 Taiwan 小聚 Forms 介紹
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
進擊的前端工程師:今天就用 JSON Server 自己打造 API 吧!
Honey's Data Dinner#7 webpack 包達人(入門)
Honey's Data Dinner#7 webpack 包達人(入門)
Viewers also liked
React.js introduction for people who know just enough jquery to get by
只需要懂Jquery也能學react js
只需要懂Jquery也能學react js
Justin Wu
more examples for learning react.js
透過範例學習React (react tutorial 2)
透過範例學習React (react tutorial 2)
Justin Wu
Introduction to React JS library and some of the fundamentals that set it apart from other choices
React JS and why it's awesome
React JS and why it's awesome
Andrew Hull
Presentation for meetup Submit PHP by Anatoliy Sieryi (Full-Stack developer at Binary Studio) Video: https://www.youtube.com/edit?video_id=tzQRcMcO1-I&video_referrer=watch
React 101 by Anatoliy Sieryi
React 101 by Anatoliy Sieryi
Binary Studio
作者為創科資訊 full stack developer。由簡述 React Native 優勢開始;接著講解新手該如何在 iOS 與 Android 平台上開發 React Native 專案,最後以 clone 專案下來後該如何使用結束。 *相關連結一併附在結尾。
創科資訊四月小聚 - React Native Clonecat 101
創科資訊四月小聚 - React Native Clonecat 101
Kent Chen
這是為了讀書會所寫的Sass&Compass基礎介紹,但因為時間問題所以還有很多東西沒有寫進去,但對於初學者來說這應該 很有幫助。
老成的Sass&Compass
老成的Sass&Compass
智遠 成
Let's Redux! by Joseph Chiang Published April 15, 2016 in Technology For people who use React but haven’t tried Redux. - Why - Common issues while people use React - Redux Basic Concept
Let's Redux!
Let's Redux!
Joseph Chiang
如何逐步提升CSS的可利用性、模組化
如何逐步提升CSS的可利用性、模組化
洧杰 廖
Viewers also liked
(8)
只需要懂Jquery也能學react js
只需要懂Jquery也能學react js
透過範例學習React (react tutorial 2)
透過範例學習React (react tutorial 2)
React JS and why it's awesome
React JS and why it's awesome
React 101 by Anatoliy Sieryi
React 101 by Anatoliy Sieryi
創科資訊四月小聚 - React Native Clonecat 101
創科資訊四月小聚 - React Native Clonecat 101
老成的Sass&Compass
老成的Sass&Compass
Let's Redux!
Let's Redux!
如何逐步提升CSS的可利用性、模組化
如何逐步提升CSS的可利用性、模組化
Similar to React基礎教學
introduce how to mix ReactJs and Redux in practice
Redux+react js
Redux+react js
國昭 張
ReactJS introduction - Hello word - sample app
Hello reactJS 0~1 Bulid my first web app
Hello reactJS 0~1 Bulid my first web app
hungjie19
React Native 的出现给了原生应用一个新的选择。我们为什么选择 React?在将 React 集成到一个成熟应用的过程中我们遇到了哪些挑战又是如何解决的呢?我们在这里试着给出一个答案。
W3CTech美团react专场-React Native 初探
W3CTech美团react专场-React Native 初探
美团点评技术团队
share how to integrate react-native with existing iOS & Android App
JSDC 2015 React-Native 實戰
JSDC 2015 React-Native 實戰
Sam Lee
公司內部讀書會
Angularjs
Angularjs
宗哲 謝
上午 基礎教學 --------------- 下午 實戰 使用 ReactStrap 做出購物車平台
高雄前端上課簡報 #29
高雄前端上課簡報 #29
reactmaker9527
@zetaozhang sztechparty-20120415
Meteor
Meteor
Tencent
React Native & V2HOT
React Native & V2HOT
React Native & V2HOT
Xcat Liu
some GWT RPC tutorial
Gwt rpc
Gwt rpc
Roy Chen
react.js and react native
react native by letv
react native by letv
feeloc
@ QCon Beijing 2012
合久必分,分久必合
合久必分,分久必合
Qiangning Hong
结合一些项目实践,通过网上一些资料,给团队演讲的ppt
Thinking in React by Deot
Thinking in React by Deot
荣德 周
使用 React Native 開發 App 教學
React Native App 設計與開發專題研習課程 004
React Native App 設計與開發專題研習課程 004
信宏 陳
Asp.net mvc網站的從無到有
Asp.net mvc網站的從無到有
Wade Huang
Front-end devops experience sharing, focused on how the devops culture started within our team and how we do it using Jenkins pipeline.
Frontend Devops at Cloudinsight
Frontend Devops at Cloudinsight
Yan Wang
.NET Core 已經出到2.1 版,即將推出3.0,企業是否該選擇導入 .NET Core作為內部開發標準,導入前應該注意哪些事項?降低整體導入的阻力,又或是真的需要採用 .NET Core開發嗎? 善用Azure DevOps讓.NET Core 發揮更大優勢,並結合Container,提升.NET Core在企業內部持續交付和持續整合優勢
[2018 .NET Conf].NET Core與Azure DevOps應用於企業開發
[2018 .NET Conf].NET Core與Azure DevOps應用於企業開發
Edward Kuo
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
Jia Mi
廣宣學堂
企業導入微服務實戰 - updated
企業導入微服務實戰 - updated
Paul Chao
https://www.facebook.com/broadmission
廣宣學堂: 企業導入微服務實戰
廣宣學堂: 企業導入微服務實戰
Paul Chao
廣宣學堂
企業導入微服務實戰 - updated
企業導入微服務實戰 - updated
Paul Chao
Similar to React基礎教學
(20)
Redux+react js
Redux+react js
Hello reactJS 0~1 Bulid my first web app
Hello reactJS 0~1 Bulid my first web app
W3CTech美团react专场-React Native 初探
W3CTech美团react专场-React Native 初探
JSDC 2015 React-Native 實戰
JSDC 2015 React-Native 實戰
Angularjs
Angularjs
高雄前端上課簡報 #29
高雄前端上課簡報 #29
Meteor
Meteor
React Native & V2HOT
React Native & V2HOT
Gwt rpc
Gwt rpc
react native by letv
react native by letv
合久必分,分久必合
合久必分,分久必合
Thinking in React by Deot
Thinking in React by Deot
React Native App 設計與開發專題研習課程 004
React Native App 設計與開發專題研習課程 004
Asp.net mvc網站的從無到有
Asp.net mvc網站的從無到有
Frontend Devops at Cloudinsight
Frontend Devops at Cloudinsight
[2018 .NET Conf].NET Core與Azure DevOps應用於企業開發
[2018 .NET Conf].NET Core與Azure DevOps應用於企業開發
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
企業導入微服務實戰 - updated
企業導入微服務實戰 - updated
廣宣學堂: 企業導入微服務實戰
廣宣學堂: 企業導入微服務實戰
企業導入微服務實戰 - updated
企業導入微服務實戰 - updated
React基礎教學
1.
REACT 基礎教學 蔡昇倫 2015/12/06
2.
目錄 • React 簡介 •
JSX介紹 • React 介紹 - Component、Array、Props、 Children、PropTypes、DOM、State、Form 、Lifecycle、Ajax • 實作 - 待辦事項 • https://github.com/bbandydd/React- Workshop
3.
REACT 簡介
4.
• 源自Facebook的開源專案 • 由於Facebook認為MVC無法滿足其龐 大的程式碼及架構,每當添加新功能時 ,系統的複雜度成級數增長。
5.
• React 有兩個主要特點 •
1.Virtual DOM:使執行速度加快 • 2. Component:提供重用性
6.
• 操作DOM需要付出昂貴的代價。 • React提供一種不同且有效率的方法更 新操作DOM,最終會取代直接操作 DOM
7.
• React建立一套Virtual DOM來操作DOM •
更新Virtual DOM並不保證馬上影響真實 DOM • Diff算法比較目前及先前DOM,計算出 最小步驟更新真實DOM
8.
• 當頁面發生變化並不是繪製整個DOM • 比對差異為增加黃色節點、刪除粉紅節點
9.
JSX介紹
10.
• JSX語法在React中的目的,是為了要建 立DOM的Element架構。 • 看起來類似XML的語法,用來描述頁面 結構(並不用真的DOM) •
主要目標是提供React內部DOM使用的 語法糖衣。 • <script type=“text/jsx”></script>
11.
12.
• attribute必須避開javascript關鍵字 • class
=> className • JSX需要符合XML格式,標籤必須要結 尾<div />
13.
• 直觀的定義UI展現Model中的數值 • JSX定義為類似HTML的樹狀結構 ,十分簡單易懂,利於維護。
14.
15.
• JSX完全的利用了JavaScript自帶 的語法及特性。 • 這種使用代碼建構畫面的方式,讓 程式碼更加直觀及利於維護。
16.
REACT 介紹
17.
Component • render( )是React的基本方法,用來轉換 成HTML語言,並插入指定的DOM節點。 •
React允許將程式碼封裝成組件,然後像 插入HTML標籤一樣,在網頁中加入這個 組件。 • demo01 - Component
18.
Array • JSX允許在模板插入Javascript變數 ,如果變數是一個陣列,則將陣列 中的內容加到模板中。 • demo02
- Array
19.
Props • 父元件傳遞資訊給子元件,子元件 內部可以用props取得。 • <Hello
name="Andy" />,使用 this.props.name就可以取得name屬 性 • demo03 - Props
20.
Children • this.props.children表示組件的所有子節點 。 • <Hello> •
<p>Hello</p> • <p>World</p> • </Hello> • demo04 - Children
21.
PropTypes • 組件的屬性可以接受任何值,有時需要 驗證輸入的參數是否符合要求。 • React.PropTypes用來驗證屬性的型態 。 •
demo05 - PropTypes
22.
DOM • 有時需要從組件取得真實DOM的節 點,就會用到ref屬性。 • <input
type="text" ref="myInput" /> • this.refs.myInput.getDOMNode( ).value • demo06 - DOM
23.
State • React使用狀態和使用者進行互動,藉由 狀態的改變,觸發重新繪製UI • getInitialState:
function(){ • return {liked: true}; • } • this.setState({liked: !this.state.liked}); • demo07 - State
24.
Form • 通過event.target.value取得input 輸入的值。 • textarea、select、radio都屬於這 種方式。 •
demo08 - Form
25.
Lifecycle • Mounting:元件準備寫入DOM • Updating:偵測到狀態改變,準備重新繪製 •
Unmounting:元件正要被DOM移除 • will:進入狀態前 • did:進入狀態後 • demo09 - Lifecycle
26.
Ajax • 通過Ajax取得資訊,請求成功後, 再使用this.setState重新繪製UI • demo10
- Ajax
27.
實作 - 待辦事項
28.
• jQuery • Angular •
React • demo - todoList
Download now