https://github.com/blackie1019/ReactNetDemo This is a sample for demo how to use .Net MVC5 + Webpack + React + Babel to build Web Application

1. Webpack & Babel Sharing
Blackie.Tsai
Blackie.tsai@xuenn.com
2016/9/20

2. Agenda
• Modularized Javascript
• Webpack Introduction
• Babel Introdcution
• Visual Studio Setup
• Collaborate with .net MVC
• Web Optimize

3. Modularized JavaScript

4. Modularized JavaScript
• Pros
• Encapsulation
• Decoupling
• Organization
• No global scope pollution
• Security
• Re-use
• Cons
• More difficult to release
• Complex dependency

5. Thinking in React

6. Webpack Introduction

7. Webpack - A Module Bundler
• A bundler for javascript and friends. Packs many modules into a few
bundled assets. Code Splitting allows to load parts for the
application on demand. Through "loaders," modules can be
CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript,
LESS, ... and your custom stuff. https://webpack.github.io
• Usage: https://webpack.github.io/docs/tutorials/getting-started/

8. Features
• Performance
• uses async I/O and has multiple caching levels. This makes webpack fast and
incredibly fast on incremental compilations.
• Loaders
• enables use of loaders to preprocess files. This allows you to bundle any static resource way
beyond JavaScript. You can easily write your own loaders using node.js.
• Module Format (AMD/CommonJS)
• supports both AMD and CommonJS module styles.
• Code Splitting
• allows you to split your codebase into multiple chunks. Chunks are loaded asynchronously at
runtime. This reduces the initial loading time.
• Optimizations
• can do many optimizations to reduce the output size of your JavaScript by deduplicating
frequently used modules, minifying, and giving you full control of what is loaded initially and
what is loaded at runtime through code splitting.

9. Webpack flow

10. ReactJS+Webpack Structure

11. Babel Introdcution

12. Babel - A Tool to convert ES6 to ES5
• A Tool to convert ES6 to ES5
• Babel is the most popular tool used to convert ES6 to ES5. It has
various interfaces like a CLI, Node-module and also an online
converter. I use the node module for my apps and use theonline
version to quickly see the differences.
• Why ES6
• 5 JavaScript “Bad” Parts That Are Fixed In ES6
• Modularized for React, Babel can convert JSX syntax and strip out type
annotations.

13. Environment Setup

14. Visual Studio 2015 with latest update
• https://blogs.msdn.microsoft.com/visualstudio/2015/06/10/javas
cript-editor-improvements-in-visual-studio-2015/
• https://www.visualstudio.com/en-us/news/vs2015-update1-
vs.aspx
• React's JSX is now natively supported
• ECMAScript 2015 (formerly ECMAScript 6) support

15. WebPack Task Runner
• https://visualstudiogallery.msdn.microsoft.com/5497fd10-b1ba-
474c-8991-1438ae47012a

16. React Snippet Pack
• https://visualstudiogallery.msdn.microsoft.com/234d79e9-f0fd-
41e1-a926-850da8e8c7d7

17. NodeJS
• Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript
engine. Node.js uses an event-driven, non-blocking I/O model that
makes it lightweight and efficient.
• Node.js' package ecosystem, npm, is the largest ecosystem of open
source libraries in the world.
• https://nodejs.org/dist/v4.5.0/node-v4.5.0-x64.msi
• https://nodejs.org/dist/v6.6.0/node-v6.6.0-x64.msi

18. [NPM]Webpack
• https://www.npmjs.com/package/webpack
• Project: npm install webpack --save-dev
• Global: npm install webpack –g

19. [NPM]webpack-notifier
• https://www.npmjs.com/package/webpack-notifier
• npm install --save-dev webpack-notifier

20. Webpack+Babel+React

21. Grunt/Gulp for React
• Not all browsers are supporting ES6 yet, so we're going to have to
transpile our ES6 code, turning it into ES5. We're also going to have
to handle 'JSX', the special Javascript that we can use for React. We
also need to play well with existing code.

22. Webpack for React
• Webpack is a bundler. It'll take a bunch of loose Javascript files and
build a single file from the lot

23. Webpack+Babel for React
• Even better, we can configure webpack to run files that match a
certain pattern to go through other 'loaders', which can process the
files further.
• We can use the Babel transpiler to turn an ES6 file to ES5. We just
need the glue to let Webpack use Babel as a loader. That comes in
the form of the Babel Loader:

24. Babel-loader
• This package allows transpiling JavaScript files using Babel and
webpack. https://github.com/babel/babel-loader

25. Dependency
• React uses JSX as the XML-like syntax extension over JavaScript to
specify component tree structure, data flow, and event handlers. JSX
is processed by Webpack module bundler using specific loaders or
convertors.

26. Collaborate with .net
MVC

27. • Demo Download
• Original post : detail of how to setup up front-end in asp.net core
and MVC5, sample is clone from AspNetReactSamples
• Setup
• Install node and NPM
• Go to root directory and use NPM to install js dependency
• npm install
• Build with install nuget dependency
• Run App
Demo

28. Project Structure

29. package.json

30. Layout and View

31. ES6 to ES5(using Babel)

32. Advance Webpack

33. Reference
• 設定開發React的環境
• 設定開發React的環境 - React Hot Loader
• Production optimization with React and Webpack

34. Q & A

35. 11F., No.399, Ruiguang Rd., Neihu Dist., Taipei City 114, Taiwan
TEL: +886 2 2798 8529 Fax: +886 2 2798 8531 Website : www.xuenn.com
THANK YOU!