What is The Great Gatsby
?
It is a novel written by American author, F. Scott Fitzgerald, in 1925. The book follows a cast of characters living in the fictional towns of West Egg and East Egg on prosperous Long Island in the summer of 1922. Many literary critics consider it one of the greatest novels ever written.
Today we are talking about another Gatsby, a free and open source framework based on React that helps developers build blazing fast websites and applications.
When starting a new React app, you may consider React team’s recommendation:
Node.js 15 was released October 20, 2020. It comes with a number of major features:
Let’s explore what they are and how to use them.
In a previous article, we provided instructions on using NVM (Node Version Manager) to manage Node.js and NPM versions. In our environment, we had Node.js 12.16.0
and NPM 6.14.8
installed. By running nvm install node
, we installed Node.js 15.4.0
and NPM7.0.15
.
We have two windows open, one is set to Node.js 12, and the other one is set to Node.js …
npm@7.0.0 was released on October 13, 2020, and was shipped with Node.js v15.0.0 on October 20, 2020.
npm 7 is a major release, which includes many new features:
package.exports
npx
changesLet’s go into details to explore what they are and how to use them.
In a previous article, we have provided instructions on how to use NVM (Node Version Manager) to manage Node and npm versions. In our environment, we had Node 12.16.0 and npm 6.14.8 installed. By running nvm install node
, we installed Node 15.4.0 …
Node.js 15 was released on October 20, 2020. It comes with npm 7 and many new features. Are you ready to try it out?
But wait a minute: Node.js 15 and npm 7 come with breaking changes. Will the upgrade mess up your existing projects?
Yes, potentially it could.
Luckily, we have NVM (Node Version Manager), which can help us mitigate the risk. Let’s take a walkthrough nvm
and be confident enough to upgrade node.js and npm versions.
nvm
manages node.js and npm versions. It’s designed to be installed per-user and invoked per-shell. …
In terms of web design, a light-on-dark color scheme (also called black mode, dark mode, dark theme, or night mode) is a color scheme that uses light-colored text, icons, and UI elements on a dark background.
The opposite color scheme is called dark-on-light color scheme, light mode, or light theme.
Computer screens start with dark mode by the imitation of cathode-ray tubes used back then. When light mode was introduced in WYSIWYG (what-you-see-is-what-you-get) word processors to simulate ink on paper, the skeuomorphic approach gained popularity. And quickly, light mode became the norm.
Since the year 2015, especially for the last couple of years, dark mode has gained a lot of traction. …
In a previous article, we built React tabs using Recoil, Styled Components, and Storybook.js. Here we’ll walk through advanced input fields: ClearableInput
and MultiValueClearableInput
. The development process can be applied to daily coding work. It’s also a frequently asked interview question, fitting easily within the one-hour interview time frame.
Since an input field is self-contained, useState
is well-suited for state management. We don’t need to use Recoil for external state management in this case.
Create React App is used to set up the React coding environment:
npx create-react-app my-app
cd my-app
npm start
Set up Styled Components for dependencies
in your package.json
: …
Create React App is a quick way to scaffold a React project. It can be easily generated by the command npx create-react-app <project name>
. Then you have the latest packages and the execution environment for a React project. It is convenient and effective.
Everything is great when it is fresh.
As time goes on, there will be new versions of Create React App that have new features and under-the-hood improvements. What then?
In this article, we’ll use Create React App 4 (CRA 4) as an example to walk through the process of upgrading Create React App-based projects.
The official documentation recommends running the following command to…
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.
In another article, we introduced styled components, a JavaScript library that allows us to write CSS inside a JavaScript file. As a result, components can run independently, without relying on any external CSS files.
Storybook is a tool for UI development. It makes development faster and easier by isolating components. …
Web development has advanced to framework era. However, interview is a time limited experience. Frequently, a frontend job interview requests building a simplified Web application, with restricted resource of HTML, CSS, and JavaScript, and possibly, without internet access to check syntax.
In this article, we use limited resource to build a Web application.
We use VSCode to set up the working environment for HTML, CSS, and JavaScript.
js
.index.html
and style.css
.