Aspnet Core 3 React Book Flashcards

1
Q

How does jsx is converted into regular JavaScript?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What is minification?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What is webpack?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

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

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What is an import statement?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

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

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

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

A

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’.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

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

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

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

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

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

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What does polyfill do?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

How does de map function work?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

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

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What does typescript do to regular javascript?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What are two common npm dev dependencies to increase performance?

A

eslint and prettier.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What is an arrow function?

A

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”.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

What is the difference between let and const?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

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

A

This is called an implicit return.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

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

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

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

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

What is a type annotation?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

What is Emotion?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

What is a template literal?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

What is a tagged template literal?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

What is the difference between a ts and tsx files?

A

ts is purely typescript and tsx is JSX typescript.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

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

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

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

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

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

A
To remove the react import and add the following header:
/** @jsx jsx */
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

What is SCSS?

A

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.

30
Q

What is a functional component?

A

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.

31
Q

What is the key property and what does it do?

A

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.

32
Q

What is Destructuring ?

A

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

33
Q

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

A

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.

34
Q

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

A

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.

35
Q

What is an optional parameter and how to declare it?

A

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).

36
Q

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

A

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 }) => ( … )

37
Q

What is the pattern of a “render prop”?

A

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.

38
Q

What is a Promise?

A

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.

39
Q

What is the useEffect hook?

A

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.

40
Q

What is the useState hook?

A

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.

41
Q

What is a union type?

A

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 (|).

42
Q

What does the expression below do?

questions || []

A

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

43
Q

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

A

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.

44
Q

How event listeners are attached on React?

A

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.

45
Q

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

A

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.

46
Q

What is the memo function?

A

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

47
Q

When to use the memo function (3 situations)?

A

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
48
Q

What elements JSX compile into?

A

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

49
Q

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

A

Wrap the component in the memo function

50
Q

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

A

BrowserRouter should be placed as the outermost element.

51
Q

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

A

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.

52
Q

Do we need to define values for boolean properties?

A

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.

53
Q

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

A

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.

54
Q

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

A

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

55
Q

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

A

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

56
Q

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

A

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

57
Q

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

A

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’);

58
Q

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

A

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.

59
Q

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

A

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

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

60
Q

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

A

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.

61
Q

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

A

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.

62
Q

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

A

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.

63
Q

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

A

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.

64
Q

What is a Suspense Object?

A

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

65
Q

What is a controlled component?

A

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.

66
Q

What is an indexable type?

A

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.

67
Q

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

A

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

68
Q

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

A

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.

69
Q

What is the spread syntax?

A

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.

70
Q

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

A

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.

71
Q

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

A

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.

72
Q

what is htmlFor property and why does it exist?

A

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