Aspnet Core 3 React Book

Question 1

How does jsx is converted into regular JavaScript?

Answer 1

JSX is transformed into regular JavaScript by Webpack using a tool calledBabel. This is one of many tasks that CRA configured for us when our app was scaffolded.

Question 2

What is minification?

Answer 2

Minificationis the process of removing unnecessary characters in files without affecting how it is processed by the browser. This includes code comments and formatting, unused code, using shorter variable and function names, and so on.

Question 3

What is webpack?

Answer 3

Webpack is atool that transforms, bundles, and packages up files for use in a browser. Webpack also has a development server.

Note: The CRA tool has configured Webpack for us so that all the transformationand the bundling configuration are already set up for us.

Question 3

How does react is served via aspnet? Is there any modification before actually serving it?

Answer 3

It is important to understand that the ASP.NET Core app runs on the server, with the React app running on the client in the browser. The ASP.NET Core app simply serves the files in theClientApp/Buildfolder without anyinterpretationor manipulation.

Question 4

What is an import statement?

Answer 4

importstatement is used to import items that are exported by another JavaScript module. The module is specified by its file location, with thejsextension omitted.

Question 5

What is the difference between importing a regular JavaScript and importing an item from a npm module?

Answer 5

Theimportstatements that import items fromnpmpackages don’t need the path to be specified because CRA has configured aresolverin Webpack to automatically look in thenode_modulesfolder during the bundling process.
CRA = Create react app

Question 6

What does export default means? What does it have to do with the import with curly braces?

Answer 6

Theexportkeyword is used to export an item from a JavaScript module. Thedefaultkeyword defines the export as the default export, which means it can be imported without curly braces. So, a default export can be imported asimport App from ‘./App’rather thanimport {App} from ‘./App’.

Question 7

What is the constructor in JavaScript? When to use it?

Answer 7

Theconstructorin a JavaScript class is a special method that automatically gets invoked when a class instance is created. So, it’s a great place to initialize class-level variables.

Question 8

When to use componentDidMount method? When this method is invoked? What is its Function Component equivalent?

Answer 8

This method gets invoked by React when the component isinserted into the tree and is the perfect place to load data. Its Function Component equivalent is useEffect

Question 9

What is an await on js? What kind of methods we can await?

Answer 9

Anawaitkeyword is used to wait for an asynchronous function to complete. A function must be declared as asynchronous in order to use theawaitkeyword within. This is done by placing anasynckeyword in front of the function name. This is very much likeasyncandawaitin .NET.

Question 10

What does polyfill do?

Answer 10

Apolyfillis a piece of code that implements a feature we expect the browser to providenatively. Polyfills allow us to develop against featuresthat aren’t supported in all browsers yet.

Question 11

How does de map function work?

Answer 11

Themapmethod is a native JavaScript method that is available in an array. It takes in a function parameter that is called for each array element. The return values of the function calls then make up a new array. Themapmethod is commonly used in JSX when iteration is needed.

Question 13

What is the key attribute? When to use? Is it JavaScript default? What happens when it is not used?

Answer 13

Thekeyattribute helps React detect when an element changes, or is added or removed. So, it’s not a standard HTML table row attribute. Where we output content in a loop, it is good practice to apply this attribute and set it to a unique value within the loop so that React can distinguish it from the other elements.Omitting keys can also lead to performance problems on large datasetsas React will unnecessarily re-render the table when it doesn’t need to.

Question 14

What does typescript do to regular javascript?

Answer 14

TypeScript adds an optional static typing layer on top of JavaScript that we can use during our development. Static types allow us to catch certain problems earlier in the development process.

Question 15

What are two common npm dev dependencies to increase performance?

Answer 15

eslint and prettier.

Question 16

What is an arrow function?

Answer 16

An arrow function is an alternative function syntax that was introduced in ES6. The arrow function syntax is a little shorter than the original syntax and it also preserves the lexical scope of this. The function parameters are defined in parentheses and the code that the function executes follows a =>, which is often referred to as a “fat arrow”.

Question 17

What is the difference between let and const?

Answer 17

