Mordern Web

Question 1

What is Webpack?

Answer 1

webpack is an open-source JavaScript module bundler. It is made primarily for JavaScript, but it can transform front-end assets such as HTML, CSS, and images if the corresponding loaders are included.

Question 2

How do you add a devDependency to a package?

Answer 2

npm instal –save-dev webpack

Question 3

What is an NPM script?

Answer 3

it’s a script to install dependency

Question 4

How do you execute Webpack with npm run?

Answer 4

npm run build

Question 5

What is React?

Answer 5

React is a JavaScript library for creating user interfaces.

React is a free and open-source front-end JavaScript library for building user interfaces or UI components.

Question 6

What is a React element?

Answer 6

its an object
A React Element is what gets returned from components. It’s an object that virtually describes the DOM nodes that a component represents. With a function component, this element is the object that the function returns.

Question 7

How do you mount a React element to the DOM?

Answer 7

ReactDOM.render(reactElement, domContainerNode)

Question 8

What is Babel?

Answer 8

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments

Question 9

What is a Plug-in?

Answer 9

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

babel-loader

npm install -D babel-loader @babel/core @babel/preset-env webpack

Question 12

What is JSX?

Answer 12

it is a syntax extension to JavaScript

Question 13

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

Answer 13

import react to compile the component

Question 14

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

Answer 14

webpack and babel-loader

Question 15

What is a React component?

Answer 15

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

Question 16

How do you define a function component in React?

Answer 16

function FunctionName(){
return reactElement
}
(Note name first letter should be capital)

Question 17

How do you mount a component to the DOM?

Answer 17

ReactDom.render and pass reactComponent Name

Question 18

What are props in React?

Answer 18

props is an object

Question 19

How do you pass props to a component?

Answer 19

eg constructname attribute=string or constructname attribute={expression}

Question 20

How do you write JavaScript expressions in JSX?

Answer 20

{}

Question 21

How do you create “class” component in React?

Answer 21

classkeyword component extend React

Question 22

How do you access props in a class component?

Answer 22

this.props.name

Question 23

What is the purpose of state in React?

Answer 23

provide infomation of current state

Question 24

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

Answer 24

*

Question 25

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

Answer 25

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: