JAI SHRIRAM ENGINEERING COLLEGE

TIRUPPUR – 638 660

Approved by AICTE, New Delhi & Affiliated to Anna University, Chennai
Recognized by UGC & Accredited by NAAC and NBA (CSE and ECE).

1. What is ReactJS?
ReactJS is a JavaScript library used to build reusable components for the view
layer in MVC architecture. It is highly efficient and uses a virtual DOM to
render components. It works on the client side and is written in JSX.
2. Explain the MVC architecture?
The Model-View-Controller (MVC) framework is an architectural/design pattern
that separates an application into three main logical components Model, View,
and Controller. Each architectural component is built to handle specific
development aspects of an application. It isolates the business, logic, and
presentation layer from each other
3. Explain the building blocks of React?
The five main building blocks of React are:
 Components: These are reusable blocks of code that return HTML.
 JSX: It stands for JavaScript and XML and allows to write HTML in React.
 Props and State: props are like function parameters and State is similar to
variables.
 Context: This allows data to be passed through components as props in a
hierarchy.
 Virtual DOM: It is a lightweight copy of actual DOM which makes DOM
manipulation easier.
4. Explain props and state in React with differences
Props are used to pass data from one component to another. The state is local
data storage that is local to the component only and cannot be passed to other
components.
PROPS STATE

The Data is passed from one The Data is passed within the component
component to another. only.

It is Immutable (cannot be
It is Mutable ( can be modified).
modified).

Props can be used with state The state can be used only with the state
and functional components. components/class component (Before 16.0).
 JAI SHRIRAM ENGINEERING COLLEGE
TIRUPPUR – 638 660
Approved by AICTE, New Delhi & Affiliated to Anna University, Chennai
Recognized by UGC & Accredited by NAAC and NBA (CSE and ECE).

PROPS STATE

Props are read-only. The state is both read and write.

5. What is virtual DOM in React?
React uses Virtual DOM exists which is like a lightweight copy of the actual
DOM(a virtual representation of the DOM). So for every object that exists in the
original DOM, there is an object for that in React Virtual DOM. It is exactly the
same, but it does not have the power to directly change the layout of the
document. Manipulating DOM is slow, but manipulating Virtual DOM is fast as
nothing gets drawn on the screen. So each time there is a change in the state of
our application, the virtual DOM gets updated first instead of the real DOM.
6. What is JSX?
JSX is basically a syntax extension of regular JavaScript and is used to create
React elements. These elements are then rendered to the React DOM. All the
React components are written in JSX. To embed any JavaScript expression in a
piece of code written in JSX we will have to wrap that expression in curly braces
{}.
Example of JSX: The name written in curly braces { } signifies JSX

const name = "Learner";

const element = <h1>Hello,

{ name }.Welcome to GeeksforGeeks.< /h1>;

7. What are components and its type in React?

A Component is one of the core building blocks of React. In other words, we can
say that every application you will develop in React will be made up of pieces
called components. Components make the task of building UIs much easier.
In React, we mainly have two types of components:
 JAI SHRIRAM ENGINEERING COLLEGE
TIRUPPUR – 638 660
Approved by AICTE, New Delhi & Affiliated to Anna University, Chennai
Recognized by UGC & Accredited by NAAC and NBA (CSE and ECE).

 Functional Components: Functional components are simply javascript

functions. We can create a functional component in React by writing a
javascript function.

 Class Components: The class components are a little more complex than the
functional components. The functional components are not aware of the other
components in your program whereas the class components can work with
each other. We can pass data from one class component to another class
component.
8. How do browsers read JSX?
In general, browsers are not capable of reading JSX and only have the capacity
to read pure JavaScript. The web browsers read JSX with the help of a transpiler.
Transpilers are used to convert JSX into JavaScript. The transpiler used is called
Babel
9. Explain the steps to create a react application and print hello world?
To install react, first, make sure Node is installed on your computer. After
installing Node. Open the terminal and type the following command.
npx create-react-app <<Application_Name>>
Navigate to the folder.
cd <<Application_Name>>
This is the first code of ReactJS Hello World!

import React from 'react';

import './App.css';