The const keyword can be used to declare and initialize a variable where its reference won’t change later in the program. Alternatively, the let keyword can be used to declare a variable whose reference can change later in the program.

Question 18

What is the name given to an arrow function that has no parenthesis?

Answer 18

This is called an implicit return.

Question 19

When implicit return is not an option? What prettier does in this case?

Answer 19

When an implicit return statement is over multiple lines, parentheses are required. When an implicit return is on just a single line, we can get away without the parentheses.
Prettier automatically adds parentheses in an implicit return if they are needed, so we don’t need to worry about remembering this rule.

Question 20

What is an interface? Do interfaces exist in javascript? What about typescript?

Answer 20

An interface is a contract that defines a type with a collection of property and method definitions without any implementation. Interfaces don’t exist in JavaScript, so they are purely used by the TypeScript compiler to enforce the contract by type checking.

Question 21

What is a type annotation?

Answer 21

Type annotations let us declare variables, properties, and function parameters with specific types. This allows the TypeScript compiler to check that the code adheres to these types. In short, type annotations allow TypeScript to catch bugs where our code is using the wrong type much earlier than we would if we were writing our code in JavaScript.

Question 22

What is Emotion?

Answer 22

Emotion is a library that just helps us scope the CSS styles to specific components.

Question 23

What is a template literal?

Answer 23

A template literal is a string enclosed by backticks (``) that can span multiple lines and can include a JavaScript expression in curly braces, prefixed with a dollar sign (${expression}). Template literals are great when we need to merge static text with variables.

Question 24

What is a tagged template literal?

Answer 24

A tagged template literal is a template string that is executed through a function that is specified immediately before the template literal string. The function is executed on the template literal before the string is rendered in the browser.

Question 25

What is the difference between a ts and tsx files?

Answer 25

ts is purely typescript and tsx is JSX typescript.

Question 26

What is a styled component? Does it define the styles globally or for a specific component?

Answer 26

styled-components utilises tagged template literals to style your components. It removes the mapping between components and styles. This means that when you’re defining your styles, you’re actually creating a normal React component, that has your styles attached to it.

Question 27

How does the css from Emotion is linked to a react component?

Answer 27

Emotion creates a random css class which is used in the given component… not the usual global css.

Question 28

What is necessary to do with the React import when using Emotion?

Answer 28

To remove the react import and add the following header:
/** @jsx jsx */

Question 29

What is SCSS?

Answer 29

There are two syntaxes available for Sass. The first, known as SCSS (Sassy CSS) and used throughout this reference, is an extension of the syntax of CSS. This means that every valid CSS stylesheet is a valid SCSS file with the same meaning. This syntax is enhanced with the Sass features described below. Files using this syntax have the .scss extension.

The second and older syntax, known as the indented syntax (or sometimes just “Sass”), provides a more concise way of writing CSS. It uses indentation rather than brackets to indicate nesting of selectors, and newlines rather than semicolons to separate properties. Files using this syntax have the .sass extension.

Question 30

What is a functional component?

Answer 30

A Functional Component (FC) is a generic TypeScript type we can use to pass strongly-typed props to a function-based component. The syntax is FC, where Props is the interface for the props.

Question 31

What is the key property and what does it do?

Answer 31

The key prop helps React detect when the element changes or is added or removed. Where we output content in a loop, in React, it is good practice to apply this prop and set it to a unique value within the loop so that React can distinguish it from the other elements during the rendering process. If we don’t provide a key prop, React will unnecessarily re-render this element, which makes the rendering process slower.

Question 32

What is Destructuring ?

Answer 32

Destructuring is a special syntax that allows us to unpack objects or arrays into variables.

Question 33

What is a ternary in javascript? When is it useful for JSX?

Answer 33

A JavaScript ternary is a short way of implementing a conditional statement that results in one of two branches of logic being executed. The statement has three operands. The first operand is a condition, the second is what is returned if the condition is true, and the third is what is returned if the condition is false. The ternary operator is a popular way of implementing conditional logic in JSX.

Question 34

What is the short-circuit operator? When is it useful for JSX?

Answer 34

The short-circuit operator (&&) is another way of expressing conditional logic. It has two operands, with the first being the condition and the second being the logic to execute if the condition evaluates to true. It is often used in JSX to conditionally render an element if the condition is true.

