Welcome to the ReactLearnings wiki!

Below is the screenshot of a post on Facebook.

The moment one hits “like” to the post, the status of the like changes. This needs to be done in real-time to give the best experience to the Facebook user.

The application of Facebook makes the above changes by updating Document Object Model tree of the page and re-rendering the page in browser. It also takes care about the changes on other user's page if they are browsing the same post.

Considering the application size of Facebook which has more than 1.6 billion daily users and 500,000 “likes” every minutes, it was a challenge to the engineers of Facebook.

They solved this problem by creating React JS library which optimizes DOM manipulation by writing very simple code.

Facebook used React JS for implementing few of its important features like comment box.

---

React JS was created by Jordan Walke, a software engineer at Facebook and open sourced to the world by Facebook and Instagram.

ReactJS, a JavaScript library for creating user interfaces, makes the development of UI components easy and modular.

Component-based architecture: A Component is the smallest unit in a React application. Anything that is to be rendered on the browser can be rendered through components. Components help in maintainability and re-usability.

Virtual DOM: React uses virtual DOM concept for DOM manipulation which improves the performance of the application.

Unidirectional data flow: React’s one-way data flow (also called one-way binding) keeps everything modular and fast and easy to debug.

JSX syntax: React used JSX syntax which is similar to XML and HTML syntax that makes it easy for writing markup and binding events in components.

SEO performance: The SEO performance can be improved using the server-side rendering concept. Isomorphic applications can be developed by using React which increases the SEO performance.

---

Angular is one of the popular frameworks used for UI development. Below is the comparison of React with Angular:

---

Interview Questions-Internal:

What is CDN?

CDN stands for Content Delivery Network. It is a distributed network of servers that provides faster delivery of website content by caching it on multiple servers.

what is Cross Origin Attribute?

A Cross Origin Attribute is a security feature used in web development that allows or restricts scripts, stylesheets, images, and other resources from different domains to interact with each other.

What is Babel?

Babel is a JavaScript transpiler that converts modern JavaScript code into a backward-compatible version that can run in older browsers. It is commonly used in web development to ensure compatibility across different platforms.

What is Webpack?

Webpack is a module bundler for JavaScript applications. It takes modules with dependencies and generates a single bundle that can be loaded by a browser.

Can you name some other bundler?

Some other popular module bundlers are Browserify, Rollup, Parcel, and FuseBox.

What is Package.json and why is it important? package.json is a configuration file in Node.js projects that contains metadata about the project, such as dependencies, scripts, and other project-specific details. It is important because it helps in managing the project's dependencies and automating common tasks.

What is NPM?

NPM stands for Node Package Manager. It is a package manager for Node.js projects that allows developers to install and manage third-party packages and dependencies.

What is GIT? Git is a version control system used in software development to manage code changes and collaborate with other developers. It allows developers to track and revert changes, work on different branches, and merge code changes.

What is a polyfill?

A polyfill is a piece of code that provides functionality that is not natively supported by a browser. It is commonly used to add support for new web APIs and features to older browsers.

