React.js

Question 1

What is React.js?

Answer 1

A JavaScript library for building user interfaces.

Question 2

What is a React element?

Answer 2

It is an object that describes what the actualDocument Object Model(DOM)element should look like.

Question 3

What does the createElement( ) method do?

Answer 3

It creates & returns a new React element of the given type.

Question 4

What is JSX?

Answer 4

JSX is a syntax extension to JavaScript that’s generally used with React to describe what the DOM should look like. It looks like an HTML tag.

Question 5

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

Answer 5

Since JSX compiles into calls toReact.createElement from Babel, theReactlibrary must also always be in scope from your JSX code.

Question 6

What is a React component?

Answer 6

Components areindependent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML. Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

Question 7

How do you define a function component in React?

Answer 7

First, you define a function with a name (first letter of name should be capitalized). Then we have a parameter called props that represent the property. Inside the code block we have code that returns JSX code.

Question 8

How do you mount a component to the DOM?

Answer 8

By using the render method of the ReactDOM object.

Question 9

How you install React & ReactDOM as a dependency?

Answer 9

npm install react + npm install react-dom

Question 10

Fill in the blank.

Fundamentally, JSX just provides _____ for the React.createElement( ) function.

Answer 10

Syntactic sugar

Question 11

How do you put a JavaScript expression in JSX?

Answer 11

You put a JavaScript expression inside the curly braces in JSX inside the JSX tags.

For example:

function getGreeting(user) {
  if (user) {
    return <h1> Hello, {formatName(user)}! </h1>;
  }

Question 12

How should you name React elements and why should name it that way?

Answer 12

First letter should be uppercased or else React will think of it as an HTML tag and it will be converted as a string from Babel.

Question 13

What are props in React?

Answer 13

Props arearguments passed into React components. Props (which stands for properties) is an object and it contains all of thepropspassed to the child component.

Question 14

How do you pass props to a component?

Answer 14

You create a react element in the component, then assign the prop name to a value.

Question 15

How do you write JavaScript expressions in JSX?

Answer 15

You can write any JavaScript expression by surrounding it with{ }.

Question 16

In React, how is code reuse primarily achieved?

Answer 16

Code reuse in React is primarily achieved through composition rather than inheritance.

Question 17

What is composition?

Answer 17

Composition is a structure where everything in JavaScript is treated as an object—even functions in JavaScript are treated as a high-class object. Such objects are quite complex in nature to make large complex objects simple, many small objects are composed together.

Question 18

What is inheritance?

Answer 18

Inheritance is gaining some or all traits (functionality) of parent and then providing a relational structure.

Question 19

How do you create “class” component in React?

Answer 19

You need to define a class that extends React.Component. Then define a render ( ) method returning a React element.

Question 20

How do you access props in a class component?

Answer 20

By using this.props.

Question 21

What is render ( ) and is it being called or defined in a React class component?

Answer 21

Render( ) is a prototype method that is supposed to render the returned React element. The method is defined in a class component.

Question 22

Why is render ( ) being defined considering it looks like a function call with a code block?

Answer 22

This is syntactic sugar for a property name and its value. So render ( ) is creating a property called render on the class with a value of render ( ).

Question 23

What is the purpose of state in React?

Answer 23

Since state is managed only within the component, the purpose of state is to represent information about the component’s current situation. In other words, it keeps track of values that change over time

Question 24

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

Answer 24

You pass an event handler to a React element by setting the prop of the react element to onClick (or whatever the event is) with its value inside a curly bracket.

Question 25

What is the difference between props and state?

Answer 25

They’re both plain JavaScript objects, but State is private and fully controlled by the component.

Question 26

What does the setState( ) method do?

Answer 26

Sends a request to React that this component and its children need to be re-rendered with the updated state. This is the primary method you use to update the user interface in response to event handlers and server responses.

Question 27

What is a key in React?

Answer 27

A “key” is a special string attribute you need to include when creating lists of elements. It helps React identify which items have changed, are added, or are removed.

Question 28

What is the best way to pick a key?

Answer 28

Use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys.

Question 29

What happens when you choose not to assign an explicit key to list items?

Answer 29

React will default to using indexes as keys.

Question 30

WhatArraymethod is commonly used to create a list of React elements?

Answer 30

Array.map ( )

Question 31

What are controlled components?

Answer 31

An input form element whose state and value is controlled by React.

Question 32

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

Answer 32

value & onChange