Chase Bank IKM React Prep

In this article we were given X assignment for a Chase Bank React Engineering position interview, included was a rundown of everything that was expected.

The itemized list was broken into categories and briefly explained with examples, feel free to comment opinions & additions (written for research purposes only)

Topics: Setup, How to use React, React Structure, Network

1. Environment Setup

React.js is built on top of Node as it is a front end built in nodejs: https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm

2. How to use React

• JSX: JSX is a syntax extension to JavaScript. Used with React to describe what the UI should look like. JSX may remind you of a template language like HTML, but it comes with the full power of JavaScript.
• Components: Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.?
• Lifecycle Methods: Each component has several “lifecycle methods” that you can override to run code at particular times in the process.
• Props: Props are arguments passed into components, passed via HTML attributes
• Hooks: React 16.8 added Hooks allow function components to have access to state and other React features. Because of this, class components are generally no longer needed.

3. React Structure

• Syntax: React uses JSX to build components with a blend of node version compatible javascript, Environment versions determines the javascript flexibility between classes/component structures
• State: React components has a built-in?state?object. The?state?object is where you store property values that belongs to the component. When the?state?object changes, the component re-renders.
• Context: Context provides a way to pass data through the component tree without having to pass props down manually at every level.
• Inheritance: Code reusability is an impactful aspect in any component-based library or a framework. React provides the composition and inheritance for code reusability. Inheritance is used to couple components and their properties, which allows an app to implement code sharing between the components.

https://reactjs.org/docs/composition-vs-inheritance.html

• Classes: Before React 16.8, Class components were the only way to track state and lifecycle on a React component. Function components were considered "state-less". With the addition of Hooks, Function components are now almost equivalent to Class components. The differences are so minor that you will probably never need to use a Class component in React. Even though Function components are preferred, there are no current plans on removing Class components from React.
• Prototypes Comparison: Prototypes are the mechanism by which JavaScript objects inherit features from one another. Hooks are React class features that are built upon the concept of inheritance.
• Destructuring: In React, We may have an array or object that we are working with, but we only need some of the items contained in these. Destructuring makes it easy to extract only what is needed.
• Rest / Spread: If you already have?props?as an object, and you want to pass it in JSX, you can use?...?as a “spread” operator to pass the whole props object.
• Template literals: In some ways, string literals and strings can be the same thing. The following is considered a string literal.

const text = `some string`        

That looks like it's a regular string. The only difference is that it's surrounded by backticks instead of quotation marks.

• Events: HTML events are?"things"?that happen to HTML elements. When JavaScript is used in HTML pages, JavaScript can?"react"?on these events. React has a SyntheticEvent?wrapper that forms part of React’s Event System, Your event handlers will be passed instances of?SyntheticEvent, a cross-browser wrapper around the browser’s native event. It has the same interface as the browser’s native event, including?stopPropagation()?and?preventDefault(), except the events work identically across all browsers.
• Refs: Refs provide a way to access DOM nodes or React elements created in the render method. In the typical React dataflow,?props?are the only way that parent components interact with their children. To modify a child, you re-render it with new props. However, there are a few cases where you need to imperatively modify a child outside of the typical dataflow. The child to be modified could be an instance of a React component, or it could be a DOM element. For both of these cases, React provides an escape hatch.

When to Use Refs

There are a few good use cases for refs:

1. Managing focus, text selection, or media playback.
2. Triggering imperative animations.
3. Integrating with third-party DOM libraries.

Avoid using refs for anything that can be done declaratively.

For example, instead of exposing?open()?and?close()?methods on a?Dialog?component, pass an?isOpen?prop to it.

• Router: Create React App doesn't include page routing, React Router is the most popular solution.
• Scope and Binding of "this": It comes down to context. When you invoke a function, ‘this’ determines which object is the focus of the function. Here is an example with a function in the global scope:

var example = function() {
  console.log(this);
}        

This is just creating a variable whose value is a function and logs out the value of ‘this’.

4. Network

• Router: In a web application,?routing?is the process of using URLs to drive the user interface (UI). URLs are a prominent feature in every single web browser, and have several main functions from the user’s point of view:

1. Bookmarking?- Users can bookmark URLs in their web browser to save content they want to come back to later.
2. Sharing?- Users can share content with others by sending a link to a certain page.
3. Navigation?- URLs are used to drive the web browser’s back/forward functions.

• Origin Policy: In computing, the same-origin policy (sometimes abbreviated as SOP) is an important concept in the web application security model. Under the policy, a web browser permits scripts contained in a first web page to access data in a second web page, but only if both web pages have the same origin.
• Cross Site Scripting Attacks: Cross-site scripting?(XSS) is a type of security?vulnerability?that can be found in some?web applications. XSS attacks enable attackers to?inject?client-side scripts?into web pages viewed by other users. A cross-site scripting vulnerability may be used by attackers to bypass?access controls?such as the?same-origin policy. Cross-site scripting carried out on?websites?accounted for roughly 84% of all security vulnerabilities documented by?Symantec?up until 2007

Hope you enjoyed, hopefully I get this job.