1) What is react js?
React is a free and
open-source front-end JavaScript library for building user interfaces or UI
components.
It is maintained by Facebook and a community of individual developers and
companies. React can be used as a base in the development of single-page or
mobile applications.
2) Why react js is used?
It's used for handling
the view layer for web and mobile apps. React also allows us to create
reusable UI components.
3) 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.
Components: Components are the building blocks of any React
application, and a single app usually consists of multiple
components.
Virtual DOM: React keeps a lightweight representation of the real DOM
in the memory, and that is known as the virtual DOM.
One-way data-binding: React’s one-way data binding keeps everything
modular and fast.
High performance: React updates only those components that have
changed, rather than updating all the components at once.
4) 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
5) 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
6) What is 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.
7)Explain React state and props.
|
Props |
State |
|
Immutable |
Owned by its component |
|
Has better performance |
Locally scoped |
|
Can be passed to child components |
Witeable/Mutable |
|
has setState() method to modify properties |
|
|
Changes to state can be asynchronous |
|
|
can only be passed as props |
8) Explain the use of the arrow function in React
The arrow function helps you to predict the behavior of bugs when passed
as a callback. Therefore, it prevents bug caused by this all together.
9) What are the lifecycle steps of React?
Important lifecycle steps of React js are:
- Initialization
- State/Property
updates
- Destruction are
the lifecycle of React
10) State the main difference between Pros and
State
The main difference the two is that the State is mutable and Pros are
immutable.
11) Explain pure components in React js
Pure components are the fastest components which can replace any
component with only a render(). It helps you to enhance the simplicity of the
code and performance of the application.
12) What kind of information controls a segment in
React?
There are mainly two sorts of information that control a segment: State
and Props
- State: State
information that will change, we need to utilize State.
- Props: Props
are set by the parent and which are settled all through the lifetime of a
part.
13) What is ‘create-react-app’?
‘create-react-app’ is a command-line tool which allows you to create one
basic react application.
14) Explain the use of ‘key’ in react list
Keys allow you to provide each list element with a stable identity. The
keys should be unique.
15) What are children prop?
Children props are used to pass component to other components as
properties. You can access it by using
{props.children}
16) Explain error boundaries?
Error boundaries help you to catch Javascript error anywhere in the
child components. They are most used to log the error and show a fallback UI.
17) What is the use of empty tags <>
</>?
Empty tags are used in React for declaring fragments.
18) Explain strict mode
StrictMode allows you to run checks and warnings for react components.
It runs only on development build. It helps you to highlight the issues without
rendering any visible UI.
19) What are reacted portals?
Portal allows you to render children into a DOM node. CreatePortalmethod is
used for it.
20) What is Context?
React context helps you to pass data using the tree of react components.
It helps you to share data globally between various react components.
21) What is the use of Webpack?
Webpack in basically is a module builder. It is mainly runs during the
development process.
22) What is Babel in React js?
Babel, is a JavaScript compiler that converts latest JavaScript like
ES6, ES7 into plain old ES5 JavaScript that most browsers understand.
23) How can a browser read JSX file?
If you want the browser to read JSX, then that JSX file should be
replaced using a JSX transformer like Babel and then send back to the browser.
24) What are the major issues of using MVC
architecture in React?
Here are the major challenges you will face while handling MVC
architecture:
- DOM handling is
quite expensive
- Most of the
time applications were slow and inefficient
- Because of
circular functions, a complex model has been created around models and
ideas
25) What can be done when there is more than one
line of expression?
At that time a multi-line JSX expression is the only option left for
you.
26) What is the reduction?
The reduction is an application method of handling State.
27) Explain the term synthetic events
It is actually a cross-browser wrapper around the browser’s native
event. These events have interface stopPropagation() and preventDefault().
28) When should you use the top-class elements for
the function element?
If your element does a stage or lifetime cycle, we should use top-class
elements.
29) How can you share an element in the parsing?
Using the State, we can share the data.
30) Explain the term reconciliation
When a component’s state or props change then rest will compare the
rendered element with previously rendered DOM and will update the actual DOM if
it is needed. This process is known as reconciliation.
31) How can you update state in react js?
A state can be updated on the component directly or indirectly.
0 Comments