Phase 1: TypeScript Mastery & JavaScript Runtime Foundation (Month 1)

Goal: Master TypeScript’s type system and JavaScript’s asynchronous runtime model, establishing a solid foundation for full-stack development. This phase bridges your Java background to the TypeScript/JavaScript ecosystem.

Read More

React 19+ introduces the revolutionary React Compiler that promises to automatically handle most performance optimization work. But does this mean the useCallback Hook is now obsolete? This article will explore the real value, practical limitations, and future role of useCallback in the React Compiler era.

Read More

As a JavaScript developer, have you ever encountered scenarios like this in your code and felt confused?

1
2
3
4
5
6

// What's the difference between these two lines?
const result1 = user.isActive && user.hasPermission;
const result2 = permissions & ADMIN_PERMISSION;

// Or in TypeScript
type AdminUser = User & AdminPermissions;

&& and & look similar, but they serve completely different purposes. One is for logical operations, the other for bitwise operations and type operations. Confusing these two operators can lead to hard-to-debug bugs, and understanding their differences is crucial for writing clear, correct code.

Read More

Do you feel a sense of déjà vu when you first see data processing pipelines like this in modern frontend code?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// Data processing in React components
const UserList = ({ users, searchTerm }) => {
  const filteredUsers = users
    .filter(user => user.name.includes(searchTerm))
    .map(user => ({ ...user, displayName: user.name.toUpperCase() }))
    .sort((a, b) => a.displayName.localeCompare(b.displayName));

  return (
    <ul>
      {filteredUsers.map(user => 
        <li key={user.id}>{user.displayName}</li>
      )}
    </ul>
  );
};

If you have a background in Clojure or other functional programming languages, this pattern of method chaining and data transformation might remind you of familiar functional programming concepts. This similarity is no coincidence—modern JavaScript and frontend frameworks heavily borrow from core functional programming ideas.

Read More

In TypeScript and JavaScript development, various punctuation symbols are not only components of syntax, but also important tools for expressing complex logic. This article will provide a detailed introduction to each symbol’s usage from basic to advanced levels, combined with practical application scenarios in the React and TanStack ecosystem.

Read More

As a Java developer, you might feel confused when you first encounter TypeScript code like this:

1
2
3

export const createRouter: CreateRouterFn = (options) => {
  return new Router(options)
}

What is CreateRouterFn? What is the => syntax? How is this different from Java method declarations? This article will systematically analyze various JavaScript/TypeScript function syntax forms from concepts familiar to Java developers, helping you quickly master the core syntax of modern frontend development.

Read More

In modern Single Page Application (SPA) development, user experience optimization often lies in the attention to detail. Among these, scroll position restoration is a feature that appears simple but is highly technical. This article will thoroughly analyze the implementation principles of TanStack Router’s scrollRestoration feature, from basic concepts to source code analysis, providing a comprehensive understanding of this important functionality.

Read More

For developers transitioning from Java, some nuances of TypeScript’s type system can be confusing, particularly understanding typeof and ReturnType. This article provides clear comparisons and practical examples to explain these concepts thoroughly.

Read More

As a Java developer first encountering TypeScript, you might find its module system confusing. Why do we need declare module? Why can’t we just use files directly? This article will start from concepts familiar to Java developers and provide an in-depth analysis of TypeScript’s module system.

Read More