React
Redux React
.Net/C#
SQL
Misc.
100
What is React?
React is a JavaScript library that is used to build Uis (User Interfaces) specifically. Allows you to compose complex Uis from small and isolated pieces called "components."
100
What is React Redux?
The official Redux Ui binding library for React. A node package that allows us to wire up our React Components with React. React and Redux are commonly used together, but they are independent of each other.
100
In .NET, how many classes can one class inherit from ?
You can only inherit from one base class, but inheritance is transitive meaning Class C inherits from Class B and Class B inherits from Class A, ultimately Class C has everything from Class A.
100
What is a database?
A database is an organized collection of data, generally stored and accessed electronically from a computer system.
100
What are Namespaces? What are they used for?
They are a declarative region that provides a scope to the identifiers inside it. It is used to organize code into logical groups and prevent name collisions that can occur especially when your code base includes multiple libraries.
200
What is the Virtual DOM? Explain how it works within React.
The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.
This approach enables the declarative API of React: You tell React what state you want the UI to be in, and it makes sure the DOM matches that state. This abstracts out the attribute manipulation, event handling, and manual DOM updating that you would otherwise have to use to build your app.
200
Explain Flux.
As apps grow in size and complexity, managing state inside of React components can become chaotic. Thus, in turn, will make updates more difficult to manage and error-prone.
Flux is a JS architecture or pattern for Ui that allows Ui components to derive state from a global state manager (a "store"). When state needs to change, the flow of data to effect that change is unidirectional to the store. The store then disperses the global data to whatever components need.
200
What are the principles of object oriented programming?
* Extra 100 pts for explaining the principles.
- Encapsulation: Mechanism of hiding of data implementation by restricting access to public methods. Instance variables are kept private and accessor methods are made public to achieve this.
- Abstract: Concept or an idea which is not associated with any particular instance. One class should not know the inner details of another in order to use it, just knowing the interfaces should be good enough.
- Inheritance: Expresses "is-a" and/or "has-a" relationship between two objects. Using inheritance, we can reuse the code of existing super classes.
- Polymorphism: One name of many forms. It is further two types: static and dynamic. Static polymorphism is achieved using method overloading and dynamic polymophism is achieved using method overriding.
200
What is a database "Table"?
A table is a collection of related data held in a table format within a database. It consists of columns and rows. In relational databases, and flat file databases, a table is a set of data elements using a model of vertical columns and horizontal rows, the cell being the unit where a row and column intersects.
200
What does it mean to "Push"?
Computer code is usually maintained in a central repository where developers would "push" code to. "Push", here, basically means that the developer has made changes to some code and needs to update the central repository so other developers can have the updated changes. In a more general sense, a software push could mean a number of things, but they all describe copying software code from a location or environment to a target location and environment.
300
What are the key features of React?
- Virtual DOM : enables React to build scalabe and fast apps. It contains a memory reconciliation algorithm that helps React create a representation of a web page in virtual memory (a representation of the DOM).
-JSX : JavaScript XML, a syntax extension that describes how the web or app Ui should look like. Mark-up syntax resembles HTML. Combination of JS and HTML.
-One Way Data Binding: This does not permit developers to edit any properties of the React component directly unless there is help of a callback function. This is to give better control of the data flow throughout the app.
-Components: ReactJS apps are made up of multiple components, and each has its own logic and controls. Components can be reusable which will help maintain code.
300
What is Redux?
Redux is an implementation of Flux whose key ideas are:
- All of your application's data is in a single data structure called state which is help in the "store" (the global state manager);
- Your app reads the state from this store.
- The state is never mutated directly outside the store.
- The Ui components emit actions that describe what happened.
- A new state is created by combining the old state and the action by a function called the reducer.
300
What is inheritance?
Inheritance is one of the fundamental attributes of object-oriented programming. It allows you to define a child class that reuses (inherits), extends, or modifies the behavior of a parent class.
300
What is primary key and how many can one table have?
A primary key is a field in a table which uniquely identifies each row/record in a database table. It can not be null. A table can have only one primary key, which may consist of single or multiple fields. When multiple fields are used as a primary key, they are called composite keys.
300
What does it mean to exercise “defensive programming”?
This design is intended to ensure the continuing function of a piece of software under unforeseen circumstances. It is often used where high availability, safety, or security is needed.
400
What is an arrow function in React? How is it used and white board a basic function.
Arrow functions are a new feature that was introduced with ES6. It is a new syntax for writing JavaScript functions. These functions utilize a new token, =>, which allows our code to be more concise and simplify function scoping and the "this" keyword. By using arrow functions we can avoid typing the "function" keyword, "return" keyword (it's implicit in arrow functions), and curly brackets. Other features of the arrow functions affects parameters. One parameter does not require parenthesis, while no parameters or 2 or more parameters do.
ex:
const App = () => {
const greeting = "Hello World";
return <h5 value={greeting}/>
}
400
What do you understand by "Single Source of Truth"?
In information systems design and theory, single source of truth (SSOT) is the practice of structuring information models and associated data schema such that every data element is mastered (or edited) in only one place.
One place to the store all your information which in other words is called State.
400
Name the main differences between an Interface and an Abstract Class.
Main things to denote :
- Abstract classes can use access modifiers such as private or public, interfaces must only include public.
- Abstract classes can contain both a method signature or a fully implemented method, interfaces have no implementation only signatures.
- We can implement multiple interfaces, but only one abstract class (through inheritance)
Neither Interface or Abstract classes can be instantiated.
400
What is a SQL Injection Attack and how do you protect yourself against these?
SQL Injections attacks are attacks that search for vulnerabilities and ultimately “inject” malicious code in your database.Developers can prevent SQL Injection vulnerabilities in web applications by utilizing parameterized database queries with bound, typed parameters and careful use of parameterized stored procedures in the database
Basically, don't use user inputs directly in queries. Only accept parameterized variables which are populated with user inputs.
400
What is a switch/case statement?
A switch statement tests the value of a variable and compares it with multiple cases. Once the case match is found, a block of statements associated with that particular case is executed.
Each case in a block of a switch has a different name/number which is referred to as an identifier. The value provided by the user is compared with all the cases inside the switch block until the match is found.
If a case match is found, then the default statement is executed, and the control goes out of the switch block.
* A nicer if else statement
500
state={
peopleList = [{id: 1, firstName: "John" }, {id: 2, firstName: "Betty"}, {id: 3, firstName: "Kevin"}];
}
This is currently rendered on the website as 3 cards with an edit and delete button on each card.
You have a peopleService file and will utilize these following functions:
let deleteUser = id => {
const config = {
method: "DELETE",
url: `https://localhost:50001/api/people/${id}`,
withCredentials: true,
crossdomain: true,
header: { "Content-Type": "application/json" }
};
return axios(config)
.then(serviceHelper.onGlobalSuccess)
.then(res => {return {...id}})
.catch(serviceHelper.onGlobalError);
};
mapPeople = person => {
return (
<PersonCard
key={"Person" + person.id}
person={person}
onEdit={this.handleEdit}
onDelete={this.handleDelete}
></DisplayPerson>
);
};
Make a function that will delete a person by Id, and immediately take off that selected person from the page without refreshing.
handleDelete = (id) => {
peopleService
.deleteUser (id)
.then(this.onDeleteSuccess)
.catch(this.onDeleteError)}
onDeleteSuccess = res => {
this.setState(prevState => {
let personIndex = prevState.peopleList.findIndex(item => item.id === res)
const updateList = [...prevState.peopleList];
if (personIndex > -1) {
updateList.splice(personIndex, 1)
}
return {
peopleList: updateList.map(this.mapPeople)
}
});
500
Show how the data flows through Redux.
User does something inside of a component, triggers a series of events as
Action Creator --> Dispatch --> Reducers -->State
Data flows down to components
Components re-render accordingly
Repeat Cycle
500
Write out a Superhero class in C# with the properties of Id, Name, Power, City, and at least 2 enemies. (Also make an Enemy class with Id and Name)
public class SuperHero {
public int Id {get; set;}
public string Name {get; set;}
public string City {get; set;}
public List<Enemy> {get; set;}
}
public class Enemy {
public int id {get; set;}
public string Name {get;set;}
}
500
Write an INSERT stored proc for Users table.
It consists of
FirstName,
LastName,
Email,
Password
Create proc [dbo].[Users_Insert]
500
Draw a diagram of the different phases of the React Component Life Cycle.
