Understanding React.js: Key Concepts and Highlights
Dive into the world of React.js with a detailed overview of its core concepts, including Virtual DOM, Unidirectional Data Flow, State and Props management, along with the key highlights like faster rendering, simpler programming model, and component-based architecture.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
React JS 101 Peter Donker Bring2mind peter@bring2mind.net #DNNConnect2016
Please support our valuable sponsors #DNNConnect2016
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 #DNNConnect2016
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 #DNNConnect2016
Things to keep apart React JS 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 #DNNConnect2016
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 #DNNConnect2016
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. #DNNConnect2016
Lets get started DEMO TIME #DNNConnect2016
React and DNN Challenges Need module encapsulation Need localization Need to respect (DNN) security Minimize data requests to set things up #DNNConnect2016
Security Security Server Client Show the right thing #DNNConnect2016
Lets continue DEMO TIME #DNNConnect2016
Conclusions Great for certain scenarios Can be used in a module and integrate with DNN #DNNConnect2016
Thank you Questions? Please remember to evaluate the session online #DNNConnect2016
