React

Question 1

What is React?

Answer 1

React is a JavaScript library for building user interfaces.

Question 2

What is a React element?

Answer 2

It is the basic building block in a react application, it is an object representation of a virtual DOM node. React Element contains both type and property. It may contain other Elements in its props. React Element does not have any methods, making it light and faster to render than components.

Data type is an object that essentially describes a DOM element

Question 3

How do you mount a React element to the DOM?

Answer 3

You can tell React to “mount” it into a DOM container by calling: ReactDOM.

Question 4

What is JSX?

Answer 4

It is a syntax extension to JavaScript. JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React.

Question 5

Why must the React object be imported when authoring JSX in a module?

Answer 5

The JSX gets internally into many React.createElement() function calls. Now because of this, we need to import React from “react” since internally every JSX is creating a React Component using JSX transformer.

So, for using the createElement function we need to import React and if we do not import it then React.createElement function will be undefined.

Syntactic sugar
const element = <h1>Hello, JSX!</h1>

turns into

const element = React.createElement(‘h1’, null, ‘Hello, JSX!’)

Question 6

How can you make Webpack and Babel work together to convert JSX into valid JavaScript?

Answer 6

the babel loader, install the plugin that transforms react into JSX

Question 7

What is a React component?

Answer 7

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

Question 8

How do you define a function component in React?

Answer 8

JavaScript Function

function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

or ES6 class

class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}

Question 9

How do you mount a component to the DOM?

Answer 9

import React from ‘react’;
import ReactDOM from ‘react-dom/client’;

function CustomButton( ) {
return <button>Click me!</button>;
}

const divRoot = document.getElementById(‘root’);

const root = ReactDOM.createRoot(divRoot);

root.render(<CustomButton></CustomButton>);

Question 10

What are props in React?

Answer 10

In ReactJS, the props are a type of object where the value of attributes of a tag is stored. The word “props” implies “properties”, and its working functionality is quite similar to HTML attributes. Basically, these props components are read-only components.

Question 11

How do you pass props to a component?

Answer 11

Props is a key value pair that looks like an attribute: ‘text=”i”

i.e.
const element = (

<div>
<CustomButton></CustomButton>
<CustomButton></CustomButton>
<CustomButton></CustomButton>
</div>

);

React components use props to communicate with each other. Every parent component can pass some information to its child components by giving them props. Props might remind you of HTML attributes, but you can pass any JavaScript value through them, including objects, arrays, and functions.

First, pass some props to Avatar. For example, let’s pass two props: person (an object), and size (a number):

export default function Profile() {
return (
<Avatar
person={{ name: ‘Lin Lanying’, imageId: ‘1bX5QH6’ }}
size={100}
/>
);
}

If double curly braces after person= confuse you, remember they are merely an object inside the JSX curlies.

Now you can read these props inside the Avatar component.

Question 12

How do you write JavaScript expressions in JSX?

Answer 12

To add JavaScript code inside JSX, we need to write it in curly brackets like this:

const App = () => {
const number = 10;
return (

<div>
<p>Number: {number}</p>
</div>

);
};

Here’s a Code Sandbox Demo.

Inside the curly brackets we can only write an expression that evaluates to some value.

Question 13

How do you create “class” component in React?

Answer 13

class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}

Question 14

How do you access props in a class component?

Answer 14

this.props

Question 15

const element = <h1>Hello, JSX</h1>

Answer 15

React element of type h1 with a child of Hello, JSX, being assigned to const element

Question 16

What is the purpose of state in React?

Answer 16

What Is ‘State’ in ReactJS? The state is a built-in React object that is used to contain data or information about the component. A component’s state can change over time; whenever it changes, the component re-renders.

Question 17

How do you pass an event handler to a React element?

Answer 17

You add an attribute like onClick to the element and set it to a function

Add the event attribute and set that equal to a JavaScript expression and set that to a function

onClick={this.handleClick}

Question 18

What are controlled components?

Answer 18

Controlled Components: In React, Controlled Components are those in which form’s data is handled by the component’s state. It takes its current value through props and makes changes through callbacks like onClick, onChange, etc.

Question 19

What two props must you pass to an input for it to be “controlled”?

Answer 19

A controlled input accepts its current value as a prop, as well as a callback to change that value.

A value prop and an onChange prop

Question 20

What Array method is commonly used to create a list of React elements?

Answer 20

map( ) array method. The . map( ) method allows you to run a function on each item in the array, returning a new array as the result. In React, map( ) can be used to generate lists.

Question 21

What is the best value to use as a “key” prop when rendering lists?

Answer 21

The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys:

const todoItems = todos.map((todo) =>
<li key={todo.id}>
{todo.text}
</li>
);

When you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort:

const todoItems = todos.map((todo, index) =>
// Only do this if items have no stable IDs
<li key={index}>
{todo.text}
</li>
);

We don’t recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state. Check out Robin Pokorny’s article for an in-depth explanation on the negative impacts of using an index as a key. If you choose not to assign an explicit key to list items then React will default to using indexes as keys.