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

2. Please support our valuable sponsors

3. 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

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

5. 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

6. 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

7. 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.

8. Let’s get started
DEMO TIME

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

10. Security
Security
Client
Server
Show the “right” thing

11. Let’s continue
DEMO TIME

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

13. Thank you