In this article, we introduce different ways to do the Data Fetching in a React App, especially with NextJS. You will learn something like, Static generation, Server-side rendering, and Client-side rendering.
How to set the external links to be open in the new tab by default, i.e., set target=_blank in CKEditor 5? This short note shows you how to set the configuration in CKEditor 5 on both in HTML code and React Component.
CKEditor 5 does not ship with Code Blocks by default, but it could be added via custom build. The simplest way to use it is from ckeditor5-build-classic-dna. However, it does not support Syntax Highlighting. The good thing is that it's fairly easy to add one via the front-end library, like prismjs.
Before nextJS 9.4, we could use next.config.js to set up environment variables, i.e., process.env.* which we can use in our application. In nextJS version 9.4 and up, we could use .env* files. At first glance, they make this complicated, but they have been given a purpose. In the article, we will go over this, and see how we benefit from this new feature.
There are two types of “Controlled vs Uncontrolled” in React, and they are kind of “contradict” to each other. To better understand them, we would need to understand the context.
You may find out React Refs is confusing like I did. In this article, we use real examples to explain what Ref is, how to use it to do focus, and how to do forwarding Ref, etc. We will cover the Ref usages in both Class component and Functional Component.
In this article, we learned how to fix the 'failed to fetch' error from API-Gateway in our AWS Lambda Serverless Framework. The root cause is ended up to be the expired AWS Cognito Access/ID tokens. We were able to fix this by utilizing the Apollo Error Link to replace the old token with the refreshed one, and then retry the request.
In this article, I show you how I implemented the tags function using remote data. The frontend is done by the Semantic UI Dropdown component and the backend is implemented using FeathersJS with Mongodb.
React's key point is 'state', and 'key' attribute is special and powerful. When a key changes, React will create a new component instance rather than update the current one, so the useSate will be called in the component.