The virtual DOM is a core concept of React. It’s a representation of the UI that’s kept in memory and synced with the actual DOM. The React DOM maintains the virtual DOM by reconciling the differences locally. The changes are inserted into the actual DOM based on the React pulling schedule.
DocumentFragment is an interface that defines the minimal document object without a parent. It’s used as a lightweight version of
Document and stores DOM objects. Document fragments have no effect on the actual DOM. But their children can be added to the actual DOM on demand.
The virtual DOM and document fragments use the same concept to improve the UI performance. Is the virtual DOM derived from document fragments? …
In a previous article, we introduced Recoil, the state management library that’s been available since May 2020. For managing states, Recoil is simpler and more effective than Context API and Redux. We have been using it for our projects ever since.
Storybook is a tool for UI development. It makes development faster and easier by isolating components. …
In this article, we use limited resource to build a Web application.
Open the empty
index.html, and type
Array is a list-like object, which has methods to perform traversal and mutation operations. We have reviewed array APIs in another article. Today we are going to look at some popular interview questions for array transformations.
Given an array, we can rotate each element by k steps. If the end of the array is reached, the element will rotate to the beginning of the array. Use
[1, 2, 3, 4, 5 , 6, 7] as an example. Rotating the array by one step will result in
[7, 1, 2, 3, 4, 5 , 6]. Rotating the array by two steps will result in
[6, 7, 1, 2, 3, 4, 5 ]. Rotating the array by nine steps will result in
[6, 7, 1, 2, 3, 4, 5 ]. It is equivalent to rotating the array by two (
9 % 7) steps. When k is negative, it rotates to the front, i.e., rotating the array by
-4 steps will result in
[5 , 6, 7, 1, 2, 3, 4]. …
In a previous article, we discussed dynamic programming, which is a method to solve a larger problem by building up a solution solving smaller subproblems. It uses optimal substructure.
In this article, we are going to focus on another hot topic: backtracking.
Backtracking is a general algorithm for finding all or some solutions to a computational problem that incrementally builds candidates to the solutions while abandoning each partial candidate (backtracks). A partial candidate is abandoned either because it cannot possibly be completed to a valid solution or because the problem needs to find all valid solutions.
What are the differences between dynamic programming and backtracking? …
Roman numerals are a numeral system that originated from ancient Rome. It remains used today in some occasions. Modern usage of Roman numerals employs seven symbols, each is assigned an integer value:
A Roman numeral is composed with upper cases of MDCLXVI. It is written with the largest symbol at the left and the smallest symbol at right, consist with Arabic numerals. For example, MDCLXVI stands for 1666
(1000 + 500 + 100 + 50 + 10 + 5 + 1). A symbol can be repeated, such as III (3). Generally speaking, all symbols are in addictive notations. However, when a lesser symbol is at the left, it defines a subtractive notation. …
After discussing how to prepare string manipulation interview questions, we are going to focus on another hot topic: dynamic programming.
Dynamic programming is a method to solve a larger problem by building up a solution to solving smaller subproblems.
An iterative implementation, eager and pre-caching, is usually preferred because it takes less time and memory. However, dynamic programming with iteration is harder to think through.
An iterative implementation is also called tabulation. The process is similar to a table-filling experience. It is a bottom-up approach, as the smaller subproblems are solved first, and then build up the whole solution. …
When you are presented with a technical interview, the interviewer is looking for a few things:
This interview series prepares you for a successful technical interview, but it is also useful for daily coding.
In the previous article, we described how to make a production build and deploy it to a server. Naturally, the next step is the server-side rendering. We are going to walk through the process by converting Create React App to a server-side rendered application.
Create React App is an integrated toolchain for the best user and developer experience. It has many things out of the box that we can jump onto and start coding immediately.
After finishing development, we need to make a production build and deploy it to a server. In this article, we walk through the build and deploy process.
Install Create React App, and run it out of box:
npx create-react-app my-app
Network tab, we see 10 requests in the development mode:
localhost: the main entry
index.htmlfor the root directory
bundle.js: the Webpack bundle…