React

Question 1

What is Webpack?

Answer 1

Webpack is a tool that lets you compile JavaScript modules, also known as module bundler

Question 2

How do you add a devDependency to a package?

Answer 2

npm install –save-dev name or npm i -D webpack webpackcli

Question 3

What is an NPM script?

Answer 3

An npm script is a convenient way to bundle common shell commands for your project.

Question 4

How do you execute Webpack with npm run?

Answer 4

npm run build

Question 5

What is React?

Answer 5

A JavaScript library for building user interfaces

Question 6

What is a React element?

Answer 6

A React Element is what gets returned from components. It’s an object that virtually describes the DOM nodes that a component represents. is an object that describes the dom element.

Question 7

How do you mount a React element to the DOM?

Answer 7

root.render(element)

Question 8

What is Babel?

Answer 8

Babel is a JavaScript compiler converts es6 to es5.

Question 9

What is a Plug-in?

Answer 9

a plug-in (or plugin, add-in, addin, add-on, or addon) is a software component that adds a specific feature to an existing computer program.

Question 10

What is a Webpack loader?

Answer 10

Loaders are transformations that are applied to the source code of a module. They allow you to pre-process files as you import or “load” them. Thus, loaders are kind of like “tasks” in other build tools and provide a powerful way to handle front-end build steps. Loaders can transform files from a different language (like TypeScript) to JavaScript or load inline images as data URLs. Loaders even allow you to do things like import CSS files directly from your JavaScript modules!

Question 11

How can you make Babel and Webpack work together?

Answer 11

If Babel is a translator for JS, you can think of Webpack as a mega-multi-translator that works with all kinds of languages (or assets). For example, Webpack often runs Babel as one of its jobs.

with babel-loader through webpack.config.js and add the plug ins

babel core + webpack + babel loader + tell babel which plugs ins to use.

Question 12

What is JSX?

Answer 12

a react extension Fundamentally, JSX just provides syntactic sugar for the React.createElement(component, props, …children) function.

Question 13

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

Answer 13

you are using react.createlement method when authoring jsx.

Question 14

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

Answer 14

using the babel loader and the plugn in

Question 15

What is a React component?

Answer 15

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen. this is useful so you can reuse it.

Question 16

How do you define a function component in React?

Answer 16

class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}

Question 17

How do you mount a component to the DOM?

Answer 17

const root = ReactDOM.createRoot(document.getElementById(‘root’));
const element = ;
root.render(element);

Question 18

What are props in React?

Answer 18

“Props” is a special keyword in React, which stands for properties and is being used for passing data from one component to another.

Question 19

How do you pass props to a component?

Answer 19

You can pass any JavaScript expression as a prop, by surrounding it with {}. For example, in this JSX:

Question 20

How do you write JavaScript expressions in JSX?

Answer 20

{ }

Question 21

What are props in React?

Answer 21

props is an object. if the react elements have prop values they will be key value pairs in the object.

Question 22

How do you pass props to a component?

Answer 22

it looks like an html attribute, as key value pairs in your react element.

Question 23

How do you write JavaScript expressions in JSX?

Answer 23

You can pass any JavaScript expression as a prop, by surrounding it with {}. For example, in this JSX:

Question 24

How do you create “class” component in React?

Answer 24

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

Question 25

How do you access props in a class component?

Answer 25

this.props.text etc

Question 26

what is the purpose of state in react

Answer 26

the purpose of state is to keep track of values that change over time.

Question 27

how do you pass an event handler to a react element

Answer 27

the prop with an assignment operator and curl braces with the this.method

Question 28

if you do not see the call site of this you can not be sure of the value of this
// bind guarantees the value of this when the function or method is called
// bind returns a copy of a function with a permanent this.
referring to the bind in the constructor
undefined instead of window in es6 methods

Question 29

react order
1.react deletes everything from the container dom element and owns it thereafter.
2. react looks at your react element and decides what to do.
-if the react element is an html type button, div , h1 -> dom creation
-if the react element is a function component type(call it and use the elements)
-if the react element is a class component type -> new ( and call render)
// third option - class
// immediately calls the render method of the new object

{
type:”button”,
props: {
onclick;fn,
children; “click me!”
}
}
react does dom creation make the real dom match the above object and also adds the event listener for click
when our click listener runs, it calls setstate
this starts a transition from the current state to the next state.
by replacing the old properties in this state
a re-render is scheduled with the new state
react receives a new react element from the render method

{
type: button,
props: {
children: thanks!
}
}

Question 30

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

Answer 30

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 31

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

Answer 31

map method

Question 32

What are controlled components?

Answer 32

React component that renders a form also controls what happens in that form on subsequent user input. An input form element whose value is controlled by React in this way is called a “controlled component”.

value is kept in a component state, listen for changes and update the state

Question 33

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

Answer 33

value and onChange