{"id":34868,"date":"2021-12-31T11:03:00","date_gmt":"2021-12-31T05:33:00","guid":{"rendered":"https:\/\/www.mygreatlearning.com\/blog\/react-js-interview-questions-and-answers\/"},"modified":"2024-11-18T14:00:45","modified_gmt":"2024-11-18T08:30:45","slug":"react-js-interview-questions-and-answers","status":"publish","type":"post","link":"https:\/\/www.mygreatlearning.com\/blog\/react-js-interview-questions-and-answers\/","title":{"rendered":"Top 50 React JS Interview Questions and Answers"},"content":{"rendered":"\n<p>React is an open-source JavaScript framework that allows developers to create simple, quick, and scalable online apps. It is efficient and\u00a0adaptable. React was built by Jordan Walke, a software engineer at Facebook. <\/p>\n\n\n\n<p>It was originally used on Facebook's news feed in 2011 and then on Instagram in 2012. React allows developers with a JavaScript experience to easily create online applications. React is widely regarded as the most rapidly rising JavaScript framework. This blog covers the top React JS Interview Questions that will help you ace your upcoming interview. <\/p>\n\n\n\n<p>Before we dive in, if you want to go beyond basic development skills and learn how AI is transforming modern software engineering, the Generative AI for Software Development program from the McCombs School of Business helps professionals understand how to use generative AI tools to accelerate coding, improve debugging, and build intelligent software workflows. <\/p>\n\n\n\n<p>The program also explores practical applications of AI-assisted development, enabling developers to enhance productivity and integrate AI capabilities into real-world software systems.<\/p>\n\n\n\n<p>Let's get started!<\/p>\n\n\n\n    <div class=\"courses-cta-container\">\n        <div class=\"courses-cta-card\">\n            <div class=\"courses-cta-header\">\n                <div class=\"courses-learn-icon\"><\/div>\n                <span class=\"courses-learn-text\">Texas McCombs<\/span>\n            <\/div>\n            <p class=\"courses-cta-title\">\n                <a href=\"https:\/\/onlineexeced.mccombs.utexas.edu\/genai-for-software-development\" class=\"courses-cta-title-link\">GenAI for Software Development<\/a>\n            <\/p>\n            <p class=\"courses-cta-description\">Build, test, and deploy AI-powered web applications. Gain hands-on experience with full-stack development using Node.js, Express, MongoDB, and React while integrating Generative AI into real-world applications.<\/p>\n            <div class=\"courses-cta-stats\">\n                <div class=\"courses-stat-item\">\n                    <div class=\"courses-stat-icon courses-user-icon\"><\/div>\n                    <span>Live Mentorship<\/span>\n                <\/div>\n                <div class=\"courses-stat-item\">\n                    <div class=\"courses-stat-icon courses-star-icon\"><\/div>\n                    <span>14 Weeks Online Program<\/span>\n                <\/div>\n            <\/div>\n            <a href=\"https:\/\/onlineexeced.mccombs.utexas.edu\/genai-for-software-development\" class=\"courses-cta-button\">\n                Apply Now\n                <div class=\"courses-arrow-icon\"><\/div>\n            <\/a>\n        <\/div>\n    <\/div>\n\n\n\n<p class=\"wp-embed-aspect-16-9 wp-has-aspect-ratio\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-what-is-react\"><strong>1] What is React?<\/strong><\/h3>\n\n\n\n<p>React is a flexible and efficient open source front-end JavaScript library which was developed by Jordan Walke, a software engineer from Facebook in 2011. It used for building user interfaces especially for single page applications. It is used for developing view layer of web and mobile apps. React was first deployed on Facebook\u2019s News Feed in 2011 and later used in Whatsapp and Instagram.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Getting started with React JS | React JS Tutorial for Beginners | Learn React JS | Great Learning\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/KkOBfWpFQMc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-how-to-install-react\"><strong>2] How to install React?<\/strong><\/h3>\n\n\n\n<p>For Installing of React follow below steps:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"step-1-installing-npm\"><strong>STEP 1: Installing NPM<\/strong><\/h4>\n\n\n\n<p>Begin the installation of ReactJS by installing NPM (Node Package Manager).<\/p>\n\n\n\n<p><strong>To install NPM on Ubuntu Linux:<\/strong><\/p>\n\n\n\n<p>$ sudo apt install npm<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The installation is complete, you can verify the version of NPM installed using the command:<\/li>\n<\/ul>\n\n\n\n<p>$ npm \u2013version<\/p>\n\n\n\n<p>The latest version at the time of writing this is v7.6.3 as captured in the output.<\/p>\n\n\n\n<p>Installation of NPM also install Node.JS and check this version.<\/p>\n\n\n\n<p>$ node \u2013version<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The latest version at the time of writing this is v12.22.1 as captured in the output.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"step-2-installing-create-react-app-utility\"><strong>STEP 2: Installing create-react-app utility<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Install the react tool<\/li>\n<\/ul>\n\n\n\n<p>$ sudo npm -g create-react-app<\/p>\n\n\n\n<p>where: -g (Globally install)<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Once install the tool then check his version<\/li>\n<\/ul>\n\n\n\n<p>$ create-react-app \u2013version<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"step-3-create-first-react-app\"><strong>STEP 3: Create first React App<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>$ npx create-react-app app_name<\/li>\n\n\n\n<li>Created a React app&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>$ cd app_name<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Start the application&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>$ npm start<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-what-are-the-features-of-react\"><strong>3] What are the features of React?<\/strong><\/h3>\n\n\n\n<p>The main features of React are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>JSX - JSX stands for Javascript XML. It is a syntax used by ReactJS similar to XML or HTML.&nbsp;<\/li>\n\n\n\n<li>Components - ReactJS application is made up of multiple reusable components, and each component has its own logic and controls.<\/li>\n\n\n\n<li>Virtual DOM - A VirtualDOM is a depiction of original DOM. React uses VirtualDOM instead of RealDOM.<\/li>\n\n\n\n<li>One-way Data Binding - React follows unidirectional data flow or one-way data binding.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"4-what-is-jsx\"><strong>4] What is JSX?<\/strong><\/h3>\n\n\n\n<p>JSX stands for Javascript XML. It is a React extension which allows us to write Javascript codes similar to XML or HTML. The JSX file makes React application robust which boosts its performance. Like XML or HTML, JSX tags have a tag name, attributes, and children.<\/p>\n\n\n\n<p><strong>Example:<\/strong>&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>class App extends React.Component {\n\trender() {\n\t\treturn(\n\t\t\t&lt;div&gt;\n\t\t\t\t&lt;h1&gt; { \u2018HELLO WORLD\u2019 } &lt;\/h1&gt;\n\t\t\t&lt;\/div&gt;\n\t\t)\n\t}\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"5-what-are-the-advantages-of-using-react\"><strong>5] What are the advantages of using React?<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Uses VirtualDOM - As name indicates, VirtualDOM is a virtual representation of RealDOM. React uses VirtualDOM to provide the view. Using VirtualDOM increases the efficiency of React applications.<\/li>\n\n\n\n<li>SEO friendly - React allows developers to develop user engaging&nbsp; interfaces which will be easily navigated in various search engines. It also allows server-side rendering, thus boosts the SEO of an app.<\/li>\n\n\n\n<li>React is focused and easy-to-learn.<\/li>\n\n\n\n<li>It boosts productivity and facilitates further maintenance.<\/li>\n\n\n\n<li>Creating dynamic web applications becomes easier.<\/li>\n\n\n\n<li>Reusable components.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"6-how-to-create-components-in-react\"><strong>6] How to create components in React?<\/strong><\/h3>\n\n\n\n<p>The two possible ways to create components are as follows:<\/p>\n\n\n\n<p>i. Function Components - This is the easiest way to create a component. These are pure JavaScript functions that accept props object as parameter and returns React elements.<\/p>\n\n\n\n<p>Example:&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Function Welcome({msg}) {\n\treturn &lt;h1&gt; {\u2018Hello, ${msg}\u2019} &lt;\/h1&gt;\n}\n<\/code><\/pre>\n\n\n\n<p>ii. Class Components - A class component is a more identified way of defining a React component.&nbsp;<\/p>\n\n\n\n<p>Example:&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Class Welcome extends React.Component {\n\trender() {\n\t\treturn &lt;h1&gt; {\u2018Hello, ${this.props.msg}\u2019} &lt;\/h1&gt;\n\t}\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"7-what-is-the-difference-between-element-and-component\"><strong>7] What is the difference between element and component?<\/strong><\/h3>\n\n\n\n<p>Element - An element is an object describing what you would like to project on the screen in terms of the DOM nodes or other components. Elements can contain other elements in their props. Once a component is created , it's never mutated.<\/p>\n\n\n\n<p>Example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;button class=\u201dgreen\u201d&gt; &lt;\/button&gt;<\/code><\/pre>\n\n\n\n<p>Component - A component is a function or class that accepts an input and returns a React element. It has to keep references to its DOM nodes and to the instances of the child components.<\/p>\n\n\n\n<p>Example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const LogIn = () =&gt; (\n\t&lt;div&gt;\n\t\t&lt;p&gt; Login &lt;\/p&gt;\n\t\t&lt;button&gt; Continue &lt;\/button&gt;\n\t\t&lt;button color = \u201cblue\u201d&gt; Cancel &lt;\/button&gt;\n\t&lt;\/div&gt;\n);<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"8-what-is-the-difference-between-functional-and-class-component\"><strong>8] What is the difference between functional and class component?<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-table is-style-regular\"><table><tbody><tr><td><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Functional Components<\/strong><\/td><td><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Class Components<\/strong><\/td><\/tr><tr><td>These are pure JavaScript functions that accept props object as parameter and returns React elements.&nbsp;<\/td><td>A class component is a more identified way of defining a React component.&nbsp;&nbsp;<\/td><\/tr><tr><td>rendor() method is not used.<\/td><td>rendor() method is used.<\/td><\/tr><tr><td>Also known as stateless components as they simply accept data and display them in the same form.<\/td><td>Also known as stateful components as they implement state and logic.<\/td><\/tr><tr><td>React lifecycle methods cannot be used.<\/td><td>React lifecycle methods can be used.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"9-why-cant-browsers-read-jsx\"><strong>9] Why can\u2019t browsers read JSX?<\/strong><\/h3>\n\n\n\n<p>Browsers can read JavaScript objects but JSX in not a JavaScript object. Hence, to allow a browser to read JSX, first, we need to modify JSX file into a JavaScript object using JSX transformers and then pass it to the browser.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"10-what-are-pure-components\"><strong>10] What are pure components?<\/strong><\/h3>\n\n\n\n<p>Pure components are the components whose output is determined only by it\u2019s input that is props. Pure component is similar to component except that it handles the shouldComponentUpdate method.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"11-what-is-state-in-react\"><strong>11] What is state in React?<\/strong><\/h3>\n\n\n\n<p>State of a component is an object that holds some information which will change over the lifetime of the component. State is analogous to props, but is private and fully controlled by the component. i.e, it's not accessible to any component besides the one that owns and sets it.<\/p>\n\n\n\n<p>Example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react' ;\n   class StateFun extends React.Component {\n    constructor(props) {\n     super(props)\n     this.state = {\n        message: 'Welcome to React world'\n     }\n  }\n   render() {\n     return (\n          &lt;div&gt;\n     &lt;h1&gt;{this.state.message}&lt;\/h1&gt;\n     &lt;\/div&gt;\n     )\n  }\n    }\n \n  export default StateFun;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"12-what-is-props-in-react\"><strong>12] What is props in React?<\/strong><\/h3>\n\n\n\n<p>Props are passed as input to components. They are either single values or objects holding a group of values that are passed to components. The data is passed down from a parent component to a child component.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"13-what-is-the-difference-between-state-and-props\"><strong>13] What is the difference between state and props?<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-table is-style-regular\"><table><tbody><tr><td><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Props<\/strong><\/td><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>State<\/strong><\/td><\/tr><tr><td>Props are read-only.<\/td><td>State changes can be asynchronous.<\/td><\/tr><tr><td>Props cannot be modified.<\/td><td>State can be modified using <strong>this.setState.<\/strong><\/td><\/tr><tr><td>Props allow you to pass data from one component to other component as an argument.<\/td><td>State holds information about the components.<\/td><\/tr><tr><td>Props make component reusable.<\/td><td>State cannot make components reusable.<\/td><\/tr><tr><td>Props are external and are controlled by renders.<\/td><td>State is internal and are controlled by React Component.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"14-why-should-we-not-update-state-directly\"><strong>14] Why should we not update state directly?<\/strong><\/h3>\n\n\n\n<p>If we update state directly, then it will not re-render the component.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/incorrect way\nthis.state.msg= \u2018Hello World\u2019<\/code><\/pre>\n\n\n\n<p>Use setState() method instead, as it&nbsp; schedules an update to a component's state object.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/correct way\nthis.setState({ msg : \u2018Hello World\u2019 })\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"15-what-is-the-virtual-dom-how-virtual-dom-works\"><strong>15] What is the Virtual DOM? How Virtual DOM works?<\/strong><\/h3>\n\n\n\n<p>A virtual DOM is a basic JavaScript object which is simply the copy of the real DOM. It is a tree that consists of the elements, attributes and content as objects and their properties. React render function then creates a node tree out of the React components. It then updates this tree in response to the mutations within the data model.<\/p>\n\n\n\n<p>The Virtual DOM works in 3 steps as mentioned below -&nbsp;<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Whenever any data changes, the whole UI is re-rendered in Virtual DOM representation.<\/li>\n\n\n\n<li>Then the difference between the earlier DOM representation and the new one is determined.<\/li>\n\n\n\n<li>Once it is determined, the real DOM will be updated with only the things that have changed.&nbsp;<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"16-what-is-the-purpose-of-render-in-react\"><strong>16] What is the purpose of render() in React?<\/strong><\/h3>\n\n\n\n<p>Each React component should have a render(). It returns a single React element which is the representation of the native DOM component. If more than one HTML element needs to be rendered, then they must be grouped together inside one enclosing tag such as &lt;form&gt;, &lt;group&gt;,&lt;div&gt; etc. This function must be kept pure that is, it must return an equivalent result each time it is invoked.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"17-what-are-the-different-lifecycles-methods-in-react\"><strong>17] What are the different lifecycles methods in React?<\/strong><\/h3>\n\n\n\n<p>Each component in React undergoes 3 phases : Mounting, Updating and Unmounting.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Mounting -&nbsp;<\/strong><\/li>\n<\/ul>\n\n\n\n<p>There are 4 built-in lifecycles that are called when a component is mounted.<\/p>\n\n\n\n<p>i. constructor() - Constructor method is used to set the initial state of the component.<\/p>\n\n\n\n<p>ii. getDerivedStateFromProps() - This method is called before rendering the elements into the DOM.<\/p>\n\n\n\n<p>iii. render() - This method returns HTML elements.<\/p>\n\n\n\n<p>iv. componentDidMount() - This method is called right after the component is rendered.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Updating -&nbsp;<\/strong> Updates in React occur due to changes in props and state. The following methods are called when a component is updated or re-rendered.<\/li>\n<\/ul>\n\n\n\n<p>i. getDerivedStateFromProps() - This method is called again when a component is being updated.<\/p>\n\n\n\n<p>ii. shouldComponentUpdate() - This method is called before rendering the component .<\/p>\n\n\n\n<p>iii. render() - This method re-renders the HTML inside the DOM.<\/p>\n\n\n\n<p>iv. get SnapshotBeforeUpdate() - This method stores previous state of the component.<\/p>\n\n\n\n<p>v. componentDidUpdate() - This method is called after the component gets re-rendered.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Unmounting - <\/strong>This is the last phase of React lifecycle.<\/li>\n<\/ul>\n\n\n\n<p>i. componentWillUnmount() - This method is called after the component gets re-rendered.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"18-explain-strict-mode-in-react\"><strong>18] Explain strict mode in React.<\/strong><\/h3>\n\n\n\n<p>Strict mode is a tool for pointing out potential problems in an application. Like Fragment , Strict mode does not render any visible UI. It activates additional checks and warnings for its descendants.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"19-what-are-react-hooks\"><strong>19] What are react hooks?<\/strong><\/h3>\n\n\n\n<p>Hooks are the functions which \"<em>hooks into<\/em>\" React state. It allows you to use React features without writing a class.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"20-what-is-reconciliation\"><strong>20] What is reconciliation?<\/strong><\/h3>\n\n\n\n<p>Reconciliation is the process through which React updates the DOM. When a component's state changes, React has to decide whether it is necessary to update the DOM. It does this by creating a virtual DOM and comparing it with the current DOM. In this context, the virtual DOM will contain the new state of the component.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"21-what-are-keys-in-react\"><strong>21] What are keys in React?<\/strong><\/h3>\n\n\n\n<p>Key is used to&nbsp; identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array .<\/p>\n\n\n\n<p>Example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const numbers = &#091;1, 2, 3, 4, 5, 6, 7, 8, 9];\nconst listItems = numbers.map((number) =&gt;\n \n &lt;li key={number.toString()}&gt; \n   {number}\n  &lt;\/li&gt;\n);\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"22-what-is-rendering-in-react\"><strong>22]<\/strong> <strong>What is rendering in React?<\/strong><\/h3>\n\n\n\n<p>Rendering is the most important procedure used in frontend development. In React, the render() method is the only required method in a class component, and is responsible for describing the view to be rendered to the browser window.<\/p>\n\n\n\n<p>The term \u201crender prop\u201d refers to a technique for sharing code between React components using a prop whose value is a function.<\/p>\n\n\n\n<p>A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic.<\/p>\n\n\n\n<p>Example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>render() {\n        return (\n          &lt;div style={{ height: '100vh' }} onMouseMove={this.handleMouseMove}&gt;\n            &lt;h1&gt;Move the mouse around!&lt;\/h1&gt;\n            &lt;p&gt;The mouse position is ({this.state.x}&lt;\/p&gt;\n        &lt;\/div&gt;\n        );\n    }\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"23-how-to-write-comments-in-react\"><strong>23]<\/strong> <strong>How to write comments in React?<\/strong><\/h3>\n\n\n\n<p>Two types of comment -<\/p>\n\n\n\n<p>1] Single line comment:<strong>&nbsp;<\/strong><\/p>\n\n\n\n<p><strong>In a single line comment we use&nbsp; double backslash\u201c \/\/ \u201d.<\/strong><\/p>\n\n\n\n<p>Example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>export default function App() {\n  return (\n    &lt;div className=\"App\"&gt;\n      &lt;h1&gt;Hello &lt;\/h1&gt;\n     \/\/ &lt;h2&gt;Start editing to see some magic happen!&lt;\/h2&gt;\n    &lt;\/div&gt;\n  );\n}\n<\/code><\/pre>\n\n\n\n<p>2] Multiple line comment:<\/p>\n\n\n\n<p><strong>In Multiple line comment we use \u201c \/* \u2014\u2014-*\/ \u201c.<\/strong><\/p>\n\n\n\n<p>Example:&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>export default function App() {\n  return (\n    &lt;div className=\"App\"&gt;\n      &lt;h1&gt;Hello &lt;\/h1&gt;\n     &lt;h2&gt;Start editing to see some magic happen!&lt;\/h2&gt;\n     \/*&lt;h2&gt;Start editing to see some magic happen!&lt;\/h2&gt;\n     &lt;h2&gt;Start editing to see some magic happen!&lt;\/h2&gt;*\/\n    &lt;\/div&gt;\n  );\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"24-what-is-context\"><strong>24] What is context?<\/strong><\/h3>\n\n\n\n<p>Context provides a way to pass data via component tree without passing it to props manually at every level.<\/p>\n\n\n\n<p>For example, authenticated user, locale preference, UI theme need to be accessed in the application by many components.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Const {Provider, Consumer} = React.createContext (defaultValue)<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"25-what-is-the-purpose-of-using-super-constructor-with-props-argument\"><strong>25] What is the purpose of using super constructor with props argument?<\/strong><\/h3>\n\n\n\n<p>A child class constructor cannot make use of this reference until the super() method is invoked. The main reason of using super() constructor is to grant access to child constructors to use this.props reference.<\/p>\n\n\n\n<p>Example:&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>class Demo extends React.Component {\n  constructor(props) {\n    super(props)\n\n    console.log(this.props) \/\/ prints { name: 'John', age: 42 }\n  }\n}\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"26-how-to-run-a-react-project\"><strong>26] How to run a React project?<\/strong><\/h3>\n\n\n\n<p>STEP 1: Installing NPM<\/p>\n\n\n\n<p>Begin the installation of ReactJS by installing NPM (Node Package Manager) .<\/p>\n\n\n\n<p>To install NPM on Ubuntu Linux<\/p>\n\n\n\n<p>$ sudo apt install npm<\/p>\n\n\n\n<p>The installation is complete, you can verify the version of NPM installed using the command:<\/p>\n\n\n\n<p>$ npm \u2013version<\/p>\n\n\n\n<p>The latest version at the time of writing this is v7.6.3 as captured in the output.<\/p>\n\n\n\n<p>Installation of NPM also install Node.JS and check his version<\/p>\n\n\n\n<p>$ node \u2013version<\/p>\n\n\n\n<p>The latest version at the time of writing this is v12.22.1 as captured in the output.<\/p>\n\n\n\n<p>STEP 2: Installing create-react-app utility<\/p>\n\n\n\n<p>Install the react tool<\/p>\n\n\n\n<p>$ sudo npm -g create-react-app<\/p>\n\n\n\n<p>where: -g (Globally install)<\/p>\n\n\n\n<p>Once install the tool then check his version<\/p>\n\n\n\n<p>$ create-react-app \u2013version<\/p>\n\n\n\n<p>STEP 3: Create first React App<\/p>\n\n\n\n<p>$ npx create-react-app app_name<\/p>\n\n\n\n<p>Created a React app&nbsp;<\/p>\n\n\n\n<p>$ cd app_name<\/p>\n\n\n\n<p>Start the application&nbsp;<\/p>\n\n\n\n<p>$ npm start<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"27-what-is-a-router-in-react-js\"><strong>27] <\/strong><strong>What is a router in React JS?<\/strong><\/h3>\n\n\n\n<p>React Router is a powerful routing library built on top of React that helps you add new screens and flows to your application incredibly quickly, all while keeping the URL in sync with what\u2019s being displayed on the page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"28-how-to-setup-react-js\"><strong>28] How to setup React JS?<\/strong><\/h3>\n\n\n\n<p>When you create react app using create-react-app App_name that time generate some folders like as: build\/, node_modules\/, public\/, src\/, .gitignore\/, README.md, package-lock.json,Package.json.<\/p>\n\n\n\n<p>In these folders, some folders or files are not useable. Such as, .gitignore, package-lock.json and in a public folder, this file is not usable: favicon.ico, logo192.png, manifest.json, logo512.png, robots.txt. Replace your files with this file and use.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"29-what-is-flux-and-redux\"><strong>29]<\/strong> <strong>What is Flux and Redux?<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Flux - Flux is a Javascript pattern for UI which runs on a unidirectional data flow. It is useful when your project has dynamic data and you need to keep the data updated in an effective manner.<\/li>\n\n\n\n<li>Redux - Redux is a predictable state container for JavaScript apps based on the Flux design pattern. Redux can be used together with React, or with any other view library. It is tiny (about 2kB) and has no dependencies. React Redux is the official React UI bindings layer for Redux. It lets your React components read data from a Redux store, and dispatch actions to the store to update state.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"30-how-to-connect-mongodb-with-react-js\"><strong>30] How to connect MongoDB with React JS?<\/strong><\/h3>\n\n\n\n<p>React is a front end framework you will not have access to things on your backend such as methods like db.collection.insert(). You will in turn have a separation of front end code and back end code. They will talk to each other through HTTP requests (GET, POST, PUT, DELETE).<\/p>\n\n\n\n<p>Example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var mongoose = require('mongoose');\nvar Message = require('..\/models\/message');\n \n app.post('\/message', (request, response) =&gt; {\nvar newMessage = new Message(request.body);\n        newMessage.save((error, doc) =&gt; {\n        if (error) {\n             response.send(error);\n        } else {\n            response.send(doc);\n}\n            });\n    });\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"31-what-is-babel-in-react-js\"><strong>31] What is babel in React JS?<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Babel is a toolchain that is mainly used to convert ECMAScript code into a backwards compatible version of JavaScript.<\/li>\n\n\n\n<li>Babel has support for the latest version of JavaScript through syntax transformers.<\/li>\n\n\n\n<li>Babel can convert JSX syntax.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"32-what-is-rendered-in-react-js\"><strong>32] What is rendered in React JS?<\/strong><\/h3>\n\n\n\n<p>Rendering is a simple technique for sharing a code between one component to another component.The below component uses render prop which returns a React element.<\/p>\n\n\n\n<p>Example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react';\n        class Render extends React.Component {\n              constructor(props) {\n              super(props);\n            this.handleMouseMove = this.handleMouseMove.bind(this);\n            this.state = { x: 0};\n             }\n        handleMouseMove(event) {\n            this.setState({\n                 x: event.clientX,\n            });\n        }\n    render() {\n    return (\n        &lt;div style={{ height: '200vh' }} onMouseMove={this.handleMouseMove}&gt;\n               &lt;h1&gt;Move the mouse around!&lt;\/h1&gt;\n               &lt;p&gt;The current mouse position is ({this.state.x})&lt;\/p&gt;\n        &lt;\/div&gt;\n        );\n               }\n    }\n \n    export default Render;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"33-how-to-redirect-to-another-page-in-react-js\"><strong>33] How to redirect to another page in React JS?<\/strong><\/h3>\n\n\n\n<p>To redirect from one page to another [page in reactJS using `react-router`. The react-router package provides a &lt;Redirect&gt; component in React Router. Rendering a &lt;Redirect&gt; will navigate to a new location. Like server-side redirects, the new location will override the current location.<\/p>\n\n\n\n<p>Example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react';\n        import { withRouter } from \"react-router-dom\";\n \n        class Route extends Component {\n            handleClick = () =&gt; {\n                this.props.history.push(\"path\/to\/push\");\n            }\n            render() {\n                 return (\n                &lt;div&gt;\n                   &lt;button onClick={this.handleClick} type=\"button\"&gt; Next                     \tPage&lt;\/button&gt;\n                &lt;\/div&gt;\n                  );\n            };\n        }\n \n    export default Route;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"34-how-to-pass-data-from-one-component-to-another-in-reactjs\"><strong>34] How to pass data from one component to another in ReactJS?<\/strong><\/h3>\n\n\n\n<p>Using props we can pass data from one component to another component, You can use props to pass data from parent to child component.&nbsp;<\/p>\n\n\n\n<p>Example:<\/p>\n\n\n\n<p>-App.js<\/p>\n\n\n\n<p>\u2014\u2013ParentComponent.js<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react'\nimport ChildComponent from '.\/ChildComponent';\t\/\/import childComponent\n \nclass ParentComponent extends React.Component {\nrender(){\n    return(\n    &lt;div&gt;\n        &lt;ChildComponent message=\"Data from first component\"\/&gt;  \n    \/\/call childComponent\n    &lt;\/div&gt;\n      );\n   }}\nexport default ParentComponent;<\/code><\/pre>\n\n\n\n<p>\u2014\u2014-Child Component.js<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react';\nconst ChildComponent = (props) =&gt; {\n    return(\n          &lt;h2&gt; {props.message} &lt;\/h2&gt;\n    );\n}\nexport default ChildComponent;\t\/\/export childComponent<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"35-how-to-get-the-enter-key-in-react-js\"><strong>35] How to get the enter key in React js?<\/strong><\/h3>\n\n\n\n<p>In this example you want to use handleSearch() using press Enter key.<\/p>\n\n\n\n<p>Example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>onKeyPress={\n    (event) =&gt;\n      event.key === \u2018Enter\u2019 &amp;&amp; handleSearch()   \/\/check the equality\n  }<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"36-how-to-create-a-table-in-reactjs\"><strong>36]&nbsp; How to create a table in ReactJS?<\/strong><\/h3>\n\n\n\n<p>Example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react';\nfunction App() {\n    return (\n        &lt;div className=\"container\"&gt;\n            &lt;h1&gt;Simple Inventory Table&lt;\/h1&gt;\n            &lt;table&gt;\n                &lt;thead&gt;\n                &lt;tr&gt;\n                    &lt;th&gt;Product Id\t&lt;\/th&gt;\n                    &lt;th&gt;Product Name   &lt;\/th&gt;\n                    &lt;th&gt;Product Category\t&lt;\/th&gt;\n                    &lt;th&gt;Product Price   &lt;\/th&gt;\n                &lt;\/tr&gt;\n                &lt;\/thead&gt;\n            &lt;\/table&gt;\n        &lt;\/div&gt;\n    );\n}\nexport default App;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"37-what-is-npm-in-react-js\"><strong>37] What is npm in React JS?<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>NPM (Node Package Manager) is the default package manager for Node.js and is written entirely in Javascript.<\/li>\n\n\n\n<li>It is the default package manager that comes with NodeJS when you install it.<\/li>\n\n\n\n<li>&nbsp;npm is an abbreviation used for the node package manager.It is a package manager for JavaScript.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"38-how-to-create-a-website-in-react-js\"><strong>38] How to create a website in React JS?<\/strong><\/h3>\n\n\n\n<p>STEP 1:&nbsp;Create a react app<\/p>\n\n\n\n<p>$ npx create-react-app App_name<\/p>\n\n\n\n<p>STEP 2: Install the dependencies<\/p>\n\n\n\n<p>STEP 3: Create components&nbsp;<\/p>\n\n\n\n<p>STEP 4: Deploy the application<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"39-how-to-install-bootstrap-in-react-js\"><strong>39] How to install bootstrap in React JS?<\/strong><\/h3>\n\n\n\n<p>The best way to install react- bootstrap via NPM (Node Package Manager).<\/p>\n\n\n\n<p>The command for installing react-bootstrap in react js is below: &nbsp;<\/p>\n\n\n\n<p><strong>$ npm install react-bootstrap bootstrap<\/strong><\/p>\n\n\n\n<p>After successfully installation import the bootstrap library&nbsp;<\/p>\n\n\n\n<p>Example -&nbsp;<\/p>\n\n\n\n<p>import Button from 'react-bootstrap\/Button';<\/p>\n\n\n\n<p>import { Button } from 'react-bootstrap'; \/\/import bootsrap button<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"40-how-to-connect-react-js-with-a-database\"><strong>40] How to connect react js with a database?<\/strong><\/h3>\n\n\n\n<p>Install MySQL and then import in the react component<\/p>\n\n\n\n<p>Example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React, { Component } from 'react';\nimport mysql from 'mysql';\t\/\/import mysql\n \nclass Users extends Component {\n     constructor(props){\n    super(props);\n    const connection = mysql.createConnection({\n        host: 'localhost',\n        user: 'root',\n        password: ''\u201d,\t\/\/null password\n        database: 'react_prac'\n    });\n    connection.connect();\n    console.log(connection);\n }\nrender() {\n  return (\n     &lt;div&gt; Data Base &lt;\/div&gt;\n);\n           } }\n         export default Users;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"41-how-to-import-js-files-in-react\"><strong>41] How to import jS files in react?<\/strong><\/h3>\n\n\n\n<p>First you export the js file that means every jS file in reactjS is a component, export this file <strong>App.js<\/strong>.<\/p>\n\n\n\n<p>Example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from \u2018react\u2019;\n    Class ExportFile ( () = &gt;{\n       render( \n        return(\n        &lt;h1&gt; Export file&lt;\/h1&gt;\n     )\n      )}\nExport default ExportFile<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"42-how-to-set-background-images-in-react-js\"><strong>42] How to set background images in React.jS?<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Using External URL:<\/strong><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>function App() {\n  return (\n    &lt;div style={{\n      backgroundImage: `url(\"https:\/\/via.placeholder.com\/500\")` \n    \/\/using third party website set image\n    }}&gt;\n      Hello World\n    &lt;\/div&gt;\n  );\n}<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Using Local Machine:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from \"react\";\nimport background from \".\/img\/image_name.png\";\n \/\/ import image from local storage\n \nfunction App() {\n  return (\n    &lt;div style={{ backgroundImage: `url(${background})` }}&gt;\n    \/\/using local storage\n      Hello World\n    &lt;\/div&gt;\n  );}\nexport default App;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"43-how-to-check-the-react-js-version\"><strong>43] How to check the React jS version?<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>When you create a react app that time generates a package.json file .In package.json check dependencies: {} section.<\/li>\n\n\n\n<li>The second way is:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>$create-react-app \u2013version<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"44-how-to-declare-a-variable-in-react-js\"><strong>44] How to declare a variable in React jS?<\/strong><\/h3>\n\n\n\n<p>Examples:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>const element = &lt;h1&gt;Hello, world!&lt;\/h1&gt;; &nbsp; \/\/using JSX<\/li>\n\n\n\n<li>const name = \u2018Josh Perez\u2019;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<\/li>\n\n\n\n<li>const element = &lt;h1&gt;Hello, {name}&lt;\/h1&gt;;<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>ReactDOM.render(\nelement,\ndocument.getElementById(\u2018root\u2019)\n);<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"45-how-to-get-the-enter-key-in-react-js\"><strong>45] How to get the enter key in React js?<\/strong><\/h3>\n\n\n\n<p><strong>&nbsp;<\/strong>In this example you want to use handleSearch() using press Enter key.<\/p>\n\n\n\n<p>Example:&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>onKeyPress={\n    (event) =&gt;\n      event.key === 'Enter' &amp;&amp; handleSearch()   \/\/check the equality\n  }\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"46-how-to-do-crud-operations-in-react-js\"><strong>46] How to do crud operations in React jS?<\/strong><\/h3>\n\n\n\n<p>Reactjs CRUD Application is designed with 2 main layers:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>React.js components let you split the UI into independent, reusable pieces, and think about each piece in isolation.<\/li>\n\n\n\n<li>Ajax is used by Reactjs component to fetch (post\/put\/get\/delete) data from remote rest api by http request<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"47-how-to-debug-react-js\"><strong>47] How to debug React JS?<\/strong><\/h3>\n\n\n\n<p>One of the cyclic ways to debug React code on the web using console.log(),console.warn, console.error, and similar statements. you will do console.log() ,You will then see the result in the browser inspector.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"48-how-to-get-multiple-checkbox-values-in-react-js\"><strong>48] How to get multiple checkbox values in React JS?<\/strong><\/h3>\n\n\n\n<p>Example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React from 'react';\n    class const CheckBox = props =&gt; {\n     return (\n           &lt;li&gt;\n&lt;input key={props.id}\n            onClick={props.handleCheckChieldElement}\ntype=\"checkbox\"\nchecked={props.isChecked} value={props.value} \/&gt;\n            {props.value}\n           &lt;\/li&gt;\n        )}\nexport default CheckBox;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"49-when-to-use-a-class-component-over-a-function-component\"><strong>49] When to use a Class Component over a Function Component?<\/strong><\/h3>\n\n\n\n<p>If the component needs state or lifecycle methods then use class components. Otherwise use functional components. From React 16.8 with the addition of Hooks, you could use state, lifecycle methods available in class components right in your function component.<\/p>\n\n\n\n<p>Example -&nbsp;<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nimport React from \u2018react\u2019\u2019\nclass Class_component extends React.Component {\n  render() {\n    return &amp;lt;h1&gt;{`Hello, ${this.props.message}`}&amp;lt;\/h1&gt;\n  }\n}\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"50-what-is-the-use-of-refs\"><strong>50] What is the use of refs?<\/strong><\/h3>\n\n\n\n<p>refs is used to return the reference value to the element.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>React is an open-source JavaScript framework that allows developers to create simple, quick, and scalable online apps. It is efficient and\u00a0adaptable. React was built by Jordan Walke, a software engineer at Facebook. It was originally used on Facebook's news feed in 2011 and then on Instagram in 2012. React allows developers with a JavaScript experience [&hellip;]<\/p>\n","protected":false},"author":41,"featured_media":34969,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[25860],"tags":[],"content_type":[],"class_list":["post-34868","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.3 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>React JS Interview Questions and Answers<\/title>\n<meta name=\"description\" content=\"React JS Interview Questions: You can learn the top 50 React JS Interview Questions and Answers and ace your upcoming interview sessions.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.mygreatlearning.com\/blog\/react-js-interview-questions-and-answers\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Top 50 React JS Interview Questions and Answers\" \/>\n<meta property=\"og:description\" content=\"React JS Interview Questions: You can learn the top 50 React JS Interview Questions and Answers and ace your upcoming interview sessions.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.mygreatlearning.com\/blog\/react-js-interview-questions-and-answers\/\" \/>\n<meta property=\"og:site_name\" content=\"Great Learning Blog: Free Resources what Matters to shape your Career!\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/GreatLearningOfficial\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-12-31T05:33:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-18T08:30:45+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2021\/05\/iStock-678444498.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1254\" \/>\n\t<meta property=\"og:image:height\" content=\"837\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Great Learning Editorial Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/Great_Learning\" \/>\n<meta name=\"twitter:site\" content=\"@Great_Learning\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Great Learning Editorial Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/react-js-interview-questions-and-answers\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/react-js-interview-questions-and-answers\\\/\"},\"author\":{\"name\":\"Great Learning Editorial Team\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#\\\/schema\\\/person\\\/6f993d1be4c584a335951e836f2656ad\"},\"headline\":\"Top 50 React JS Interview Questions and Answers\",\"datePublished\":\"2021-12-31T05:33:00+00:00\",\"dateModified\":\"2024-11-18T08:30:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/react-js-interview-questions-and-answers\\\/\"},\"wordCount\":3109,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/react-js-interview-questions-and-answers\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/iStock-678444498.jpg\",\"articleSection\":[\"IT\\\/Software Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/react-js-interview-questions-and-answers\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/react-js-interview-questions-and-answers\\\/\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/react-js-interview-questions-and-answers\\\/\",\"name\":\"React JS Interview Questions and Answers\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/react-js-interview-questions-and-answers\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/react-js-interview-questions-and-answers\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/iStock-678444498.jpg\",\"datePublished\":\"2021-12-31T05:33:00+00:00\",\"dateModified\":\"2024-11-18T08:30:45+00:00\",\"description\":\"React JS Interview Questions: You can learn the top 50 React JS Interview Questions and Answers and ace your upcoming interview sessions.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/react-js-interview-questions-and-answers\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/react-js-interview-questions-and-answers\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/react-js-interview-questions-and-answers\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/iStock-678444498.jpg\",\"contentUrl\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/iStock-678444498.jpg\",\"width\":1254,\"height\":837,\"caption\":\"react js interview questions\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/react-js-interview-questions-and-answers\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"IT\\\/Software Development\",\"item\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/software\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Top 50 React JS Interview Questions and Answers\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/\",\"name\":\"Great Learning Blog\",\"description\":\"Learn, Upskill &amp; Career Development Guide and Resources\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#organization\"},\"alternateName\":\"Great Learning\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#organization\",\"name\":\"Great Learning\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/GL-Logo.jpg\",\"contentUrl\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/GL-Logo.jpg\",\"width\":900,\"height\":900,\"caption\":\"Great Learning\"},\"image\":{\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/GreatLearningOfficial\\\/\",\"https:\\\/\\\/x.com\\\/Great_Learning\",\"https:\\\/\\\/www.instagram.com\\\/greatlearningofficial\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/school\\\/great-learning\\\/\",\"https:\\\/\\\/in.pinterest.com\\\/greatlearning12\\\/\",\"https:\\\/\\\/www.youtube.com\\\/user\\\/beaconelearning\\\/\"],\"description\":\"Great Learning is a leading global ed-tech company for professional training and higher education. It offers comprehensive, industry-relevant, hands-on learning programs across various business, technology, and interdisciplinary domains driving the digital economy. These programs are developed and offered in collaboration with the world's foremost academic institutions.\",\"email\":\"info@mygreatlearning.com\",\"legalName\":\"Great Learning Education Services Pvt. Ltd\",\"foundingDate\":\"2013-11-29\",\"numberOfEmployees\":{\"@type\":\"QuantitativeValue\",\"minValue\":\"1001\",\"maxValue\":\"5000\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/#\\\/schema\\\/person\\\/6f993d1be4c584a335951e836f2656ad\",\"name\":\"Great Learning Editorial Team\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/unnamed.webp\",\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/unnamed.webp\",\"contentUrl\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/unnamed.webp\",\"caption\":\"Great Learning Editorial Team\"},\"description\":\"The Great Learning Editorial Staff includes a dynamic team of subject matter experts, instructors, and education professionals who combine their deep industry knowledge with innovative teaching methods. Their mission is to provide learners with the skills and insights needed to excel in their careers, whether through upskilling, reskilling, or transitioning into new fields.\",\"sameAs\":[\"https:\\\/\\\/www.mygreatlearning.com\\\/\",\"https:\\\/\\\/in.linkedin.com\\\/school\\\/great-learning\\\/\",\"https:\\\/\\\/x.com\\\/https:\\\/\\\/twitter.com\\\/Great_Learning\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCObs0kLIrDjX2LLSybqNaEA\"],\"award\":[\"Best EdTech Company of the Year 2024\",\"Education Economictimes Outstanding Education\\\/Edtech Solution Provider of the Year 2024\",\"Leading E-learning Platform 2024\"],\"url\":\"https:\\\/\\\/www.mygreatlearning.com\\\/blog\\\/author\\\/greatlearning\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"React JS Interview Questions and Answers","description":"React JS Interview Questions: You can learn the top 50 React JS Interview Questions and Answers and ace your upcoming interview sessions.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.mygreatlearning.com\/blog\/react-js-interview-questions-and-answers\/","og_locale":"en_US","og_type":"article","og_title":"Top 50 React JS Interview Questions and Answers","og_description":"React JS Interview Questions: You can learn the top 50 React JS Interview Questions and Answers and ace your upcoming interview sessions.","og_url":"https:\/\/www.mygreatlearning.com\/blog\/react-js-interview-questions-and-answers\/","og_site_name":"Great Learning Blog: Free Resources what Matters to shape your Career!","article_publisher":"https:\/\/www.facebook.com\/GreatLearningOfficial\/","article_published_time":"2021-12-31T05:33:00+00:00","article_modified_time":"2024-11-18T08:30:45+00:00","og_image":[{"width":1254,"height":837,"url":"http:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2021\/05\/iStock-678444498.jpg","type":"image\/jpeg"}],"author":"Great Learning Editorial Team","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/Great_Learning","twitter_site":"@Great_Learning","twitter_misc":{"Written by":"Great Learning Editorial Team","Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.mygreatlearning.com\/blog\/react-js-interview-questions-and-answers\/#article","isPartOf":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/react-js-interview-questions-and-answers\/"},"author":{"name":"Great Learning Editorial Team","@id":"https:\/\/www.mygreatlearning.com\/blog\/#\/schema\/person\/6f993d1be4c584a335951e836f2656ad"},"headline":"Top 50 React JS Interview Questions and Answers","datePublished":"2021-12-31T05:33:00+00:00","dateModified":"2024-11-18T08:30:45+00:00","mainEntityOfPage":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/react-js-interview-questions-and-answers\/"},"wordCount":3109,"commentCount":0,"publisher":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/react-js-interview-questions-and-answers\/#primaryimage"},"thumbnailUrl":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2021\/05\/iStock-678444498.jpg","articleSection":["IT\/Software Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.mygreatlearning.com\/blog\/react-js-interview-questions-and-answers\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.mygreatlearning.com\/blog\/react-js-interview-questions-and-answers\/","url":"https:\/\/www.mygreatlearning.com\/blog\/react-js-interview-questions-and-answers\/","name":"React JS Interview Questions and Answers","isPartOf":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/react-js-interview-questions-and-answers\/#primaryimage"},"image":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/react-js-interview-questions-and-answers\/#primaryimage"},"thumbnailUrl":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2021\/05\/iStock-678444498.jpg","datePublished":"2021-12-31T05:33:00+00:00","dateModified":"2024-11-18T08:30:45+00:00","description":"React JS Interview Questions: You can learn the top 50 React JS Interview Questions and Answers and ace your upcoming interview sessions.","breadcrumb":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/react-js-interview-questions-and-answers\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.mygreatlearning.com\/blog\/react-js-interview-questions-and-answers\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.mygreatlearning.com\/blog\/react-js-interview-questions-and-answers\/#primaryimage","url":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2021\/05\/iStock-678444498.jpg","contentUrl":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2021\/05\/iStock-678444498.jpg","width":1254,"height":837,"caption":"react js interview questions"},{"@type":"BreadcrumbList","@id":"https:\/\/www.mygreatlearning.com\/blog\/react-js-interview-questions-and-answers\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.mygreatlearning.com\/blog\/"},{"@type":"ListItem","position":2,"name":"IT\/Software Development","item":"https:\/\/www.mygreatlearning.com\/blog\/software\/"},{"@type":"ListItem","position":3,"name":"Top 50 React JS Interview Questions and Answers"}]},{"@type":"WebSite","@id":"https:\/\/www.mygreatlearning.com\/blog\/#website","url":"https:\/\/www.mygreatlearning.com\/blog\/","name":"Great Learning Blog","description":"Learn, Upskill &amp; Career Development Guide and Resources","publisher":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/#organization"},"alternateName":"Great Learning","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.mygreatlearning.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.mygreatlearning.com\/blog\/#organization","name":"Great Learning","url":"https:\/\/www.mygreatlearning.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.mygreatlearning.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2022\/06\/GL-Logo.jpg","contentUrl":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2022\/06\/GL-Logo.jpg","width":900,"height":900,"caption":"Great Learning"},"image":{"@id":"https:\/\/www.mygreatlearning.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/GreatLearningOfficial\/","https:\/\/x.com\/Great_Learning","https:\/\/www.instagram.com\/greatlearningofficial\/","https:\/\/www.linkedin.com\/school\/great-learning\/","https:\/\/in.pinterest.com\/greatlearning12\/","https:\/\/www.youtube.com\/user\/beaconelearning\/"],"description":"Great Learning is a leading global ed-tech company for professional training and higher education. It offers comprehensive, industry-relevant, hands-on learning programs across various business, technology, and interdisciplinary domains driving the digital economy. These programs are developed and offered in collaboration with the world's foremost academic institutions.","email":"info@mygreatlearning.com","legalName":"Great Learning Education Services Pvt. Ltd","foundingDate":"2013-11-29","numberOfEmployees":{"@type":"QuantitativeValue","minValue":"1001","maxValue":"5000"}},{"@type":"Person","@id":"https:\/\/www.mygreatlearning.com\/blog\/#\/schema\/person\/6f993d1be4c584a335951e836f2656ad","name":"Great Learning Editorial Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2022\/02\/unnamed.webp","url":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2022\/02\/unnamed.webp","contentUrl":"https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2022\/02\/unnamed.webp","caption":"Great Learning Editorial Team"},"description":"The Great Learning Editorial Staff includes a dynamic team of subject matter experts, instructors, and education professionals who combine their deep industry knowledge with innovative teaching methods. Their mission is to provide learners with the skills and insights needed to excel in their careers, whether through upskilling, reskilling, or transitioning into new fields.","sameAs":["https:\/\/www.mygreatlearning.com\/","https:\/\/in.linkedin.com\/school\/great-learning\/","https:\/\/x.com\/https:\/\/twitter.com\/Great_Learning","https:\/\/www.youtube.com\/channel\/UCObs0kLIrDjX2LLSybqNaEA"],"award":["Best EdTech Company of the Year 2024","Education Economictimes Outstanding Education\/Edtech Solution Provider of the Year 2024","Leading E-learning Platform 2024"],"url":"https:\/\/www.mygreatlearning.com\/blog\/author\/greatlearning\/"}]}},"uagb_featured_image_src":{"full":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2021\/05\/iStock-678444498.jpg",1254,837,false],"thumbnail":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2021\/05\/iStock-678444498-150x150.jpg",150,150,true],"medium":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2021\/05\/iStock-678444498-300x200.jpg",300,200,true],"medium_large":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2021\/05\/iStock-678444498-768x513.jpg",768,513,true],"large":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2021\/05\/iStock-678444498-1024x683.jpg",1024,683,true],"1536x1536":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2021\/05\/iStock-678444498.jpg",1254,837,false],"2048x2048":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2021\/05\/iStock-678444498.jpg",1254,837,false],"web-stories-poster-portrait":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2021\/05\/iStock-678444498-640x837.jpg",640,837,true],"web-stories-publisher-logo":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2021\/05\/iStock-678444498-96x96.jpg",96,96,true],"web-stories-thumbnail":["https:\/\/www.mygreatlearning.com\/blog\/wp-content\/uploads\/2021\/05\/iStock-678444498-150x100.jpg",150,100,true]},"uagb_author_info":{"display_name":"Great Learning Editorial Team","author_link":"https:\/\/www.mygreatlearning.com\/blog\/author\/greatlearning\/"},"uagb_comment_info":0,"uagb_excerpt":"React is an open-source JavaScript framework that allows developers to create simple, quick, and scalable online apps. It is efficient and\u00a0adaptable. React was built by Jordan Walke, a software engineer at Facebook. It was originally used on Facebook's news feed in 2011 and then on Instagram in 2012. React allows developers with a JavaScript experience&hellip;","_links":{"self":[{"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/posts\/34868","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/comments?post=34868"}],"version-history":[{"count":106,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/posts\/34868\/revisions"}],"predecessor-version":[{"id":116480,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/posts\/34868\/revisions\/116480"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/media\/34969"}],"wp:attachment":[{"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/media?parent=34868"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/categories?post=34868"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/tags?post=34868"},{"taxonomy":"content_type","embeddable":true,"href":"https:\/\/www.mygreatlearning.com\/blog\/wp-json\/wp\/v2\/content_type?post=34868"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}