Peter Donker Bring2mind peter@bring2mind.net React JS 101 Peter Donker Bring2mind peter@bring2mind.net

Please support our valuable sponsors

Co-founder of DNN Connect Association Bring2mind: Document Exchange Who am I? Co-founder of DNN Connect Association Bring2mind: Document Exchange DNN “Core team” member/MVP DNN enthusiast and tinkerer Various open source modules https://github.com/donker

What is React JS? Open Source JS library maintained by Facebook http://reactjs.com Focuses on keeping what you *see* on screen in sync with your data Used for Facebook, Imgur, Paypal, Whatsapp, etc

Things to keep apart React JS React Native Flux Library to manage view state React Native Library to create native apps for mobile platforms using the React paradigm Flux Pattern to complement React to aid in data flow

Highlights and Concepts Virtual DOM React takes care of managing the real DOM for you Makes things faster through diff Synthetic Events Makes for a simpler model to program against Unidirectional data flow Makes it simpler to grasp where your data is going State and Props State is your data and you pass down data through props Components You build atomic components which are nested It’s a tree: You have just a single top level component

Many resources on the web for this. Google it. React vs Angular Many resources on the web for this. Google it. Most heard observations: Not the same thing: Angular is a framework, React more of a view engine React is faster Angular separates JS from HTML, React mixes them entirely Angular takes care of 2 way data binding. In React you need to do some extra steps.

Let’s get started DEMO TIME

React and DNN Challenges Need module encapsulation Need localization Need to respect (DNN) security Minimize data requests to set things up

Security Security Client Server Show the “right” thing

Let’s continue DEMO TIME

Conclusions Great for certain scenarios Can be used in a module and integrate with DNN

Thank you