REACT_JS_AI_KIT

27 September 2023 21:26

Can browsers understand JSX?

No. Browsers are capable of understanding HTML, CSS and JS There is a

tool called babel which converts JSX in to JS which is understood by browser

What is a Component in React?

A component represents a section of a webpage, such as the header, body or

footer When developing React applications, we create individual components
for each section The key advantage is they're reusable across multiple
webpages.

Why should a component name start with uppercase letter in React?

React treats the components starting with lowercase letters as HTML

elements, which is why a component should always start with a uppercase
letter.

What are props in React?

Props short hand for properties, are a way to pass information between React
components Here Information can be styles, text or methods By changing
props, we can modify a component's behavior or appearance, making them
more customisable and reusable.

What is a React Component Life Cycle?

A React Component goes through three main phases in its lifetime. Mounting.
Updating. Unmounting In Mounting phase, the component gets created and
inserted into the browser. In Updating phase, the component gets updated
whenver there is a change in state or props. In Unmounting phase, the
component gets removed from the browser.

What is a Virtual DOM in React?

React maintains a light weight in memory representation of a browser DOM

called Virtual DOM Its essentially a js object representation of a React
Element This helps React reduce the number of DOM manipulations by
updating only whats necessary.

New Section 6 Page 1

updating only whats necessary.

What is a one way data flow in React?

In react, DATA can be passed in only one direction, from a parent component
to child component via PROPS Data can be styles, text or methods and
CHANGES to data is managed by parent component

What are the advantages of using create react app CLI?

It's a tool to quickly create a new React project with just one command. This
comes with pre configured packages like ESLint, Babel, or Webpack These
packages help you to write clean and efficient code without any need to
manually configure Overall, It saves time and makes it easier to get started
with a React project.

What are the differences between React and ReactDOM packages?

React and ReactDOM form the building blocks of the ReactJS library. While
React is responsible to create and manage components, whereas ReactDOM
is responsible for displaying the components on the webpage Or React and
ReactDOM are essential parts of the ReactJS library. React creates and
manages components, whereas ReactDOM displays the components on the
webpage

What are the differences between React JS and Bootstrap?

React JS is a JavaScript library used for building web applications with

reusable components, whereas Bootstrap is a CSS framework that provides
pre defined CSS classes to help developers design consistent and responsive
layouts with ease.

What is the difference between React Native and ReactJS?

ReactJS is a JavaScript library for building web applications, while React

Native is a framework for building mobile applications on both Android and
iOS platforms.

What are the most common ways to style a React Component?

The three most common ways to style a react component are CSS Classes,
Inline styles, or Styled Components

New Section 6 Page 2

What is npm?

NPM stands for Node Package Manager. It is a tool used to share, install and
manage packages

How much do you rate yourself in React?

I would rate myself an 8 out of 10 in React. I have a good understanding of

fundamental concepts such as components, state, props, and lifecycle
methods. I have used React Router for application navigation and managing
authentication using cookies. Moreover, I have integrated third-party
packages like Recharts and React Popup into various projects. I have also
familiarized myself with React context and styled components. I have
developed many applications using React, including real-world application
clones such as an e-commerce app, a movies app, and a Spotify clone.
Throughout all the projects, I followed clean code principles, maintained a
uniform folder structure, and applied meaningful naming conventions.

What is package.json file?

Its a configuration file. It keeps track of the packages your project depends on,
their versions, and some project specific settings.

What are Developer Tools in a browser?

They help developers to debug web applications easily. They provide a range
of features like, 1. Inspecting HTML elements 2. Modifying CSS styles 3.
Analyzing network activity 4. Debugging JavaScript code

What are Styled Components in React?

Styled Components is a popular library for styling React applications. It allows

developers to write CSS code with in JS file and tie the styles directly to React
components. This approach is often termed as CSS in JS.

Explain the use of Webpack and Babel in ReactJS?

When building ReactJS application, we usually write our code in multiple files
(components, styles, etc.). Webpack combines all of them into a single,
optimized file and this process is called bundling Browsers are not capable of
understanding JSX. By using Babel, we can convert JSX into JS that
browsers can understand

New Section 6 Page 3

browsers can understand

Are cookies stored on server side?

No. Cookies are stored on the client side, within the user's web browser They
allow servers to recognize and track users by sending and receiving cookie
data in HTTP requests.

What is browser DOM?

Browser DOM is usually referred to as DOM. DOM means Document Object

Model. A web page's HTML is like a tree, with different branches representing
elements like paragraphs, images, and headings. DOM represents this tree
like structure of the HTML document DOM makes it easier for developers to
change the contents, style, and behavior of the web page using JavaScript

What is single page application?

A Single Page Application is a web application that dynamically updates

content within a single HTML page without full page reloads It provides a
smooth and seamless user experience

