Lecture "Web Technology and online services: Lesson - ReactJs" provide students with knowledge about: Overview of ReactJS; Virtual DOM; JSX; Components; React Component Lifecycle. Please refer to the detailed content of the lecture! | ReactJs 1 Content Overview of ReactJS Virtual DOM JSX Components React Component Lifecycle Overview of ReactJS 3 Overview of ReactJS React also known as or ReactJS is an open-source front end JavaScript library for building user interfaces or UI components It maintained by Facebook and a community of individual developers and companies React was created by Jordan Walke a software engineer at Facebook who released an early prototype of React called quot FaxJS . It was first deployed on Facebook s News Feed in 2011 and later on Instagram in 2012. On September 26 2017 React was released to the public. On February 16 2019 React was released to the public. On August 10 2020 the React team announced the first release candidate for React notable as the first major release without major changes to the React developer-facing API Virtual DOM 5 Virtual DOM What is DOM The Document Object Model DOM is a cross-platform and language-independent interface that treats an XML or HTML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree. Each branch of the tree ends in a node and each node contains objects. DOM methods allow programmatic access to the tree with them one can change the structure style or content of a document. In React Virtual DOM exists which is like a lightweight copy of the actual DOM every object that exists in the original DOM there is an object for that in React Virtual DOM Manipulating DOM is slow but manipulating Virtual DOM is fast as nothing gets drawn on the screen. 6 How Virtual DOM helps React Each time we change something in our JSX file all the objects that are there in the virtual DOM gets updated. React maintains two Virtual DOM at each time one contains the updated Virtual DOM and one which is just the pre-update version of this updated Virtual DOM. Now it compares the pre-update version with the updated Virtual DOM and figures out
