Photo by Kyle Glenn on Unsplash

Nowadays multi-lingual support is getting more and more important. It has already become a standard in modern websites. There are many ways to achieve it. But it is very important to do it early in a project. Apply multi-lingual support to the existing web could be painful because you have to pull out all strings in your project. That’s a lot of work which you definitely don’t want to do.

Luckily to react community, there are a lot of handy libraries. If you are using Next.js with your react project, next-i18next is a good choice. I am going to provide…


Photo by Kyle Glenn on Unsplash

網際網路沒有邊界,可是語言有。要讓網站打破語言的限制就必須支援多國語言,因此支援多國語言對現代網站來說是非常重要的功能。對於 React 社群來說,有許多的套件可以實現這個功能,但是如果你的專案使用 Next.js 作為框架,next-i18next 就是最好的選擇。這篇文章中我們將實作一個小範例,使用 next-i18next 來完成多語系支援。

建立專案

首先建立一個專案,然後完成 Next.js 開發環境的配置。詳細步驟可以參考這篇文章。接著安裝 next-i18next。

npm install — save next-i18next

yarn add next-i18next

詳細步驟可以參考這篇文章。然後安裝 next-i18next。在根目錄下的 public 資料夾建立一個 static 資料 …


Rich text editor has become a common component in modern web. It makes the website more interactive with users. But building a rich text editor can be really tricky.

To react community, we are lucky to have react-draft-wysiwyg. It is a powerful text editor. In this article, I am going to build a rich text editor by using react-draft-wysiwyg. Then save the content and display it. Let’s do this!

Setup project

First create a react project. You can use create-react-app or build up in your preferred way. After it’s done, let’s install packages we are going to need.

npm install -s draft-js


What is NPM?

npm is a package manager for Node.js. Also an online database of more than one million javascript development tools(packages). To download a package from npm, all you have to do is run command:

npm install <package>

And the package will automatically be downloaded to the node_modules folder in your project. You can use it right away. It saves so much time for developers. As an open source library, you can also share your cool stuff by publishing it to npm.

Let’s build up a simple and useful package, then publish it to npm.

Create project

First we…


Why should we do dynamic import

Nowadays we use tools like webpack to bundle our JavaScript, it makes all our JavaScript into one bundle.js file. It saves us a lot of work. But the problem is this file can be huge while modern website is getting more and more complex. When Browsers deal with this huge bundle.js file, loading time can be long enough to drive users away. We definitely don’t want that happen when user is literally everything to a website.

To avoid this happen we want to load modules separately. When the page first render all modules are loaded in the same time no…


Next.js是一款非常受歡迎的React框架,你也許沒有聽過他,但你一定使用過基於Next.js開發的網站,像是Netflix, Docker, GitHub 和 Uber 這些大公司都使用了 Next.js。 在開始之前先來簡單介紹 Next.js 的優點與缺點,了解我們為什麼要使用它。

為甚麼選擇Next.js

  • 建立開發環境

Next.js 一個很棒的優點是容易上手,對於初學者來說要開始一個 React 專案,還要先學會編譯、打包等等工具,還要寫設定檔……可能還沒開始寫 code 半條命就去了。 這時候 create-react-app 是一個選擇,它也非常簡單容易上手,不過和 Next.js 相比少了許多功能。

要開始一個 Next.js 專案只需要下載好 react 和 next,設定好執行專案的腳本,然 …


什麼是 npm ?

npm 是 Node.js 的套件管理工具,也是資源豐富的線上套件庫,透過 npm下載現成的套件就是前端工程師的日常,只需要向 npm 下指令,它就會自動下載套件到我們指定專案中的 node_modules 資料夾下,馬上就可以使用,替開發者省下了大量的時間。不過在這個社群得之於人者太多是不需要謝天的,因為自己發布套件回饋社群其實一點都不難,而且說不定哪天就不小心做出了甚麼統一江湖各大門派的超強套件。

這篇文章就讓我們來實做一個簡單又實用的小套件,然後把它發布到 npm 上吧。

建立專案

首先我們要下載 npm ,它是隨著 Node.js 的安裝包一起下載的,所以就去 Node.js 的官方網站下載。

安裝好之後打開 terminal 輸入:

npm -v

如果有出現版本資訊就是安裝成功了。

接下來建立一 …


I was a writer and editor of travel guide book. Without CS background it took about six months for me to become a front-end developer. One of the most important thing you have to figure out before you start is why you want to do this. No one can answer this for you, I can only give you some advices.


Before we start, i think it’s necessary to talk about the reason i write this article. I hope i can help people who read this article easily build a carousel, get experiences applying React Hook to your project and how to make good use of ternary operator in React JSX. Don’t worry this is simple and you can finish it in 10 minutes for sure, let’s do it!

First step, we have to write a function component with React Hook. Before Hook introduced to the world in 2019, function components were stateless and logicless. Now with Hook we can achieve…


最近正在進行的專案遇到了文字編輯器的需求,發現市面上已經有許多強大的文字編輯器,既然已經有大神做的現成品,我當然就不需要重複造輪子啦(其實根本造不出來)。爬了一下文就決定使用 React Draft Wysiwyg,它的造型簡潔乾淨、功能齊全,看起來又很容易應用,完全符合我的需求。

官網上的文件很詳細、清楚,我們就照著說明一步一步來做吧。

首先用yarn或npm安裝

npm install -s draft-js

npm install -S react-draft-wysiwyg

yarn add ‘draft-js’

yarn add ‘react-draft-wysiwyg’

安裝好之後就來import

import React, { Component } from ‘react’;imp …

Weian Wang

Front-End Developer/Travel Guide Book Writer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store