ReactJS.net
Download as PPTX, PDF0 likes151 views
This document discusses React, a JavaScript library for building user interfaces. It provides an overview of what React is, who uses it, how it compares to other frameworks like Angular and Ember, and how to get started using React in a project. Key points covered include that React was created by Facebook in 2013, supports both websites and native mobile apps, and allows building user interfaces using reusable components.
ReactJS.net
- 3. 3/18 What is React ? •Open-sourced by Facebook mid 2013 •A JavaScript library for building User Interfaces •Support Website and Native App 2016/07/08(五)
- 4. 4/18 Who use React ? 2016/07/08(五) Over 100+ App or Web
- 5. 5/18 2016/07/08(五) Photo from @jwcarrol
- 6. 6/18 2016/07/08(五) React + FLux Angular 2.0 (1.0) Ember 2.0 Size Concerns 132 k 556 k 427 k 2 way binding NO YES YES StackOverflow Questions 6.1 k 127 k 16.9 k GitHub Contributors 531 158 (1331) 536 Easy to Test YES YES NO ES2015 Support YES YES NO Browser Support IE8 + IE8 + IE8 + Mobile Native YES YES NO Support by Facebook Google … MVC View (UI) MVW, MVVM, MVC (Full) NO
- 7. 7/18 M V C 2016/07/08(五) model view controller only cares about the UI !
- 8. 8/18 Data { name: ”Crab” } 2016/07/08(五) Render <div> <span>Crab</span > </div> Component <div> <span>{????}</spa n> </div> Data { name: ”Crab” image: “picture.jpg” } Render <div> <img src=“picture.jpg” /> <span>Crab</span > </div> Component <div> {????} <span>Crab</span > </div>
- 10. 10/18 Server-side Support •Node.js •C# .NET •ASP.NET MVC 3+ •ASP.NET Core •Nashorn JVM, Rails, Php 2016/07/08(五)
- 11. 11/18 2016/07/08(五) How to use it ?
- 12. 12/18 Step by Step (1 / 3) •Select your Project •Use NuGet Package Manager Console •Add react.js 2016/07/08(五) > Install-Package React.Web.Mvc4 > Install-Package react.js
- 13. 13/18 Step by Step (2 / 3) •BundleConfig.cs * • ASP.NET Bundling and Minification 2016/07/08(五) > Install-Package System.Web.Optimization.React bundles.Add(new ScriptBundle("~/bundles/react") .Include("~/Scripts/react/react.js", "~/Scripts/react/react-dom.js")); bundles.Add(new BabelBundle("~/bundles/homeClient") .Include("~/Scripts/jsx/Components/HelloTime.jsx", "~/Scripts/jsx/View/HomeClientRendering.jsx"));
- 14. 14/18 Step by Step (3 / 3) •Hello.jsx •index.cshtml 2016/07/08(五) var Hello = React.createClass ({ render () { return (<div> <h2><span>Hello,<b>everyone!</b></span></h2> </div>); } }); ReactDOM.render(<Hello />, document.getElementById('Demo'));
- 16. 16/18 Reference & Supplement •Main • React.js • ReactJS.Net •Others information • Who is using React • React Slideshow • Angular2 vs React • Angular vs React vs Ember • Angular vs React 2016/07/08(五)
- 18. 18/18
Editor's Notes
- #4: 下列我用三個point 來特別介紹react 他是一個前端技術 是facebook 在2013推出的open-sourced 目的是使用javascript的語法去解決任何UI呈現的問題 同時他支援 web 及 native app 的撰寫開發
- #5: Why to use React ?
- #6: Why use React? 有其他可以用的前端 javascript lib or framework 大家可以看到上面這張圖，不管是任何地方，都會上述這兩派人馬對立 當然還有其他類似的 像 ember backbone …
- #7: 選那個前端程式都沒有對錯，只有看那一個程式符合你的團隊跟需求
- #9: REACT 的運行方式 資料透過 component 顯示內容 當資料多了一個圖檔，component 有判斷有圖檔時需多一個img標籤，並寫入圖片路徑 大多後端人員或已經習慣寫Angular的人都會選 Angular 因為react是新的library，而且react的寫法對前端人員較為親切，若要推薦我較promo react
- #10: 如何使用react 看時間…
- #11: 提供可運行的平台有三種 導入時，減少原本熟悉C#的後端人員也能參與或使用前端程式 進而增加後端人員學習前端技術的意願 故全部使用 C# 可直接運行，不用加入太多服務(ex. Node.js)
- #12: 快速帶過 下面三個步驟 請大家自己看
- #14: 與原生用法相同 主要是把 jsx 轉成 js 供一般瀏覽器讀取