Tech Talk at EIT

1. 提報人：林宗敬 Crab
報告日期：2016.07.29(五)
React

2. 2/18
React ?
2016/07/08(五)

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>

9. 9/18
Using React.js
2016/07/08(五)

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'));

15. 15/18 2016/07/08(五)
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(五)

17. 17/18 2016/06/13(一)
Thank you !

18. 18/18