Frontend

前端工程師在電腦螢幕前使用 Claude AI 寫 React 程式碼,展示現代化的 Vibe Coding 開發流程

2026 前端必學:Claude 寫 React 快速上手

2026 年前端開發新標準:Claude 寫 React 快速上手指南。學會 AI 輔助編程、Vibe Coding 方法論與實戰應用。馬上學習。

2026 前端必學:Claude 寫 React 快速上手 Read More »

Technical Article, AI, Claude, Javascript, React Vernacular Campaign, software engineer, , , , ,
React11-React-Hook-useState

React Hook useState – React Vernacular Campaign 11

useState is a React hook for adding state to functions. useState allows us to define and manage state data within a function. useState returns an array of two values, including: the current state: when the function is first rendered, its value will be equal to the initial value we passed to useState. The current state: when the component is first rendered, its value will be equal to the initial value we passed to useState.

React Hook useState – React Vernacular Campaign 11 Read More »

Javascript, React Vernacular Campaign, Technical Article,
Web-beacon-web-beacon

What are Web Beacons? What you need to know about tools other than cookies

Web beacons are a product of the late 20th century and the rise of the Internet, appearing in the late 1990s. As more and more people began using the Internet, businesses needed a mechanism to collect, understand, and apply user data on a large scale. web beacons can work with cookies to gain insight into user behavior and track multiple sites.

What are Web Beacons? What you need to know about tools other than cookies Read More »

Technical Article
React10-React-Life-Cycle

React Lifecycle - React Vernacular Campaign 10

React Lifecycle - The previous post took the React syntax a step further, React JSX - React Vernacular Campaign 06 learned how to build a React component, and learned about the parent-child relationship between components. In this post, we'll talk about the component lifecycle, including the three stages of the lifecycle, the lifecycle of class objects, and the lifecycle of function objects.

React Lifecycle - React Vernacular Campaign 10 Read More »

React Vernacular Campaign, Technical Article,
React Props - React 白話文運動 09

React Props - React Vernacular Campaign 09

React Props - the React vernacular movement. This post will take a closer look at the React syntax. In the previous posts, we learned how to create a React component, and we learned that components have a parent-child relationship. This post introduces the concept of React Props, including: React component declaration, React Props.

React Props - React Vernacular Campaign 09 Read More »

React Vernacular Campaign, Technical Article,
React08-Building a React Project

Building a React Project - React Vernacular Campaign 08

Building a React Project - React Vernacular Campaign: The previous post introduced three terms, namely: what is Babel, what is Webpack, and what is Npm? This article will build a React project by hand, including: setting up the environment, building a React project, starting the project, and how to use React extensions. It also includes: official CRA build environment and self-built environment.

Building a React Project - React Vernacular Campaign 08 Read More »

React Vernacular Campaign, Technical Article,
Babel & Webpack & NPM - React Whitepaper Campaign 07

Babel & Webpack & NPM - React Whitepaper Campaign 07

This post will explain three terms that are needed to build a React project: what is Babel, what is Webpack, and what is Npm. Of course, the main focus is on the concept of using these tools, but there are other tools to choose from, such as Npm and Yarn.

Babel & Webpack & NPM - React Whitepaper Campaign 07 Read More »

React Vernacular Campaign, Technical Article,
React06-React-JSX

React JSX - React Vernacular Campaign 06

React is one of the most popular JavaScript packages for web and mobile front-end development, developed by Meta to enable developers to create reusable components to complete front-end pages, and JSX is one of the more common ways to write React, so we're going to talk about what JSX is, its syntax, and how to use JSX to build React. components.

React JSX - React Vernacular Campaign 06 Read More »

React Vernacular Campaign, Technical Article,
How React works

How React Works - The React Vernacular Campaign 05

React is one of the most popular JavaScript packages for developing web and mobile front-ends, developed by Meta (formerly Facebook) to enable developers to create reusable components to complete front-end pages.

However, it's important to note that React is not technically a framework. That's because it's only responsible for presenting the components of the UI. However, React provides an alternative solution to frameworks such as Angular and Vue, allowing us to work with it on complex front-end page functionality.

How React Works - The React Vernacular Campaign 05 Read More »

React Vernacular Campaign, Technical Article,
Javascript Higher Order Function - HigherOrderFunction

JavaScript Higher-Order Function - React Vernacular Campaign 04

This article introduces the very important concept of JavaScript functions - higher-order functions, which are functions that take one or more functions as parameters or return a function as a result. In this article, we will explore in depth what is a higher-order function, the benefits of using higher-order functions and how to use higher-order functions in real-world applications, what is the function orientation? Pure Functions, Higher Order Functions, Correlation.

JavaScript Higher-Order Function - React Vernacular Campaign 04 Read More »

Javascript, React Vernacular Campaign, Technical Article,