React

Question 1

What is React?

Answer 1

React is a free and open-source front-end JavaScript library for building user interfaces based on UI components.

Question 2

What is a React element?

Answer 2

A React Element is what gets returned from components. It’s an object that virtually describes the DOM nodes that a component represents. With a function component, this element is the object that the function returns. With a class component, the element is the object that the component’s render function returns.

Question 3

How do you mount a React element to the DOM?

Answer 3

ReactDOM.render( )

Question 4

what is JSX?

Answer 4

Its a syntax extension to JavaScript.

JSX stands for JavaScript XML. JSX allows us to write HTML in React.

Question 5

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

Answer 5

If you give some JSX to Babel, you will see that JSX is just sugar for React. createElement calls. This is why we need to import React if we use JSX.

Question 6

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

Answer 6

babel-loader?

Question 7

What is a React component?

Answer 7

Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML. Components come in two types, Class components and Function components, in this tutorial we will concentrate on Function components.

function or class and returns a react element. it can be an element tree.

Question 8

How do you define a function component in React?

Answer 8

So a Functional Component in React:
is a JavaScript/ES6 function.
must return a React element (JSX)
always starts with a capital letter (naming convention)
takes props as a parameter if necessary.

Question 9

How do you mount a component to the DOM?

Answer 9

ReactDOM.render( react-element, container)

Question 10

What are props in React?

Answer 10

React has a special object called a prop (stands for property) which we use to transport data from one component to another.

Question 11

How do you pass props to a component?

Answer 11

To the component as an argument

Question 12

How do you write JavaScript expressions in JSX?

Answer 12

To write a JavaScript expression within JSX you will have to surround the JavaScript code in { } brackets. In the React/JSX code below I am mixing JavaScript expressions (e.g., 2+2 ), surround by { } among the JSX that will eventually get evaluated by JavaScript.

Question 13

How do you create “class” component in React?

Answer 13

Creating a class component is pretty simple; just define a class that extends Component and has a render function.

render() purpose is to return the react element. thats it.

Question 14

How do you access props in a class component?

Answer 14

using ‘this’ keyword

Question 15

What is the purpose of state in React?

Answer 15

State is a plain JavaScript object used by React to represent an information about the component’s current situation. It’s managed in the component (just like any variable declared in a function)

keep track of values which change over time

Question 16

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

Answer 16

pass into the props value

Question 17

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

Answer 17

map method

Question 18

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

Answer 18

unique value that represents each object

Question 19

What are controlled components?

Answer 19

A controlled component is a component that renders form elements and controls them by keeping the form data in the component’s state. In a controlled component, the form element’s data is handled by the React component (not DOM) and kept in the component’s state.

Question 20

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

Answer 20

value and onChange

Question 21

When does React call a component’s componentDidMount method?

Answer 21

componentDidMount() is invoked immediately after a component is mounted (inserted into the tree). Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request.

happens the first time after the first successful render.

Question 22

Name three React.Component lifecycle methods.

Answer 22

Mounting, Updating, Unmounting, render, componentdidmount etc….

Question 23

How do you pass data to a child component?

Answer 23

pass a prop