What is a React Fragment?

A React Fragment is a lightweight wrapper for grouping elements in a React

component without adding extra nodes to the DOM It is useful for maintaining
a cleaner and more semantical HTML structure.

What is the purpose of render() in React?

The render method in React class components specifies the JSX to be

displayed in the browser. It's a built in method that's automatically called when
the component is created or when its state/props change.

What is meant by React JSX?

Its a syntax that simplifies creating react elements by allowing HTML like code
in JavaScript, making the code easier to read and understand.

What is a state in React?

state is a JS object in which we store the component's data that changes over
time. When the state object changes, the component re renders.

New Section 6 Page 4

time. When the state object changes, the component re renders.

How many elements does a React component returns?

A React Component can only return one element, but by using a React
Fragment we can group multiple elements together and then return them.

What is an Event in React?

A event in React is an action, such as a user clicking a button, hovering over

an element, or submitting a form. React allows you to respond to these events
by attaching event handlers that run when the event occurs.

What are stateless Components in react ?

Stateless components in React don't have their own state These components
obtain data and functionality from parent components via props. Their primary
use is to construct presentation elements that do not require state
management or user interaction handling

How to update the state of a React Component?

Use the setState method you can update the state of a react component You
can either give an object or a function as an argument.

What is the extends keyword in React Class Component?

Extends keyword is used to inherit properties and methods from the base
React.Component class. This allows the component to manage state, handle
lifecycle events, and render JSX elements to the browser

What are the differences between props and state?

Props are typically used for passing data from a parent component to a child
component, while state is used to manage data that changes over time within
a component. Props are immutable and cannot be changed, while state can
be changed.

What is Prop Drilling in React?

Its a process in which you pass props from a parent component through
multiple layers of child components, even if intermediate components don't
need props but only help in passing. This can make the code more complex
New Section 6 Page 5
need props but only help in passing. This can make the code more complex
and hard to maintain. To avoid prop drilling, you can use context, higher order
components, or state management libraries like Redux.

What is meant by In React, everything is a component?

In React, everything is a component means that the entire frontend application

is built using modular, reusable pieces called components. Each component is
responsible for a specific part of the application and can be combined with
other components to create complex, interactive frontend applications. (or) In
React, everything is a component means that the entire frontend application is
built by combining reusable, self contained building blocks called components.

When will we use the componentDidMount method?

It is used to do operations on the components after the initial render. This

method is commonly used for tasks such as fetching data from APIs or setting
up timers

What is meant by REST APIs?

REST stands for Representational State Transfer. It enables communication

between systems by using HTTP methods such as GET, POST, PUT, and
DELETE. REST APIs work with resources, which are identified by unique
URLs.

What are the differences between Cookies and Local Storage?

Let dive into it. Cookies and Local Storage are both client side storage
mechanisms. Cookies can store small amounts of data and are sent to the
server with each HTTP request, making them suitable for maintaining user
preferences. They have an expiration time. Local Storage, on the other hand
can store large amounts of data in browser. It doesn't have built in expiration
time and is only accessible through client side JavaScript.

Which directory is used to save the React Components?

In a typical React project created with tools like Create React App, the
components are usually saved in the src or components directory.

How do we pass a property from a parent component to a child component?

Through Props

What are controlled and uncontrolled Components in React?

New Section 6 Page 6
What are controlled and uncontrolled Components in React?

In React, controlled and uncontrolled components refer to two different ways

of managing form data. In a controlled component, the component itself
manages the form data using its state or props. In an Uncontrolled
Components, form data is managed by the browser instead of a React
Component.

What is React Context?

It is a way to share data between components without needing to pass the

data via props. It's helpful when you want to share data with many
components at various levels in your application.

What is children prop in react?

Its a special prop that allows a parent component pass components or

elements as content to a child component. It enables to create more generic
and reusable components in react

What is API integration?

API stands for Application Programming Interfaces API integration in frontend

development typically involves making HTTP requests to backend server
APIs, parsing the response and using the data in the application.

Why react is faster than Javascript?

React is designed to optimize website performance by using Virtual DOM,

which updates only what is necessary, thus reducing the number of actual
DOM manipulations. This, along with other optimization techniques like
grouping or batching updates and using reusable components, can make
React based applications faster and more efficient than JavaScript
applications.

What are the differences between React JS and JavaScript?

JavaScript is a language used for building both frontend and backend

applications While React is a popular library built on top of javascript
specifically designed for building frontend applications

What is a Multi page application?

A multi page web application has different pages, with each page being a
separate HTML document. When a user interacts with the app, like clicking a

New Section 6 Page 7

separate HTML document. When a user interacts with the app, like clicking a
link or submitting a form, the browser requests the server for a new HTML
document, which makes the whole page refresh.

What is React?

React is a JavaScript library for building dynamic and interactive frontend

