Basic Level - ReactJS Interview Questions
Here are some React Interview Questions on basic concepts.
1. What are the features of React?
 |
JSX: JSX is a syntax extension to JavaScript. It is used with React to describe what the user interface should look like. By using JSX, we can write HTML structures in the same file that contains JavaScript code.
|
 |
Components: Components are the building blocks of any React application, and a single app usually consists of multiple components. It splits the user interface into independent, reusable parts that can be processed separately. |
 |
Virtual DOM: React keeps a lightweight representation of the real DOM in the memory, and that is known as the virtual DOM. When the state of an object changes, virtual DOM changes only that object in the real DOM, rather than updating all the objects. |
 |
One-way data-binding: React’s one-way data binding keeps everything modular and fast. A unidirectional data flow means that when designing a React app, you often nest child components within parent components. |
 |
High performance: React updates only those components that have changed, rather than updating all the components at once. This results in much faster web applications. |
Become a Skilled Web Developer in Just 9 Months!
Caltech PGP Full Stack DevelopmentEXPLORE PROGRAM
2. What is JSX?
JSX is a syntax extension of JavaScript. It is used with React to describe what the user interface should look like. By using JSX, we can write HTML structures in the same file that contains JavaScript code.
3. Can web browsers read JSX directly?
- Web browsers cannot read JSX directly. This is because they are built to only read regular JS objects and JSX is not a regular JavaScript object
- For a web browser to read a JSX file, the file needs to be transformed into a regular JavaScript object. For this, we use Babel
4. What is the virtual DOM?
DOM stands for Document Object Model. The DOM represents an HTML document with a logical tree structure. Each branch of the tree ends in a node, and each node contains objects.
React keeps a lightweight representation of the real DOM in the memory, and that is known as the virtual DOM. When the state of an object changes, the virtual DOM changes only that object in the real DOM, rather than updating all the objects. The following are some of the most frequently asked react interview questions.
5. Why use React instead of other frameworks, like Angular?
 |
Easy creation of dynamic applications: React makes it easier to create dynamic web applications because it provides less coding and provides more functionality, whereas, with JavaScript applications, code tends to get complex very quickly. |
 |
Improved performance: React uses virtual DOM, which makes web applications perform faster. Virtual DOM compares its previous state and updates only those components in the real DOM, whose states have changed, rather than updating all the components — like conventional web applications. |
 |
Reusable components: Components are the building blocks of any React application, and a single app usually consists of multiple components. These components have their own logic and controls, and they can be reused through the application, which, in turn, dramatically reduces the development time of an application. |
 |
Unidirectional data flow: React follows a unidirectional data flow. This means that when designing a React app, we often nest child components within parent components. And since the data flows in a single direction, it becomes easier to debug errors and know where the problem occurs in an application at the moment. |
 |
Dedicated tools for easy debugging: Facebook has released a chrome extension that we can use to debug React applications. This makes the process of debugging React to web applications faster and easier. |
6. What is the difference between the ES6 and ES5 standards?
This is one of the most frequently asked react interview questions.
These are the few instances where ES6 syntax has changed from ES5 syntax:
-
Components and Function
- exports vs export
- require vs import
7. How do you create a React app?
These are the steps for creating a React app:
- Install NodeJS on the computer because we need npm to install the React library. Npm is the node package manager that contains many JavaScript libraries, including React.
- Install the create-react-app package using the command prompt or terminal.
- Install a text editor of your choice, like VS Code or Sublime Text.
8. What is an event in React?
An event is an action that a user or system may trigger, such as pressing a key, a mouse click, etc.
- React events are named using camelCase, rather than lowercase in HTML.
- With JSX, you pass a function as the event handler, rather than a string in HTML.
9. How do you create an event in React?
A React event can be created by doing the following:
10. What are synthetic events in React?
- Synthetic events combine the response of different browser's native events into one API, ensuring that the events are consistent across different browsers.
- The application is consistent regardless of the browser it is running in. Here, preventDefault is a synthetic event.
Mentor - Anjali mourya
Intormation and research are sources from internet.