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

smallest building blocks of react - also describes what the DOM should look like

Question 3

How do you mount a React element to the DOM?

Answer 3

using ReactDOM.render()

Question 4

What is JSX (JavaScript XML)?

Answer 4

A syntax extension to JavaScript that provides a way to structure component rendering using syntax familiar to many developers

Question 5

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

Answer 5

Importing React is necessary because Babel compiles JSX down to React.createElement() calls

Question 6

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

Answer 6

Webpack will allow babel loader to identify JSX needs to compiled and you can use Babel loader to compile JSX and transform JSX plug-in is necessary for babel to know

Question 7

What is a React component?

Answer 7

review again - React component is sth

Question 8

How do you define a function component in React?

Answer 8

function with a return statement like JavaScript function definition

Question 9

How do you mount a component to the DOM?

Answer 9

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

Question 10

What are props in React?

Answer 10

review again - Props are properties that are basically kind of global variable or object

Question 11

How do you pass props to a component?

Answer 11

review again - component name key = string or javascript expression

Question 12

How do you write JavaScript expressions in JSX?

Answer 12

curly braces

Question 13

How do you create “class” component in React?

Answer 13

with keyword class className extends keyword React.Component with render() method

Question 14

How do you access props in a class component?

Answer 14

use this keyword

Question 15

What is the purpose of state in React?

Answer 15

State is an object that determines how that component renders and behaves

Question 16

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

Answer 16

you pass an event handler via prop

Question 17

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

Answer 17

map()

Question 18

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

Answer 18

IDs: 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

Question 19

What are controlled components?

Answer 19

example is input element - Controlled components are react are fully wired into it and pass in value prop and onChange components

Question 20

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

Answer 20

value and type and onChange