applications.

Why React instead of Angular?

React is JS library focused on building UI components, making it easier to

learn and integrate with other libraries. Additionally, React has a large
community and ecosystem, providing numerous resources and third party
libraries. However, choosing between React and Angular ultimately depends
on your projects specific needs and your familiarity with them.

What is React.createClass?

React.createClass was a method that returns a class component in earlier

versions of react, but it has been replaced by the ES6 class syntax.

What are the differences between React JS and Node JS?

React JS is a JavaScript library used for building frontend web applications,

while Node JS is a runtime environment that allows you to run JavaScript on
the server side. It is used for building backend web applications

Why shouldnt we modify the state directly?

Modifying state directly in React can cause unexpected results like component
not getting updated correctly Using relevant methods like setState or useState
makes React keep track of the changes and ensure that components update
correctly

Why is the key prop important for list elements in React?

When rendering a list of elements, React needs a way to identify which

elements have been changed, added or removed. And for that React uses key
prop to identify each element in a list of elements.

What is React JS used for?

React JS is a popular JavaScript library used for building frontend

New Section 6 Page 8
React JS is a popular JavaScript library used for building frontend
applications. Its advantages include improved performance through virtual
DOM, reusable components for easier development, and a one way data flow
for better state management.

What are the differences between class components and functional

components?

Class components and functional components are two ways to build React
components. Lets look at Four major differences between them: Class
components use classes, while functional components use functions. Class
components have built in state, while functional components need hooks like
useState Class components have Lifecycle methods, while functional
components need hooks like useEffect. Class components have this keyword,
but functional components don't.

Explain about React JS Component lifecycle Phases?

Mounting In the Mounting phase, the instance of a component is created and

inserted into the DOM. Updating In Updating phase, the component is
updated whenever there is a change in the component's state. Unmounting: In
Unmounting phase, the component instance is removed from the DOM.

What are the Lifecycle methods of React?

Some of the React Component Lifecycle methods are: componentDidMount

Executes after the initial render. shouldComponentUpdate: It is invoked before
rendering when new props or state are being received. It returns true by
default. If it returns false, the render method will not be called.
componentDidUpdate It is invoked immediately after updating occurs.
componentWillUnmount: It is invoked immediately before a component is
unmounted and destroyed.

How to use API call in a React Component?

You can make an API call inside the lifecycle method "componentDidMount"
in class component or within a "useEffect" hook in functional component. You
use the "fetch" function, process the response, and then update the
component's state to trigger a re-render.

Why should we use Hooks?

Hooks enable state and lifecycle features in functional components,

enhancing code reusability, readability, and testing. They eradicate the need
for class components and offer a simplified approach to state management.
Hooks also facilitate access to React features like context, etc.

New Section 6 Page 9

Hooks also facilitate access to React features like context, etc.

What is Reconciliation?

Reconciliation is the process in React where the new Virtual DOM is

compared with the current one, and any differences are efficiently updated in
the actual HTML DOM. This process minimizes unnecessary updates,
optimizing rendering performance.

What is the higher order component in React?

A Higher-Order Component (HOC) in React is a function that takes a

component and returns a new component, typically with additional properties
or behavior. It's a pattern derived from React's compositional nature, often
used for code reuse.

What is protected route in React?

A Protected Route in React restricts access to specific routes based on user

authentication. This is achieved through a wrapper component that checks
authentication, rendering the target component if authenticated, or redirecting
to a login page otherwise.

Explain about useState and useEffect in React Hooks

useState is a React Hook that controls component state, returning a state

variable and a function to update it. useEffect, another Hook, manages side
effects in functional components, like data fetching or DOM manipulation,
cleanup tasks, and runs after render by default.

What are Hooks?

Hooks, a feature in React since version 16.8, enable the use of state and
other React features within functional components, eliminating the need for
classes. They support side effects, stateful logic reuse, and improved
component composition and sharing.

What is useRef hook?

useRef is a React hook that creates a mutable object with a 'current' property.
It's commonly used to reference DOM elements or hold mutable values across
re-renders without causing additional renders.

How to pass the data from child components to parent components in React?

In React, data from child to parent components is passed via functions. The

New Section 6 Page 10

In React, data from child to parent components is passed via functions. The
parent provides a callback function as a prop to the child. The child invokes
this function, passing in the necessary data, effectively "returning" data to the
parent.

Where we can use the state in React?

State in React is used within components to manage data that can change
over time or in response to certain events. It allows components to create and
manage their own data, leading to dynamic and interactive user interfaces.

Can we maintain state in both class and functional components in React, and
if so,

howState can be maintained in both class and functional components. Class

components use the setState method, while functional components utilize
React's useState hook to manage state. This allows for stateful logic in
functional components without needing a class.

New Section 6 Page 11