Question 35

What is an optional parameter and how to declare it?

Answer 35

Optional properties are actually a TypeScript feature. Function parameters can also be made optional by putting a question mark at the end of the parameter name before the type annotation, for example, (duration?: number).

Question 36

How to define default props in typescript? How to achieve the same thing using destructuring (preferable)?

Answer 36

We can set a special object literal called defaultProps on the component to define the default values:
Question.defaultProps = {
showContent: true,
};

Via destructuring:
export const Question: FC = ({ data, showContent = true }) => ( … )

Question 37

What is the pattern of a “render prop”?

Answer 37

The pattern of implementing a function prop to allow consumers to render an internal piece of the component is often referred to as a render prop. It makes the component extremely flexible and useable in many different scenarios.

Question 38

What is a Promise?

Answer 38

A promise is a JavaScript object that represents the eventual completion (or failure) of an asynchronous operation and its resulting value. The Promise type in TypeScript is like the Task type in .NET.

Question 39

What is the useEffect hook?

Answer 39

The useEffect hook is a function that allows a side effect, such as fetching data, to be performed in a component. The function takes in two parameters, with the first parameter being a function to execute. The second parameter determines when the function in the first parameter should be executed. This is defined in an array of variables that, if changed, results in the first parameter function being executed. If the array is empty, then the function is executed only when the component is mounted into the DOM.

Question 40

What is the useState hook?

Answer 40

The useState function returns an array containing the state variable in the first element and a function to set the state in the second element. The initial value of the state variable is passed into the function as a parameter. The TypeScript type for the state variable can be passed to the function as a generic type parameter.

Question 41

What is a union type?

Answer 41

A union type is a way of specifying that a type can be one of multiple types. The different types in the union are separated by a pipe character (|).

Question 42

What does the expression below do?

questions || []

Answer 42

returns questions if they are not falsy and empty array otherwise.

Question 43

What is a container component and a presentation component? How doe they interact?

Answer 43

Container components are responsible for how things work, fetching any data from a web API, and managing state. Presentational components are responsible for how things look. Presentational components receive data via their props and also have property event handlers so that their containers can manage user interactions.

Question 44

How event listeners are attached on React?

Answer 44

Event listeners in JSX can be attached using a function prop that is named with on before the native JavaScript event name in camel case. So, a native click event can be attached using an onClick function prop. React will automatically remove the event listener for us before the element is destroyed.

Question 45

Where to find all available events along with their respective types on react?

Answer 45

To find a list of all the available events, along with their corresponding types, take a look in the index.d.ts file, which can be found in the node_modules/@types/react folder.

Question 46

What is the memo function?

Answer 46

The memo function ensures that the component that’s passed into it only rerenders when its props change.

Question 47

When to use the memo function (3 situations)?

Answer 47

memo should be used with care and considered only if a component has some of the following traits:

The component returns the same output for a given set of props
The component renders often
The component outputs lots of elements

Question 48

What elements JSX compile into?

Answer 48

JSX compiles JavaScript nested calls into createElement functions in React, which allows us to mix HTML and JavaScript

Question 49

How can we ensure a component re-renders only when its props change?

Answer 49

Wrap the component in the memo function

Question 50

Where the BrowserRouter from the react-router-dom should be placed in the JSX?

Answer 50

BrowserRouter should be placed as the outermost element.

Question 51

What does the path property in the Route component mean? Will it match exact paths? Can it match more than one path?

Answer 51

The path property will be matched against the URL typed/redirected by the user. By default, BrowserRouter does the partial matching to the browser location path and will match and render all the Route components it can find.

Question 52

Do we need to define values for boolean properties?

Answer 52

It is optional. Unlike other attributes, you don’t need to specify the value of a Boolean attribute on an HTML element. Its presence on an element automatically means the value is true and its absence means the value is false.

Question 53

How to create a Redirect route on react-router-dom? Why a Switch component is necessary?

Answer 53

By adding a Redirect from= to= and also it is necessary to add the Switch component above all routes so that it is rendered first.

Question 54

