[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"detail-sidebar-cat-0-en-105":3,"doc-seo-489287-105":59,"doc-detail-489287-en":130},{"code":4,"msg":5,"data":6},0,"success",[7,13,18,23,28,33,38,43,48,51,55],{"id":8,"doc_module":4,"doc_module_name":9,"category_name":10,"show_sort_weight":11,"slug":12},1,"Document","Story & Novel",90,"story-novel",{"id":14,"doc_module":4,"doc_module_name":9,"category_name":15,"show_sort_weight":16,"slug":17},2,"Literature",80,"literature",{"id":19,"doc_module":4,"doc_module_name":9,"category_name":20,"show_sort_weight":21,"slug":22},4,"Exam",70,"exam",{"id":24,"doc_module":4,"doc_module_name":9,"category_name":25,"show_sort_weight":26,"slug":27},5,"Comic",60,"comic",{"id":29,"doc_module":4,"doc_module_name":9,"category_name":30,"show_sort_weight":31,"slug":32},6,"Technology",50,"technology",{"id":34,"doc_module":4,"doc_module_name":9,"category_name":35,"show_sort_weight":36,"slug":37},7,"Healthcare",40,"healthcare",{"id":39,"doc_module":4,"doc_module_name":9,"category_name":40,"show_sort_weight":41,"slug":42},8,"Research & Report",30,"research-report",{"id":44,"doc_module":4,"doc_module_name":9,"category_name":45,"show_sort_weight":46,"slug":47},9,"Religion & Spirituality",20,"religion-spirituality",{"id":46,"doc_module":4,"doc_module_name":9,"category_name":49,"show_sort_weight":46,"slug":50},"World Cup","world-cup",{"id":52,"doc_module":4,"doc_module_name":9,"category_name":53,"show_sort_weight":52,"slug":54},10,"Lifestyle","lifestyle",{"id":56,"doc_module":4,"doc_module_name":9,"category_name":57,"show_sort_weight":24,"slug":58},19,"General","general",{"code":4,"msg":60,"data":61},"ok",{"site_id":62,"language":63,"slug":64,"title":65,"keywords":66,"description":67,"schema_data":68,"social_meta":123,"head_meta":125,"extra_data":127,"updated_unix":129},105,"en","20cs3603-unit-4-react-js-and-javascript-overview","20CS3603 Unit-4 - React JS and JavaScript Overview","","React JS and JavaScript concepts are organized into a unit syllabus explaining why large web apps need efficient UI rendering. It contrasts slow direct DOM updates with React’s component-based architecture, Virtual DOM, and reconciliation to update only required elements. The notes cover JSX basics, unidirectional data flow, React Router and state management themes, plus practical setup using create-react-app and an alternative workflow with Vite, including key folder roles and npm commands.",{"@graph":69,"@context":122},[70,84,105],{"@type":71,"itemListElement":72},"BreadcrumbList",[73,77,79,82],{"item":74,"name":75,"@type":76,"position":8},"https://docshare.wps.com","Home","ListItem",{"item":78,"name":9,"@type":76,"position":14},"https://docshare.wps.com/document/",{"item":80,"name":20,"@type":76,"position":81},"https://docshare.wps.com/document/exam/",3,{"item":83,"name":65,"@type":76,"position":19},"https://docshare.wps.com/document/20cs3603-unit-4-react-js-and-javascript-overview/489287/",{"url":83,"name":65,"@type":85,"image":86,"author":91,"headline":65,"publisher":94,"fileFormat":97,"inLanguage":63,"description":67,"dateModified":98,"datePublished":99,"encodingFormat":97,"isAccessibleForFree":100,"interactionStatistic":101},"DigitalDocument",{"url":87,"@type":88,"width":89,"height":90},"https://docshare.wps.com/thumbnails/20cs3603-unit-4-react-js-and-javascript-overview/489287.png","ImageObject",300,407,{"name":92,"@type":93},"acoobca","Person",{"url":74,"name":95,"@type":96},"DocShare","Organization","application/pdf","2026-10-30","2026-10-01",true,{"@type":102,"interactionType":103,"userInteractionCount":29},"InteractionCounter",{"@type":104},"ViewAction",{"@type":106,"mainEntity":107},"FAQPage",[108,114,118],{"name":109,"@type":110,"acceptedAnswer":111},"Why does React avoid updating the entire UI through direct JavaScript DOM changes?","Question",{"text":112,"@type":113},"Directly updating each like/photo in the UI causes significant overhead, making pages slow and unresponsive. React improves efficiency by using a Virtual DOM and reconciliation to update only required elements.","Answer",{"name":115,"@type":110,"acceptedAnswer":116},"What is reconciliation in React?",{"text":117,"@type":113},"React Virtual DOM compares with the Actual DOM and updates or re-renders the necessary elements instead of modifying the entire tree. This process is called reconciliation.",{"name":119,"@type":110,"acceptedAnswer":120},"How can developers start a new React app using create-react-app or Vite?",{"text":121,"@type":113},"With create-react-app, run npm install -g create-react-app and then create-react-app my-app, followed by npm start. With Vite, use npm create vite@latest my-app --template react, then install dependencies and run npm run dev.","https://schema.org",{"og:url":83,"og:type":124,"og:title":65,"og:site_name":95,"og:description":67},"article",{"robots":126,"canonical":83},"index,follow",{"doc_id":128,"site_id":62},489287,1791122676,{"code":4,"msg":5,"data":131},{"doc_id":128,"user_id":132,"nickname":92,"user_avatar":133,"doc_module":4,"category_id":19,"category_name":20,"doc_title":65,"doc_description":67,"doc_content":134,"file_id":135,"file_url":136,"file_type":137,"file_size":138,"view_count":29,"is_deleted":4,"is_public":8,"is_downloadable":8,"audit_status":8,"page_count":139,"language":140,"language_code":63,"site_id":62,"html_lang":63,"table_of_contents":141,"faqs":142,"seo_title":143,"seo_description":67,"update_tm":144,"read_time":145,"preview_page_count":4},3985747870733,"https://ap-avatar.wpscdn.com/davatar_a8503ba1806abce46bf441b54a3ca4cd","React JS  \nFacebook, a modern web application has over 1.6 billion daily users and handles around 150000 messages and 500000 likes every minute. Updating each like/photo in the UI using JavaScript has significant overhead therefore, data loads slowly and the page becomes unresponsive. Developing and maintaining applications of this size is also difficult.  \nReact JS library helps build the user interface of large applications.  \nSyllabus  \nHow React Works-Page Setup, React Elements, ReactDOM, React, components, React with JSXReact Elements as JSX, Babel, Recipes as JSX, React Fragments, Intro to webpack,  \nReact State Management-Building Forms, Incorporating Data-Requesting Data, Virtualized Lists-Creating a Fetch Hook, Creating a Fetch Component, Handling Multiple  \nRequests, Memozing Values, React Router.  \nJavascript  \n• Java script uses DOM(document Object Model) API to render the content in the browser(to user)  \n• Java script modifies the DOM tree to display the modified content in the browser.  \nCreates User Interface(UI) using components and elements using jsx language.  \nReact library  \nCreates a Virtual DOM using ReactDOM  \nVirtual DOM compares with Actual DOM and updates/re-renders required elements instead of updating entire tree  \nKnown as Reconciliation  \nReact JS  \n• React JS is a JavaScript library for creating user interfaces.  \n• React library provides tools to create elements and components.  \n• ReactDOM contains tools necessary to render React elements in the browser.  \n• The DOM API is a collection of objects that JavaScript can use to interact with the browser to modify the DOM.  \n• React is a library that’s designed to update the browser DOM for user specifications.  \n• The browser DOM is made up of DOM elements. Similarly, the React DOM is made up of React elements  \nFeatures  \n1. Component-based architecture  \n2. Virtual DOM  \n3. Unidirectional data flow  \n4. JSX (java script + XML)  \n5. SEO performance  \nReact JS  \n1. React JS is a JavaScript library for creating user interfaces.  \n2. ReactJS Optimizes the DOM manipulation by writing very simple code.  \n3. React is used for applications where the data keeps changing very frequently  \nFeatures  \n1. Component-based architecture  \n2. Virtual DOM  \n3. Unidirectional data flow  \n4. JSX (java script + XML)  \n5. SEO performance  \nThe create-react-app tool can be used as it provides a modern build setup allowing to create and run React applications with minimal configuration. The create-react-app is a command-line interface (CLI) .  \nInstall create-react-app by running the following command:  \n> npm install-g create-react-app  \nOnce the installation is done, create a React app using the below command:  \n>create-react-app my-app  \nCreation of React Application using tools  \n1. Using create-react-app [https://create-react-app.dev/docs/getting-started/](https://create-react-app.dev/docs/getting-started/)  \n[npx create-react-app my-app](npx create-react-app my-app)[ ](npx create-react-app my-app)[cd my-app](cd my-app)  \nnpm start  \nCreate React App is deprecated  \n2. Using vite  \n\\# npm 7+, extra double-dash is needed: npm create vite@latest my-app-- --template react  \ncd my-app npm install  \nnpm run dev  \n| node_modules | All the node module dependencies are created in this folder |\n| --- | --- |\n| public | This folder contains the public static assets of the application |\n| public/index.html | This is the first page that gets loaded when you run the application |\n| src | All application related files/folders are created in this folder |\n| src/index.js | This is the entry point of the application |\n| package.Json | Contains the dependencies of the React application |\n\nTo run the application, navigate to the folder my-app and run the command as shown below  \nD:/>my-app>npm start  \nconst root = ReactDOM.createRoot (document.getElementById(\"root\")); root.render (  \n\u003CApp />  \n);  \nReactDOM. render is used to render an element or component to the virtual DOM.  \n➢ The","cbCair01DHXPE2WU","https://ap.wps.com/l/cbCair01DHXPE2WU","pdf",595206,26,"English","# How React Works\n## Page Setup and React Elements\n## React State Management and React Router\n## Virtualized Lists and Fetch Hook\n# JavaScript and DOM Basics\n## DOM API and DOM Tree Updates\n# React Library Concepts\n## Virtual DOM and Reconciliation\n## Features: Components, JSX, SEO\n# Creating a React Application\n## create-react-app Setup and npm Commands\n## Vite Setup\n## Project Folders and Entry Points\n# Rendering with ReactDOM\n## createRoot and root.render\n## App.js and index.js Roles","[{\"question\":\"Why does React avoid updating the entire UI through direct JavaScript DOM changes?\",\"answer\":\"Directly updating each like/photo in the UI causes significant overhead, making pages slow and unresponsive. React improves efficiency by using a Virtual DOM and reconciliation to update only required elements.\"},{\"question\":\"What is reconciliation in React?\",\"answer\":\"React Virtual DOM compares with the Actual DOM and updates or re-renders the necessary elements instead of modifying the entire tree. This process is called reconciliation.\"},{\"question\":\"How can developers start a new React app using create-react-app or Vite?\",\"answer\":\"With create-react-app, run npm install -g create-react-app and then create-react-app my-app, followed by npm start. With Vite, use npm create vite@latest my-app --template react, then install dependencies and run npm run dev.\"}]","20CS3603 Unit-4 - React JS and JavaScript Overview | PDF",1790821966,66]