React
Purpose of render()
- Each component has a render function because it returns a React element which is the native DOM representation.- If more than one HTML element is to be rendered, they must be enclosed within a larger tag- This function is pure, and must return the same thing every time it is invoked
What is React?
- Front-end JavaScript library that follows the component based approach which helps in building reusable UI components.- It is used for developing complex and interactive web and mobile UI.- Uses virtual DOM, server side rendering, and follows the unidirectional data flow
Components
- a javascript fxn- allow you to split the UI into independent, reusable pieces- they accept arbitrary inputs (called "props" and return React elements describing what should appear on the screen
When would you use a class component over a functional component?
- class component: if your component has state/lifecycle methods, or needs to hold state information- functional component: if your component only receives props (stateless)
What are major advantages of using React?
1. It increases the application's performance2. It can be conveniently used on the client as well as server side3. Because of JSX, code's readability increases4. React is easy to integrate with other frameworks like Meteor, Angular, etc5. Using React, writing UI test cases become extremely easy
How does HTTP work?
1. client sends a HTTP request to a HTTP server. The hostname (given in the URL) indicates WHICH server will receive the request2. HTTP server processes the HTTP request, which passes the request to some Web App, to create a HTTP RESPONSE3. Response gets sent back to the client4. Client processes the response
3 principles of redux
1. single source of truth (state from server can be easily serialized and hydrated into client, and facilitates debugging: store.getState())2. State is read-only (only way to change state is to emit an action, describing what happened. No race conditions since actions are dispatched one by one)3. Changes are made with pure functions (return new state objects
What are the arguments to useEffect?
1st arg is the effect (a callback function), and 2nd is an array of values to compare (just like a componentDidUpdate conditional)
HTML 5 tags required for every webpage
<!DOCTYPE html><html><head></head><body></body></html>
Create an element that links to a document called "dogs.html,"with clickable text that reads "More Dogs."
<a href="dogs.html">More Dogs</a>
What's the purpose of super(props)
A child class constructor cannot make use of this until super() has been called. Also, ES2015 class constructors have to call super() if they are subclasses. The reason for passing props to super() is to enable you to access this.props in the constructor.
What is closure?
A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function's scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.
What is a reducer?
A reducer is simply a pure function that takes the previous state and an action, and returns the next state. Ties action and state together.
What are the advantages and disadvantages of using a helper library like jQuery or a frontend framework like React?
ADVANTAGES - JQuery: Simplifies interactions between html and javascript. widely used and make code more elegant, lightweight and open sourceReact: popular and component based approach is more responsive, good for web apps, kind of an industry standardDISADVANTAGES - JQuery: You have to host the library yourself and update it constantly, quite large and every time someone hits your site they have to download itReact: Learning curve, documentation and large size
What is an action?
Actions are plain javascript objects. They must have a type indicating the type of action being performed. In essence, actions are payloads of information that send data from your application to your store.
When does the 2nd argument callback of setState get called?
After Component updates and re-renders
What is the argument of useState? It's return value?
Argument: initial stateReturn: array [theStateVar, setter]
JavaScript framework
At their most basic, JS frameworks are collections of JavaScript code libraries that provide developers with pre-written JS code to use for routine programming features and tasks—literally a framework to build websites or web applications around.
Why not update state directly?
Because this does not re-render the component. Calling setState will appropriately re-render the component.
Why is it advised to pass a callback function to setState as opposed to an object?
Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state.
mapStateToProps
Describes how to transform the current Redux store state into the props you want to pass to a presentational component you are wrapping
When does the effect in useEffect get called by default (when 2nd arg is empty)? What about the cleanup function?
Effect runs after every renderCleanup runs before the effect after every render except on 1st render
Events
Event Listener and Event HandlerJavascript in the browser follows and even driven programming modelyou are using event handlers to listen to events. Handlers are entities, and the link between the event and the handler would be a relation. So the term event listener when referring to the entity of code that listen to a event is the same as the even handler. The way you describe which handler/listener handles/listens to which event is usually referred to event binding.
The 4 HTTP requests
GET: retrieve a resourcePOST: create a resourcePATCH: update an existing resourceDELETE: delete a resourceHEAD: retrieve the headers for a resource
What is the redux store?
Holds the application state, and has the following responsibilities:- access via getState()- allows state updates via dispatch(action)- register listeners with subscribe(listener)
What can you tell me about your experience with Git? What projects have you used Git with, and how did it help you?
I've used git and git hub on every project for bloc so far. It's definitely a learning curve and I still have a lot to learn. I do a lot of my studying at work on a windows machine and then work on my macbook when i get home so it's nice to be able to switch between machines without a hard drive. I also like being able to got back to a previous commit in node when things kind of get out of hand and i'm lost, i can just go back to a branch where i knew what was going on.
Name the different lifecycle methods
Initialization: In this phase react component prepares setting up the initial state and default props.Mounting: The react component is ready to mount in the browser DOM. This phase covers componentWillMount and componentDidMount lifecycle methods.Updating: In this phase, the component get updated in two ways, sending the new props and updating the state. This phase covers shouldComponentUpdate, componentWillUpdate and componentDidUpdate lifecycle methods.Unmounting: In this last phase, the component is not needed and get unmounted from the browser DOM. This phase include componentWillUnmount lifecycle method.
When we talk about things being semantic, like HTML5 semantic tags, or semantic class names, what do we mean?
It introduces meaning to the web page. It tells the machine to do something.
Browsers and JSX
JSX has to be transpiled (Babel) so that browsers can read the JS objects generated
purpose of key?
Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity. The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys. When you don't have stable IDs for rendered items, you may use the item index as a key as a last resort. It is not recommend to use indexes for keys if the items can reorder, as that would be slow.
How to mirror behavior of componentDidMount-componentWillUnmount model using hooks?
Make the effect return a "cleanup" function, and pass empty array as 2nd arg:useEffect(function(){return function(){/cleanup/};}, [])The empty array means the effect only runs on first render, and when unmounting
Rules of calling react hooks
Only call at the top-level and not inside if-blocks, etcOnly call in react components or custom hooks
How to mirror behavior of componentDidMount-componentDidUpdate model using react hooks?
Pass 2nd arg array with states/variables to compare in them:useEffect(()=>{...}, [a,b,c])
Explain render of ReactDOM
ReactDOM(element, container[,callback])Renders the container (React Component) in the DOM elementReturns reference to the container, but returns null for stateless containersIf container has been previously rendered, it will only be updated.Callback gets called after the render/update
What is Redux Thunk used for?
Redux thunk is middleware that allows you to write action creators that return a function instead of an action. The thunk can then be used to delay the dispatch of an action if a certain condition is met. This allows you to handle the asynchronous dispatching of actions.
What are refs and why are they important?
Refs allow you to gain direct control of a DOM element. Used for managing focus/text selection, triggering animations, integrating with third-party DOM libraries. Callback refs are advised.
What are advantages to using an arrow function?
Scope safety: Until arrow functions, every new function defined its own this value. An arrow function does not create its own this, the this value of the enclosing execution context is used.Compactness: Arrow functions are easier to read and write.Clarity: When almost everything is an arrow function, any regular function immediately sticks out for defining the scope. A developer can always look up the next-higher function statement to see what the thisObject is.
What is an SPA? What are the advantages of an SPA?
Single page applicationA SPA interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server. This approach avoids interruption of the user experience between successive pages.
What is the difference between state and props?
State is mutable and props is immutable. State belongs to the parent and props are passed down to the child
State vs props
State: data structure that starts with a default value when a Component mounts. Can be mutated as a result of user eventsProps:- Component's configurations- Received form above and are immutable as far as the component receiving them is concerned- Component cannot change its props, but can put together props of child components- Callback functions can be passed in as props
How are hook states different from class based component states?
States in hooks don't have to be objects, this is required for class componentsStates in hooks don't merge states, it completely replace when setting it
What is Redux?
The basic idea of redux is that the entire application state is kept in a single store. The store is simply a javascript object. The only way to change the state is by firing actions from your application and then writing reducers for these actions that modify the state. The entire state transition is kept inside reducers and should not have any side-effects.
why is html 5 special
The most interesting new HTML5 elements are:New semantic elements like <header>, <footer>, <article>, and <section>.New attributes of form elements like number, date, time, calendar, and range.New graphic elements: <svg> and <canvas>.New multimedia elements: <audio> and <video>.HTML5 semantic elements are supported in all modern browsers.In addition, you can "teach" older browsers how to handle "unknown elements".
In a frontend framework, what is data binding and why is it useful?
The process that establishes a connection between the application UI and business logic. When the data changes its value, the elements that are bound to the data reflect the changes.
Why use redux?
When a system is non-deterministic and opaque, it is hard to re-produce bugs. Mixing mutation and asynchronicity is troublesome, and Redux attempts to make state mutations predictable. Different parts of the code should not be able to change the state arbitrarily.
What is the alternative of binding this in the constructor?
You can use property initializers to correctly bind callbacks. This is enabled by default in create react app. You can use an arrow function in the callback. The problem here is that a new callback is created each time the component renders How does shouldComponentUpdate work?
Which of the following is a valid way to register an event and listener in plain JavaScript?Assume you have already found someElement in the DOM (i.e. let someElement = document.querySelector('#someElement'))a) someElement.addEventListener('click', function() { console.log('clicked!') });b) someElement.addEventListener('onClick', function() { console.log('clicked!') });c) someElement.addEventListener(function() { console.log('clicked!') });d) someElement.addEventListener('onClick', console.log('clicked!'));e) None of the above.
a) someElement.addEventListener('click', function() {console.log('clicked!')});
What is an Event Listener?
an object that can handle an event dispatched by an EventTarget object.The event listener triggers the event handler
Where in a React component should you make an AJAX request?
componentDidMount, because calling setState on a component that has not mounted yet will result in an error. You cannot guarantee that an AJAX request will resolve before a component mounts
What is JSX
html like syntax in javascript adds XML syntax to JScompiled by babelmakes react more elegant. Stands for javascript with XML like syntax. Enables you to write HTML tags in javascript, compiled by babel
what does connect() in redux do?
provides many useful optimizations to prevent unnecessary re-renders. One result of this is that you shouldn't have to worry about the React performance suggestion of implementing shouldComponentUpdate yourself
DOM
represented as a tree, so the changes and updates to the DOM are fast.but everytime we make a change, you have to re-render the the element AND its children to update the application UIre-rendering or repainting the UI makes it slow
state of a component
state of a component is an object that holds info that may change over the lifetime of a componentthis.state: each component maintains its own stateThis is what React does when state is changed: it re-renders the entire app.
props
used to send data to componentsprops = parameters of a function or of a componentprops are IMMUTABLE. In pure functions, we cannot change the data of parameters, so we cannot change the data of a prop in reactJS.We pass props down to a CHILD component
Virtual DOM
virtual representation of the DOM, every time the STATE of the app changes, the virtual dom gets updated instead of the real dom. - Node tree that lists elements, their attributes, and content as objects and their properties- Render -> node tree out of React components- Actions fired by the user trigger, or setState, trigger a regeneration of the virtual DOM, and this is diff'd against the previous element tree to determine which UI elements should be modified