How to create a Redirect route on react-router-dom for a not found page? What needs to be added to the Switch component?

Answer 54

Necessary to add a routeless component in the END of the switch.

Question 55

What does an anchor tag causes to a react app? How to solve this issue?

Answer 55

Causes the screen to refresh. Can be solved by using the Link component from the react-router-dom

Question 56

How to declare a Link component using the react-router-dom lib?

Answer 56

Can be declared just as a HTML element with the “to” property. e.g: to=”./signin”

Question 57

What is the history object in React and how can it be be using the react-router-dom lib?

Answer 57

The history object in React Router keeps track of the locations that have been visited in the app and contains quite a few different properties and methods. The push method pushes a new entry into the history stack and performs navigation to the location that’s passed in as a parameter.

Can be used as: history.push(‘/signin’);

Question 58

How parameters are passed into routes? how are them called? How are them accessed from the routed component?

Answer 58

they are called “Route parameters”. They are defined in the path with a colon in front of them. The value of the parameter is then available in RouteComponentProps in the params object, within a match object.

Question 59

Is it necessary to create an interface to define the route params? How is that declared? How does the caller look like?

Answer 59

Yes. Then the component is declared as MyComp:&raquo_space; = ({match,}) => {}

the caller is a simple Link element with the to=/sigin/${myID}

Question 60

What is the difference between == and ===? Which one is recommended to be used always?

Answer 60

When using triple equals (===), we are checking for strict equality. This means both the type and the value we are comparing have to be the same. When using a double equals (==), the type isn’t checked. Generally, it is good practice to use the triple equals (===) to do a strict equality check.

Question 61

How many elements a react component can return? What to use when we need to wrap things up?

Answer 61

In React, a component can only return a single element. This rule applies to conditional rendering logic where there can be only a single parent React element being rendered. React Fragment allows us to work around this rule because we can nest multiple elements within it without creating a DOM node.

Question 62

What does the class URLSearchParams do? Where does it come from?

Answer 62

The search string from React Router for the /search?criteria=type path is ?criteria=type. So, we need to parse this string in order to get the criteria value. We use the native URLSearchParams JavaScript function to do this.

Question 63

What does the lazy function on react do? What is required to be done after defining a lazy import?

Answer 63

The lazy function in React lets us render a dynamic import as a regular component. A dynamic import returns a promise for the requested module that is resolved after it has been fetched, instantiated, and evaluated.

Necessary to wrap the component render into a Suspense object implementing the fallback function.

Question 64

What is a Suspense Object?

Answer 64

Is an object that receives a fallback method which renders meanwhile the lazy component is rendering.

Question 65

What is a controlled component?

Answer 65

In React, we can use what is called controlled components to implement a form. A controlled component has its value synchronized with the state in React.

Question 66

What is an indexable type?

Answer 66

An indexable type is where the index signature is defined rather than specific properties. The type in the square brackets defines the type for the keys in the object and the type after the colon defines the return type when indexed.

Question 67

How to create a variable in typescript that seem a lot like the enum in c#?

Answer 67

Through a union type of literals. e.g: color?: “Blue” | “Red” | “Yellow”;

Question 68

What is React context? Which components in a tree can consume the created context?

Answer 68

A React context is a way to pass data through the component tree without passing it through component props. The components below/beneath the context provider can consume the context.

Question 69

What is the spread syntax?

Answer 69

The spread syntax expands the properties in the object that is referenced after the dots. It can also be used on arrays to expand the elements in the array.

Question 70

What is a type alias? How to define an alias?

Answer 70

In simple terms, a type alias creates a new name for a type. To define a type alias, we use the type keyword, followed by the alias name, followed by the type that we want to alias.

Question 71

What is a non-null assertion operator? Is that javascript native? How to do this assertion? When is that necessary?

Answer 71

A non-null assertion operator (!) tells the TypeScript compiler that the variable before it cannot be null or undefined. This is useful in situations when the TypeScript compiler isn’t smart enough to figure this fact out itself. So, ! in question!.questionId stops the TypeScript complaining that question could be null.

Question 72

what is htmlFor property and why does it exist?

Answer 72

It links the label to the input… useful for readers.