if (!Math.sign) { // if the function does not exist // implementation Math.sign = function(number) { if (number > 0) { return 1; } else if (number < 0) { return -1; } else { return 0; } }; }

What is React?

React is a JavaScript library for building user interfaces. It allows developers to create reusable UI components and manage the state of the application efficiently.

Why do we call React a Javascript Library?

We call React a JavaScript library because it is a collection of pre-written JavaScript code that developers can use to build user interfaces for web applications. React provides a set of reusable UI components that can be used to build complex interfaces quickly and efficiently, without having to write all the code from scratch.

Why is React so fast?

React is fast because it uses a virtual DOM (Document Object Model) to update the UI. The virtual DOM is a lightweight copy of the real DOM, and React uses it to track changes to the UI without updating the actual DOM until it's necessary. This approach makes updates faster and more efficient since React only updates the parts of the UI that have changed, rather than the entire UI. Additionally, React uses a process called reconciliation to determine the minimum number of changes required to update the UI, further improving performance. Finally, React provides tools such as code splitting and lazy loading, which help to reduce the initial load time of the application and improve performance.

What are the scripting language that we can use with React?

React is typically used with JavaScript, but it can also be used with other scripting languages that compile to JavaScript, such as TypeScript and CoffeeScript.

What is TypeScript?

TypeScript is a superset of JavaScript that adds optional static typing and other features to the language. It is commonly used in large-scale JavaScript projects to improve code quality and maintainability.

What is Reconciliation in react?

Reconciliation is the process in which React updates the DOM based on changes in a component's state or props. It compares the old and new virtual DOM trees, applies changes only where necessary, and uses algorithms like key-based reconciliation and memorization to optimize the process and improve performance.

Can you explain the concept of a Virtual DOM in React, and how it contributes to performance? The Virtual DOM is a lightweight copy of the actual DOM that React uses to keep track of changes in the UI. When a component's state or props change, React creates a new Virtual DOM tree, compares it to the previous tree, and identifies the specific changes that need to be made to the actual DOM. This allows React to update only the necessary parts of the UI, rather than the entire tree, which contributes to better performance. The Virtual DOM also allows for efficient batch updates and reduces the frequency of expensive DOM operations.

Can you explain the concept of React SSR (Server-Side Rendering), and how it can be used to improve SEO and page load times? React Server-Side Rendering (SSR) involves rendering React components on the server-side and sending the fully-rendered HTML to the client. This approach improves SEO and initial page load times by allowing search engines to crawl and index the fully-rendered HTML content, and by reducing the time needed to download and parse JavaScript files on the client-side.

Can you explain the difference between server-side rendering and client-side rendering in React? Server-side rendering (SSR) and client-side rendering (CSR) are two ways of rendering React components. SSR involves rendering React components on the server-side and sending the fully-rendered HTML to the client, while CSR involves rendering React components on the client-side browser using JavaScript.

SSR is achieved by using Node.js to execute the JavaScript code and generate the HTML markup, which is sent to the client as a complete HTML page. This approach improves SEO and initial page load time, but can be slower for subsequent updates.

CSR involves sending a minimal HTML page and a JavaScript bundle containing the React components and application logic to the client. The browser then downloads the bundle, executes it, and renders the components in the browser. This approach allows for greater interactivity and faster updates, but can be slower for the initial page load.

Can you explain what the DOM(Document Object Model) is and how it is used in web development? The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. In other words, it creates a tree-like structure of the HTML document, allowing developers to manipulate the structure and content of the page through JavaScript. The DOM is used in web development to dynamically update the content of a web page without the need for a full page reload. JavaScript code can manipulate the DOM tree by adding, deleting, or modifying elements and attributes. This enables developers to create dynamic and interactive web pages that respond to user actions and input.

How does the DOM tree structure work, and how is it related to HTML, CSS, and JavaScript? The DOM is a tree-like structure that represents the content of an HTML document, with each node representing an element, attribute, or text. HTML defines the basic structure, CSS styles the content, and JavaScript can manipulate the DOM to modify the content, style, or behavior of the page. The DOM tree is created when the HTML document is parsed by the browser.

How is a node of a DOM tree updated in an application built in React? When the state or props of a component change in React, a new virtual DOM tree is created, which is compared to the previous tree using a diffing algorithm. React identifies the minimal set of changes required to update the actual DOM and uses reconciliation to update only the corresponding nodes that have changed. This process minimizes the number of actual DOM operations that need to be performed.

What is a diffing alogorithm in React?

A diffing algorithm in React is a process that compares the current virtual DOM tree with the previous one and identifies the minimal set of changes required to update the actual DOM. This is done by checking the type, props, and children of each node in the tree and updating only those specific parts of the DOM that need to be changed, rather than updating the entire tree.

What is a SPA or Single Page Application?

A Single Page Application (SPA) is a web application that dynamically updates a single HTML page using JavaScript frameworks, such as React, Angular, or Vue.js. The initial HTML file, JavaScript, and CSS are loaded when the user visits the application, and subsequent interactions with the application trigger updates to the page content without requiring a full page reload. This provides a seamless and responsive user experience.

What is React, and how does ot differ from other front-end frameworks or libraries?

React is a JavaScript library for building user interfaces. It is different from other front-end frameworks or libraries because it focuses only on the view layer, uses a declarative programming style, and has a large and active community.

What is Emmet?

Emmet is a web development tool that helps in writing HTML and CSS code quickly and efficiently. It uses abbreviations or shortcuts to generate code.

---

Introduction - Summary a. What is React

1. React JS is a JavaScript library for creating user interfaces
2. ReactJS Optimizes the DOM manipulation by writing very simple code
3. React is used for applications where the data keeps changing very frequently b. Features​​​​​​​
4. Component-based architecture
5. Virtual DOM
6. Unidirectional data flow
7. JSX
8. SEO performance

---

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

To install create-react-app, following are the steps:

1. Install node.js with version 14+ from Software House or Node.js official site.

You can check the node version installed in your machine by running the following command that displays the node version as follows:

node -v (The expected output should be similar to v17.2.0)

Note: Installing the node modules is prevented if the system is connected to the Infosys network. To overcome this, set specified proxy by entering the following code in the node.js command prompt.

npm config set registry https://infyartifactory.ad.infosys.com/artifactory/api/npm/npm You may skip this step if not using a Infosys asset.

2. Install create-react-app by running the following command:

npm install -g create-react-app

3. Once the installation is done, create a React app using the below command:

create-react-app my-app

The above command creates a project my-app with the below folder structure:

Picture representing ​​​​​​​

​​​​​​​​​​​​​​If you do not want to install create-react-app then you can use the below command to create a React application

D:>npx create-react-app my-app npx is a tool to run node packages without installing binaries

Below is the description of the folder structure:

4. To run the application, navigate to the folder my-app and run the command as shown below:

D:/>my-app>npm start

After successful compilation, the application will be loaded in the browser at the port "http://localhost:3000" as shown below.

Observe the file src/index.js

const root = ReactDOM.createRoot(document.getElementById("root")); root.render( );

ReactDOM.render is used to render an element or component to the virtual DOM.

The first argument specifies what needs to be rendered

The second argument specifies where to render.

The root element is present inside index.html

You need to enable JavaScript to run this app.

Elements can also be rendered by using the ReactDOM.render method as shown below:

const root = ReactDOM.createRoot(document.getElementById('root')); root.render('

'); StrictMode

React.StrictMode: It is a helper component which helps the developers in identifying the problems in the application. The React.StrictMode component does not render any visible UI

StrictMode helps with the below :

Identifying components with unsafe lifecycles Warning about legacy string ref API usage Warning about deprecated findDOMNode usage Detecting unexpected side effects Detecting legacy context API