react

Question 1

What is React?

Answer 1

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

Question 2

What is a React element?

Answer 2

Elements are the smallest building blocks of React apps. An element specifies what should be there in our UI. An Element is a plain object describing what we want to appear in terms of the DOM nodes.

Question 3

How do you mount a React element to the DOM?

Answer 3

by using ReactDOM.render(element, container)

Question 4

What is Babel?

Answer 4

Babel is a toolchain that translates ES6 code into ES5.

Question 5

What is a Plug-in?

Answer 5

Plug-in is a software component that adds a specific feature to an existing computer program.

Question 6

What is a Webpack loader?

Answer 6

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.

Question 7

How can you make Babel and Webpack work together?

Answer 7

By using Babel Loader. (web pack bundles files together and babel is a tool that makes code able to be parsed by most browsers.) Webpack loader will run code through babel before files are bundled into one.

Question 8

What is JSX?

Answer 8

JSX is an extension to the JavaScript language syntax which provides a way to structure component rendering using syntax familiar to many developers.

Question 9

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

Answer 9

Since JSX compiles into calls to React.createElement, the React library must also always be in scope from your JSX code.

Question 10

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

Answer 10

By using plugin’@babel/plugin-transform-react-jsx’ on webpack.config.js.

first determines the file hierarchy for the project and generates a dependency graph. From the dependency graph it compiles the code to a single source, using Babel to translate and remove the import and export statements, and convert JSX into standard JavaScript.

Question 11

What is a React component?

Answer 11

Components let you split the UI into independent, reusable pieces. Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

Question 12

How do you define a function component in React?

Answer 12

write JavaScript function and pass in single argument “props” (which is an object) and return react element. function components must start with capital letter.

Question 13

What are props in React?

Answer 13

Props are arguments passed into React components.

Props are passed to components via HTML attributes.

Question 14

How do you pass props to a component?

Answer 14

Props are also how you pass data from one component to another, as parameters.

Question 15

How do you pass props to a component?

Answer 15

We pass them as attributes to components.

Question 16

How do you create “class” component in React?

Answer 16

When creating a React component, the component’s name MUST start with an upper case letter. A class component must include the extends React.Component statement. This statement creates an inheritance to React.Component, and gives your component access to React.Component’s functions.The component also requires a render() method, this method returns HTML.

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

Question 17

How do you access props in a class component?

Answer 17

By using the ‘this’ keyword.

Question 18

How do you access props in a class component?

Answer 18

By using the ‘this’ keyword. for example: this.props.text

Question 19

What is the purpose of state in React?

Answer 19

State is a plain JavaScript object used by React to represent an information about the component’s current situation. giving us control over the element.

Question 20

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

Answer 20

pass in name of function as the event handler

Question 21

What are controlled components?

Answer 21

A controlled component is a component that renders form elements and controls them by keeping the form data in the component’s state.

Question 22

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

Answer 22

value and onChange (props or attributes)

Question 23

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

Answer 23

map

Question 24

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

Answer 24

elements inside the map() call need keys

Question 25

What does express.static() return?

Answer 25

finds and returns static files requested. (static() returns a function)

Question 26

What is the local __dirname variable in a Node.js module?

Answer 26

__dirname is an environment variable that tells you the absolute path of the directory containing the currently executing file.

Question 27

What does the join() method of Node’s path module do?

Answer 27

The path. join() method joins all given path segments together using the platform-specific separator as a delimiter, then normalizes the resulting path.

Question 28

What does fetch() return?

Answer 28

The fetch() method in JavaScript is used to request to the server and load the information in the webpages. The request can be of any APIs that returns the data of the format JSON or XML. This method returns a promise that resolves to response object.

Question 29

What is the default request method used by fetch()?

Answer 29

Without options Fetch will always act as a get request.

Question 30

How do you specify the request method (GET, POST, etc.) when calling fetch?

Answer 30

pass in config object as second parameter and specify which method will be used in uppercase letters.
fetch(‘https://jsonplaceholder.typicode.com/users’, {
method: ‘POST’
})

Question 31

When does React call a component’s componentDidMount method?

Answer 31

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 32

How do you pass data to a child component?

Answer 32

In the parent component, create a callback function. This callback function will retrieve the data from the child component. Pass the callback function to the child as a props from the parent component. The child component calls the parent callback function using props and passes the data to the parent component

Question 33

How do you pass data to a child component?

Answer 33

We use props. In the parent component, create a callback function. This callback function will retrieve the data from the child component. Pass the callback function to the child as a props from the parent component. The child component calls the parent callback function using props and passes the data to the parent component