React

Question 1

What is React?

Answer 1

React is a declarative, efficient, and flexible JavaScript library for building user interfaces

Question 2

What is a React element?

Answer 2

React elements are plain objects that describe what you want to see on the screen.

Question 3

How do you mount a React element to the DOM?

Answer 3

Using the ReactDOM.render( ) method:

ReactDOM.render(element, container[, callback])

ReactDOM.render( ) method takes a JSX expression, creates a corresponding tree of DOM nodes, and adds that tree to the DOM

Question 4

What is JSX?

Answer 4

JSX is a syntax extension to JavaScript that produces React “elements”

Question 5

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

Answer 5

Because the React library must be in scope from your JSX code. It is not used explicitly but the compiler (Babel) uses it when converting JSX to React.createElement( )

Question 6

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

Answer 6

By installing webpack, webpack-cli, babel-loader, @babel/core, @babel/plugin-transform-react-jsx to your packge.json devDependencies

Question 7

What is a React component?

Answer 7

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

The simplest way to define a component is to write a JavaScript function.  
You can also use an ES6 class to define a component.

Question 9

How do you mount a component to the DOM?

Answer 9

Using ReactDOM.render( ) method - use the function name as the type

Question 10

What is the difference between a library and a framework?

Answer 10

A library is code that you call (lodash is a library, you call it when you want it to return something.)
A framework is code that is called by the framework (You do not call your own components, React calls your components.

Question 11

What are props in React?

Answer 11

JSX attributes and children as a single object

Question 12

How do you pass props to a component?

Answer 12

Add the prop to your JSX like you would add an attribute to an HTML tag

Question 13

How do you write JavaScript expressions in JSX?

Answer 13

You can put any valid JavaScript expression (not statements) inside curly braces in JSX

e.g: {2 + 2} , {user.firstName} , {formatName(user)} etc.

Question 14

How do you create “class” component in React?

Answer 14

To define a React component class, you need to extend React.Component and you must define the render( ) method.

Begin with the class keyword followed by the className followed by extends React.Component

e.g: class CustomButton extends React.Component {
  render( ) {
    return {this.props.text};
  }
}

Question 15

How do you access props in a class component?

Answer 15

Use this to access props in a class component.

e.g: this.props.propName

Question 16

What is the purpose of a state in React?

Answer 16

When the state object changes, the component re-renders depending on the state

So the component can render different things depending on the state

Question 17

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

Answer 17

By assigning it to a prop on the react element - the prop starts with on & is in camelCase - the event handler is in camelCase

Question 18

What is the virtual DOM?

Answer 18

The virtual DOM is a representation of a DOM object. React can save the virtual DOM so when the state updates and there is a re-render - react compares the old version and the new version and only replaces any differences (rather than deleting and re-creating the whole thing)

Question 19

What are controlled components?

Answer 19

An input form element whose value is controlled by React in that the value prop is saved in and based on the components state.

Question 20

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

Answer 20

value / onChange

Question 21

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

Answer 21

map ( ) method

Question 22

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

Answer 22

The best value for a “key” prop is a string that uniquely identifies a list item among its siblings (like an ID). Indexes are not recommended.

Question 23

When does React call a component’s componentDidMount method?

Answer 23

componentDidMount( ) is invoked immediately after a component is mounted (inserted into the tree).

If you need to load data from a remote endpoint, this is a good place to instantiate the network request.

Question 24

Name three React.Component lifecycle methods.

Answer 24

render( ), constructor( ), componentDidMount( ), componentDidUpdate( ), componentWillUnmount( ),

Question 25

How do you pass data to a child component?

Answer 25

Via props

Question 26

Why React?

Answer 26

React is fast and can handle complex updates and still feel quick and responsive.

React is modular - Instead of writing large, dense files of code, you can write many smaller, reusable files. React’s modularity can be a beautiful solution to JavaScript’s maintainability problems.

React is scalable. Large programs that display a lot of changing data are where React performs best

Question 27

Is a JSX element the same thing as an HTML element?

Answer 27

No A JSX element is not the same thing as an HTML element. A JSX element is a description of what we want to see on the page.

JSX elements are treated as JavaScript expressions and can go anywhere a JavaScript expression goes - saved to a variable, passed in a function, stored in an object or array…