DEV Community

Swetha
Swetha

Posted on

React

React is a JavaScript Library known for front-end development (or user interface). It is popular due to its component-based architecture, Single Page Applications (SPAs), and Virtual DOM for building web applications that are fast, efficient, and scalable.

Virtual DOM
The Virtual DOM (VDOM) is a lightweight, in-memory representation of the real DOM (Document Object Model). It helps React manage UI updates more efficiently by keeping a virtual version of the UI in memory. When changes occur, React updates only the necessary parts of the real DOM, instead of re-rendering everything.

Virtual DOM and Real DOM

Image description

Framework
Framework, on the other hand has defined open or unimplemented functions or objects which the user writes to create a custom application. Because a framework is itself an application, it has a wider scope and includes almost everything necessary to make a user application as per his own needs.
Library
A library is a collection of pre-written code, functions, or resources that developers can use to perform common tasks or add specific features to their applications without having to write the code from scratch.

JSX(JavaScript Xml)
JSX combines HTML and JavaScript in a single syntax, allowing you to create UI components in React. It simplifies rendering dynamic content by embedding JavaScript expressions inside HTML-like tags.

npm and npx
npm is a package manager for JavaScript that is used to install, update, and manage packages (libraries and tools) in a Node.js or React project.
npx is a tool that allows you to run Node.js packages directly from the command line without installing them globally on your system.

Component
React components are independent, reusable building blocks in a React application that define what gets displayed on the UI. They accept inputs called props and return React elements describing the UI.
A component is a building block that encapsulates a piece of the user interface (UI). It defines the structure and behavior of the UI, either by managing its own state or by receiving data through props and rendering content accordingly.

Functional Components
Functional components are a core part of building user interfaces. They are simple, lightweight, and powerful tools for rendering UI and handling logic. Functional components can accept props as input and return JSX that describes what the component should render.
ReactJS functional components are JavaScript functions that return a JSX element, which is a template used to define the component's structure. JSX looks similar to HTML, but it has a special syntax that lets it be converted into JavaScript code.

SPA(Single Page Application)
An SPA is a web application that loads a single HTML page and dynamically updates the content as the user interacts with it. This is typically achieved using JavaScript frameworks like React.
When a user navigates within an SPA, the application does not request new HTML pages from the server. Instead, it uses JavaScript to update the view in the browser.

MPA(Multi Page Application)
An MPA is a traditional web application where each interaction or navigation request results in the browser loading a new page from the server.
Each page is a separate HTML document, and when a user navigates, the browser requests a new page from the server.

Reference Link:
https://www.geeksforgeeks.org/reactjs/react/
https://www.geeksforgeeks.org/reactjs/reactjs-virtual-dom/
https://www.geeksforgeeks.org/software-engineering/software-framework-vs-library/
https://www.geeksforgeeks.org/reactjs/reactjs-jsx-introduction/
https://www.geeksforgeeks.org/reactjs/reactjs-components/
https://www.geeksforgeeks.org/reactjs/reactjs-functional-components/

Top comments (0)