function App() {

return (

<div className="App">

Hello World !
 JAI SHRIRAM ENGINEERING COLLEGE
TIRUPPUR – 638 660
Approved by AICTE, New Delhi & Affiliated to Anna University, Chennai
Recognized by UGC & Accredited by NAAC and NBA (CSE and ECE).

</div>

);

export default App;

Type the following command to run the application

npm start
10. How to create an event in React?
To create an event write the following code.

function Component(){

doSomething(e){

e.preventDefault();

// Some more response to the event

return (

<button onEvent={doSomething}></button>

);
 JAI SHRIRAM ENGINEERING COLLEGE
TIRUPPUR – 638 660
Approved by AICTE, New Delhi & Affiliated to Anna University, Chennai
Recognized by UGC & Accredited by NAAC and NBA (CSE and ECE).

11. Explain the creation of a List in react?

Lists are very useful when it comes to developing the UI of any website. Lists
are mainly used for displaying menus on a website, for example, the navbar
menu. To create a list in React use the map method of array as follows.

import React from 'react';

import ReactDOM from 'react-dom';

const numbers = [1,2,3,4,5];

const updatedNums = numbers.map((number)=>{

return <li>{number}</li>;

});

ReactDOM.render(

<ul>
 JAI SHRIRAM ENGINEERING COLLEGE
TIRUPPUR – 638 660
Approved by AICTE, New Delhi & Affiliated to Anna University, Chennai
Recognized by UGC & Accredited by NAAC and NBA (CSE and ECE).

{updatedNums}

</ul>,

document.getElementById('root')

);

12. What is a key in React?

A “key” is a special string attribute you need to include when creating lists of
elements in React. Keys are used in React to identify which items in the list are
changed, updated, or deleted. In other words, we can say that keys are used to
give an identity to the elements in the lists.
13. How to write a comment in React?
There are two ways to write comments in React.
 Multi-line comment: We can write multi-line comments in React using the
asterisk format /* */.
 Single line comment: We can write single comments in React using the
double forward slash //.
14. Explain the difference between React and Angular?
Field React.js Angular

React.js is a JavaScript library. Angular is a framework.

As it indicates react js updates Angular updates the Real
only the virtual DOM is present DOM and the data flow is
and the data flow is always in a ensured in the architecture in
Used as single direction. both directions.

React.js is more simplified as it The architecture is complex as

follows MVC ie., Model View it follows MVVM models ie.,
Architecture Control. Model View-ViewModel.
 JAI SHRIRAM ENGINEERING COLLEGE
TIRUPPUR – 638 660
Approved by AICTE, New Delhi & Affiliated to Anna University, Chennai
Recognized by UGC & Accredited by NAAC and NBA (CSE and ECE).

Field React.js Angular

It is less scalable than React

It is highly scalable.
Scalability JS.

It supports Uni-directional data It supports Bi-directional data

Data binding which is one-way data binding which is two data
Binding binding. binding.

DOM It has virtual DOM. It has regular DOM.

15. Explain the use of render method in React?
React renders HTML to the web page by using a function called render(). The
purpose of the function is to display the specified HTML code inside the
specified HTML element. In the render() method, we can read props and state
and return our JSX code to the root component of our app.
16. What is state in React?
The state is an instance of React Component Class that can be defined as an
object of a set of observable properties that control the behavior of the
component. In other words, the State of a component is an object that holds some
information that may change over the lifetime of the component.
17. Explain props in React?
React allows us to pass information to a Component using something called
props (which stands for properties). Props are objects which can be used inside a
component
We can access any props inside from the component’s class to which the props is
passed. The props can be accessed as shown below:
this.props.propName;
18. What is higher-order component in React?
Higher-order components or HOC is the advanced method of reusing the
component functionality logic. It simply takes the original component and
returns the enhanced component. HOC are beneficial as they are easy to code
and read. Also, helps to get rid of copying same logic in every component.
19. Explain the difference between functional and class component in
React?
 JAI SHRIRAM ENGINEERING COLLEGE
TIRUPPUR – 638 660
Approved by AICTE, New Delhi & Affiliated to Anna University, Chennai
Recognized by UGC & Accredited by NAAC and NBA (CSE and ECE).

Class Components
Functional Components

A functional component is just a plain A class component requires you to

JavaScript pure function that accepts extend from React. Component and
props as an argument create a render function

It must have the render() method

No render method used
returning JSX

Also known as Stateless components Also known as Stateful components

React lifecycle methods (for example, React lifecycle methods can be used
componentDidMount) cannot be used inside class components (for example,
in functional components. componentDidMount).

Constructor is used as it needs to store

Constructors are not used.
state.
20. Explain one way data binding in React?
ReactJS uses one-way data binding which can be Component to View or View to
Component. It is also known as one-way data flow, which means the data has
one, and only one way to be transferred to other parts of the application. In
essence, this means child components are not able to update the data that is
coming from the parent component. It is easy to debug and less prone to errors.