All Posts In Reactjs

Data Fetching In React App with NextJS
Adam C. |
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.
Open External Links in New Tab for CKEditor
Adam C. |
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.
Syntax Highlighting with CKEditor's Code Block
Adam C. |
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.
Set Environment Variables in Next.JS
Adam C. |
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.
Controlled vs Uncontrolled - Confusing Part
Adam C. |
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.
Clarify React Refs by Examples
Adam C. |
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.
Finally We Fixed "Failed to Fetch" Error
Adam C. |
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.
Semantic UI Dropdown with Remote Data
Adam C. |
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.