React

Question 1

What is React?

Answer 1

a JavaScript library for creating user interfaces.

Question 2

What is a React element?

Answer 2

a plain object describing a component instance of DOM node and its desired properties.

Question 3

How do you mount a React element to the DOM?

Answer 3

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

Question 4

What is Babel?

Answer 4

a JavaScript compiler, a toolchain that is mainly used to convert ECMA Script 2015 code into a backwards-compatible version of JavaScript in current and older browser environments.

Question 5

What is a Plug-in?

Answer 5

a software component that adds a specific feature to an existing computer program.it enables customization

Question 6

What is a Webpack loader?

Answer 6

loaders are transformations that are applied to the source code of a module

Question 7

How can you make Babel and Webpack work together?

Answer 7

by using the babel loader. babel compiles js and webpack bundles js. babel loader bridges both of them together

Question 8

What is JSX?

Answer 8

it is a syntax extension to JS that produces React “elements”. Although React doest require using JSX, most people find it helpful as a visual aid when working with UI inside the JS code.

Question 9

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

Answer 9

in order to to have Babel transform JSX into valid JS.

for React.createElement( )

Question 10

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

Answer 10

with the babel-loader. Babel then has plugin that transforms react-jsx to valid JS back to webpack.

Question 11

What is a React component?

Answer 11

components are like JS functions, they accept arbitrary inputs(called "props") and return React elements describing what should appear on the screen.
can also be a JS class and has to return a react element

Question 12

How do you define a function component in React?

Answer 12

functions have to be capitalized

Question 13

How do you mount a component to the DOM?

Answer 13

with ReactDOM.render( ),

you must put the < /> (ankle brackets)

Question 14

What are props in React?

Answer 14

stands for properties and is used for passing data from one component to another. Data with props are passed in a uni-directional flow(one way from parent to child). Props are objects

Question 15

How do you pass props to a component?

Answer 15

by defining custom HTML attributes to which you assign your data with JSX.They are actually key value pairs

Question 16

How do you write JavaScript expressions in JSX?

Answer 16

surround the code in curly brackets.

Question 17

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

Answer 17

the map method

Question 18

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

Answer 18

value that’s unique to each list items

Question 19

How do you create a “class” component in React?

Answer 19

by extending from React.Component, then defining render( ) method in its subclass

Question 20

How do you access props in a class component?

Answer 20

with this. object

Question 21

What is the purpose of state in React?

Answer 21

It’s a built-in object where you store property values that belong to the component. When the state object changes, the component re-renders.
To keep track of data that changes is the purpose of state.

Question 22

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

Answer 22

by using bind( ) method. example: this.handleClick.bind(this)

Question 23

What are the controlled components?

Answer 23

An input form element whose value is controlled by React. React controls what happens in that form on subsequent user input.

Question 24

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

Answer 24

value which takes the current state as its value and onChange props