React.js

Question 1

What is React?

Answer 1

A JavaScript library for building user interfaces

Question 2

What is a React element?

Answer 2

An element created in react.

Ex:

const $h1 = React.createElement(
  'h1',
  null,
  'Hello, React!'
);

Question 3

How do you mount a React element to the DOM?

Answer 3

ReactDOM.render( )

Ex:

ReactDOM.render($h1, $root);

Question 4

What is JSX?

Answer 4

JSX is an inline markup that looks like HTML and gets transformed to JavaScript. A JSX expression starts with an HTML-like open tag, and ends with the corresponding closing tag. JSX tags support the XML self close syntax so you can optionally leave the closing tag off.

JavaScript Syntax Extension

Question 5

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

Answer 5

So the JSX can be converted into valid JavaScript that a browser can understand.

Question 6

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

Answer 6

Use/install babel-loader. (devDependencies)

It needs this for webpack to convert the JSX to JavaScript and throw it into main.js.

Ex:

module.exports = {
resolve: {
extensions: [‘.js’, ‘.jsx’]
},
module: {
rules: [
{
test: /.jsx?$/,
use: {
loader: ‘babel-loader’,
options: {
plugins: [
‘@babel/plugin-transform-react-jsx’
]
}
}
}
]
},
performance: {
hints: false
}
};

Question 7

What is a React component?

Answer 7

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

Purpose is to return React elements.

Question 8

How do you define a function component in React?

Answer 8

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

const element = ;
ReactDOM.render(
  element,
  document.getElementById('root')
);

Question 9

How do you mount a component to the DOM?

Answer 9

function CustomButton(props) {
  return Click Me!;
}

const $root = document.querySelector(‘#root’);

ReactDOM.render(, $root);

Question 10

What are props in React?

Answer 10

“Props” is a special keyword in React, which stands for properties and is being used for passing data from one component to another. Furthermore, props data is read-only, which means that data coming from the parent should not be changed by child components.

Question 11

How do you pass props to a component?

Answer 11

insert it directly into the element

Question 12

How do you write JavaScript expressions in JSX?

Answer 12

return {props.text};

Question 13

How do you create “class” component in React?

Answer 13

class ClassName extends React.Component{
  render( ) {
  return Sample
}

Question 14

How do you access props in a class component?

Answer 14

Getting it from “this” object

Question 15

What is the purpose of state in React?

Answer 15

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. The change in state can happen as a response to user action or system-generated events and these changes determine the behavior of the component and how it will render.

Tells the component what to render.

State is a data-model.

Question 16

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

Answer 16

Via a prop.

Ex:

render( ) {
    if (this.state.isClicked === false) {
      return Click Me!;
    } else {
      return Thanks!;
    }
  }
}

Question 17

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

Answer 17

map

Ex:

const pokedex = [
  { number: '001', name: 'Bulbasaur' },
  { number: '004', name: 'Charmander' },
  { number: '007', name: 'Squirtle' },
  { number: '025', name: 'Pikachu' },
  { number: '039', name: 'Jigglypuff' }
];

class PokemonList extends React.Component {
  render() {
    const pokemons = pokedex.map(pokemon =>
      <li>{pokemon.name}</li>
    );
    return <ul>{pokemons}</ul>;
  }
}

ReactDOM.render(
, document.querySelector(‘#root’));

Question 18

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

Answer 18

id that is unique amongst the siblings.

Question 19

What are controlled components?

Answer 19

An input form element whose value is controlled by React is called a “controlled component”.

React is fully wired into it .

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.

Question 22

Name three React.Component lifecycle methods.

Answer 22

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

Question 23

How do you pass data to a child component?

Answer 23

You pass a prop.