Troy Miles presented on ReactJS and related technologies. He discussed React which uses a virtual DOM and one-way data flow to build user interfaces. React uses JSX syntax to generate HTML and is component-based. React Router syncs the UI with the URL. Flux and Redux are patterns for managing data flow, with Redux being a predictable state container. Components are used to build reusable UI, and props are used to pass data between components.

1. ReactJS.NET
SoCal .NET 5 Apr 2017

2. Troy Miles
• Troy Miles aka the RocknCoder
• 38 years of programming
experience
• Speaker and author
• bit.ly/rc-jquerybook
• rockncoder@gmail.com
• @therockncoder
• Now a lynda.com Author!

3. Build Mobile Apps!
• Develop mobile apps with
Ionic and AngularJS
• Learn the Ionic CLI
• Fetch data via ajax
• Deploy your app to Android &
iOS
• bit.ly/ionicvideo

5. Follow Me
• Talks
• Webcasts
• Free stuff
• Tips, tricks, tools
• and general code nerd stuff
• @therockncoder

6. PS Tech Workshops
• Angular Bootcamp, April 29th & 30th
• Intro to React, May 5th & 6th
• 20% off tonight only with discount code:
• ROCKNCODER20
• http://peoplespace.us/javascript/

7. Agenda
• Intro
• React
• Redux
• Components
• JSX
• Props
• States
• Parent/Child
• Summary

8. React
• A JavaScript library for building user interfaces
• Created by Facebook & Instagram
• Initial release March 2013
• Current version 15.4.2

9. React
• Virtual DOM
• One-way data flow
• JSX - JavaScript eXtension allows HTML generation
• Component-based

10. React Router
• A complete routing library for React
• Keeps UI in sync with URL

11. Flux
• Application architecture for building user interfaces
• Pattern for managing data flow in your app
• One way data flow
• 4 main parts: Dispatcher, Store, Action, & View

12. The 4 main parts
• Dispatcher: receives actions & dispatches them to
stores
• Store: holds the data of an app
• Action: define app’s internal API
• View: displays the data from stores

14. Redux
• A predictable state container for JS apps
• Works well with React Native
• Inspired by Flux
• Single store for the entire app
• Makes it easier to hot-load your app

15. components

16. props
• pass data from
• Accessible this.props.XXX

17. The mandatory
Todo App

18. Links
• https://facebook.github.io/react/
• https://reactjs.net/
• https://facebook.github.io/flux/
• https://github.com/reactjs/react-redux
• https://github.com/ReactTraining/react-router

19. Summary
• React is pretty easy to understand and use
• ReactJS.NET makes adding react to ASP.NET easy