JavaScript / React Study Guide
What is state? How is it used?
State is an object managed by its own component, unlike props which are passed to a different component, and it stores property values for that component. In react, anytime the state changes, it triggers a re-render of the component. State is initialized in the constructor method and manipulating the state is done with the setState() method.
List some of the cases when you should use Refs.
TBD
What is a ref in React?
TBD
Why is Switch component used in React Router v4?
The Switch component will render only the first route that matches exclusively, instead of rendering every route that matches inclusively.
What is arrow function in React? How is it used?
The arrow function is a syntactically alternative to regular function expressions but without its own bindings to the this keyword. Functional components are created using an arrow function format. In state components, they are used instead of functions that use function expression to avoid binding this every time. Arrow functions adopt the this object from its parent scope which would be the component, which is in a function expression.
Differentiate between Real DOM and Virtual DOM. Real DOM vs Virtual DOM.
The real DOM is what's displayed on the screen. The virtual DOM is a virtual representation of the real DOM and is more lightweight but it does not have the ability to change what is displayed on the screen. When attempting to update the DOM, the entire virtual DOM gets updated, is compared to the virtual DOM before the update, and the changes between the two virtual DOMs gets updated on the real DOM.
Explain the purpose of render() in React.
The render function is a function used by class components that stores the return statement for that component. It's the most common lifecycle method that gets called every time the component is updated. It returns a single React element which is the representation of the native DOM component.
What is the virtual DOM?
The virtual DOM (VDOM) is a programming concept where a 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. React uses a diffing algorithm to update only the changes it finds.
What are the different phases of React component's lifecycle?
There are 3 phases in a component's lifecycle and they are the render phase, pre-commit phase, and the commit phase. In the render phase, React will be Diffing or comparing the most updated view compared to the previous view determining what changes were made. In the pre-commit phase, it's simply reading the DOM. In the commit phase, it is publishing and updating the DOM, but only the changes it found.
How different is React's ES6 syntax when compared to ES5?
There are several differences in syntax and include: 1. Defining variables. In ES5 we could only define variables using the var keyword, but with ES6 we can use the let and const keywords. 2. In ES6, we are introduced to arrow functions in additon to ES5's regular function syntax. 3. We are able to use de-structuring and spread operators to manipulate objects more smoothly. 4. In ES6, we are able to import modules from other js/jsx files using the export and import keywords compared to ES5 require keyword. 5. In ES6, we are introduced to template literals that allows us to perform string interpolation easily.
What are events in React?
They are similar to HTML DOM events, which are anything that a browser or user does, including changing a field or clicking a button. However, React events are not HTML events and are synthetic events. React implements a cross-browser wrapper around the browser's native event. They have the same interact as the browser's native event but is able to work identically across all browser. React normalizes events so that they have consistent properties across different browsers.
Is setState synchronous or asynchronous?
setState is asynchronous, though it may act like it's synchronous. When calling setState, React waits for all components have finished calling setState to then re-render components. This boosts performance and reduces unneccessary re-renders.
List some of the major advantages of React.
- It is component-based, which are essentially functions that return HTML. They can be independent and re-used inside other components. - It utilizes virtual DOMs and updates that instead of the real DOM, updating only the changes found using its Diff algorithm. This increases performance. - It utilizes JSX, which is a syntax extension of the JavaScript language and are known as React elements. It's essentially HTML but with the ability to use JavaScript expressions anywhere using curly braces. This is easier to read.
What are the features of React?
- It is component-based, which are essentially functions that return HTML. They can be independent and re-used inside other components. - It utilizes virtual DOMs and updates that instead of the real DOM, updating only the changes found using its Diff algorithm. This increases performance. - It utilizes JSX, which is a syntax extension of the JavaScript language and are known as React elements. It's essentially HTML but with the ability to use JavaScript expressions anywhere using curly braces. This is easier to read.
What's the difference between React.js and React Native?
- React.js is a JavaScript library, uses virtual DOM, uses HTML and CSS, and can use any database. - React native is a JavaScript framework, uses Native API, uses <text> and <view>, uses realm to cater to servers.
In calling setState, when would you pick one method of calling this function over the other?
- The first method is to pass an object into setState. - The second method in calling setState, you can pass an updater function instead. The difference between these two are that passing a function allows you to access the current state value inside the updater. Whenever we are trying to perform any expression or calculation that depends on the latest version of state, we should use setState with a function.
What are the limitations of React?
- The most obvious limitation of React is that it is solely a UI library, not a framework such as Angular and Vue. - Because it is not a framework, there are more steps that need to be taken to integrate it into a tradition MVC framework. - It can be pretty difficult to learn React at first.
What is jQuery?
A fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
What's an arrow function?
A newer syntax for writing Javascript function expressions that are anonymous and can save time, simplify function scope (this), and be used to manipulate arrays.
What are the different lifecycle methods?
Depending on whether the component is mounting, updating, or unmounting, there are different lifecycle methods that would be called. - When mounting, the constructor, render, and componentDidMount methods are called. - When updating, the render and componentDidUpdate method are called. - When unmounting, the componentWillUnmount method is called. These are the most commonly used methods. There are other lifecycle methods that are less commonly used, such as shouldComponentUpdate(updating) and getDetrivedStateFromProps(mounting/updating)
What do you understand from "In React,everything is a component?"
Every piece of code in react will be inside a component, whether it's a functional component or a class component. In most apps, App.jsx would be at the top of the component tree and every child component will be rendered inside of that parent component.
How can you embed two or more components into one?
In React, you can embed another or multiple components by calling it inside of a component's return statement.
What is the Flux design pattern?
In a framework, it is a general design pattern that implements a single mediator (either a reducer or store, depending on implementation) for all actions, through which the application state is processed and returned to the view. The Flux design pattern is made up of four parts, organized as a one-way data pipeline: action, dispatcher, store, and view.
What is JSX?
JSX is a syntax notation for Javascript XML and provides expressiveness of JavaScript along with HTML.
Why can't browsers read JSX?
JSX is not valid JavaScript. Browsers can only read JavaScript objects. To read JSX you would need a transpiler to convert the JSX to regular JavaScript that the browsers can understand. In React, we have used Babel to do the compiling for us.
What are props?
Props are arguments passed into React components and are passed down similar to HTML attributes. Props are read-only and can be JavaScript expressions, string literals, callback functions, and other components.
What is React Router?
React Router is a standard library for routing in React and is used mainly for developing single page applications and offers dynamic routing. Some of its components are BrowserRouter, Route, Link, and Switch.
List down the advantages of React Router.
React Router is used to lay out multiple "routes" in a single application and the advantages are the following: - It enables navigation among different application views - It keeps the UI in sync with the URL - It allows dynamic URLs, using URL paramaters, and nesting routes inside others
How do you create an event handler in React?
React event handlers are similar to DOM event handlers, where the main differences are events being named with camel case and event handlers are passed functions instead of a string. Unlike HTML however, we do not need to add event listeners to an element after it is created. Instead, listeners are provided when an element is initially rendered.
What is React?
React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called "components."
What is Redux?
Redux is a flux-inspired pattern and library for managing and updating application state, using events called "actions". It serves as a centralized store for state that needs to be used across your entire application, with rules ensuring that the state can only be updated in a predictable fashion.
