Scribd
Upload
3 views4 pages

AWD Questions

The document explains key concepts in React, including the mandatory render() function for components, which returns HTML to be displayed. It differentiates between state and props, highlighting that state is mutable and local to the component, while props are immutable and used to pass data between components. Additionally, it covers the use of refs for accessing DOM nodes and provides guidelines on when to use or avoid them.

Uploaded by

Tarun Chhabra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views4 pages

AWD Questions

The document explains key concepts in React, including the mandatory render() function for components, which returns HTML to be displayed. It differentiates between state and props, highlighting that state is mutable and local to the component, while props are immutable and used to pass data between components. Additionally, it covers the use of refs for accessing DOM nodes and provides guidelines on when to use or avoid them.

Uploaded by

Tarun Chhabra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Explain the purpose of render() in React.

It is mandatory for each React component to have a render() function.


Render function is used to return the HTML which you want to display in a
component. If you need to rendered more than one HTML element, you
need to grouped together inside single enclosing tag (parent tag) such as
<div>, <form>, <group> etc. This function returns the same result each
time it is invoked.

Example: If you need to display a heading, you can do this as below.

1. import React from 'react'


2.
3. class App extends React.Component {
4. render (){
5. return (
6. <h1>Hello World</h1>
7. )
8. }
9. }
10. export default App

Points to Note:

o Each render() function contains a return statement.


o The return statement can have only one parent HTML tag.

Why is it necessary to start component names with a capital


letter?
In React, it is necessary to start component names with a capital letter. If
we start the component name with lower case, it will throw an error as an
unrecognized tag. It is because, in JSX, lower case tag names are
considered as HTML tags.
React Props
Props stand for "Properties." They are read-only components. It is an
object which stores the value of attributes of a tag and work similar to the
HTML attributes. It gives a way to pass data from one component to other
components. It is similar to function arguments. Props are passed to the
component in the same way as arguments passed in a function.

Props are immutable so we cannot modify the props from inside the
component. Inside the components, we can add attributes called props.
These attributes are available in the component as this.props and can be
used to render dynamic data in our render method.

When you need immutable data in the component, you have to add props
to reactDom.render() method in the main.js file of your ReactJS project
and used it inside the component in which you need. It can be explained
in the below example.

Explain State and Props ?

State Vs. Props


State
The state is an updatable structure that is used to contain data or
information about the component and can change over time. The change
in state can happen as a response to user action or system event. It is the
heart of the react component which determines the behavior of the
component and how it will render. A state must be kept as simple as
possible. It represents the component's local state or information. It can
only be accessed or modified inside the component or by the component
directly.

Props
Props are read-only components. It is an object which stores the value of
attributes of a tag and work similar to the HTML attributes. It allows
passing data from one component to other components. It is similar to
function arguments and can be passed to the component the same way
as arguments passed in a function. Props are immutable so we cannot
modify the props from inside the component.
React Refs
Refs is the shorthand used for references in React. It is similar to keys in
React. It is an attribute which makes it possible to store a reference to
particular DOM nodes or React elements. It provides a way to access
React DOM nodes or React elements and how to interact with it. It is used
when we want to change the value of a child component, without making
the use of props.

When to Use Refs


o When we need DOM measurements such as managing focus, text
selection, or media playback.
o It is used in triggering imperative animations.
o When integrating with third-party DOM libraries.
o It can also use as in callbacks.

When to not use Refs


o Its use should be avoided for anything that can be done declaratively.
For example, instead of using open() and close() methods on a Dialog
component, you need to pass an isOpen prop to it.
o You should have to avoid overuse of the Refs.

How to create Refs


In React, Refs can be created by using React.createRef(). It can be
assigned to React elements via the ref attribute. It is commonly assigned
to an instance property when a component is created, and then can be
referenced throughout the component.

1. class MyComponent extends React.Component {


2. constructor(props) {
3. super(props);
4. this.callRef = React.createRef();
5. }
6. render() {
7. return <div ref={this.callRef} />;
8. }
9. }

You might also like