大家好，我是你们的 猫哥，那个不喜欢吃鱼、又不喜欢喵 的超级猫 ~

平时如何发现好的开源项目，可以看看这篇文章：GitHub 上能挖矿的神仙技巧 - 如何发现优秀开源项目

今天总结一下 2024 年 GitHub 上 star 增长最多的前端 JavaScript 项目

React

• 内容: React 是一个用于构建用户界面的 JavaScript 库。它允许开发者创建可复用的 UI 组件。

• 技术栈: JavaScript, JSX, HTML, CSS

• 影响: React 在前端开发中极大地提升了组件化开发的效率，推动了单页面应用的发展。

• 代码示例:

  import React from 'react';
  import ReactDOM from 'react-dom';
  
  function App() {
    return <h1>Hello, world!</h1>;
  }
  
  ReactDOM.render(<App />, document.getElementById('root'));

以下是 2024 年增加的一些特性和功能：

• 引入了新的API use, useOptimistic, 和 useActionState。

• 支持 ref 作为属性。

• 引入了 Suspense 兄弟节点预热机制。

• 支持表单 action 属性和 formAction 属性。

• 支持文档元数据和样式表的渲染。

• 引入了新的静态站点生成API prerender 和 prerenderToNodeStream。

• React服务器组件功能已稳定。

• 废弃了 element.ref 访问、react-test-renderer 和一些旧的API。

• 新的JSX变换现在是必需的。

详细信息：React 19 Release

2. Vue.js

• 内容: Vue.js 是一个渐进式 JavaScript 框架，用于构建用户界面和单页面应用。

• 技术栈: JavaScript, HTML, CSS

• 影响: Vue.js 以其易学易用和灵活性受到开发者的广泛欢迎，促进了前端开发框架的多样化。

• 代码示例:

  <div id="app">{{ message }}</div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello, Vue!'
      }
    });
  </script>

以下是 2024 年增加的一些特性和功能：

• 模板解析器：新版本的模板解析器速度提高了两倍，提升了性能。

• 反应系统：改进了反应系统，减少了不必要的组件重新渲染，提高了效率。

• Suspense API 增强：Suspense 特性在 Vue 3.5 中得到了多次升级，使得处理异步组件和加载状态更加优雅。

3. Angular

• 内容: Angular 是一个用于构建动态网页应用的框架，提供了开发、构建、测试和维护的完整工具链。

• 技术栈: TypeScript, HTML, CSS

• 影响: Angular 提供了强大的数据绑定和依赖注入功能，提升了大型企业级应用开发的效率和可维护性。

• 代码示例:

  import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    template: `<h1>{{ title }}</h1>`,
  })
  export class AppComponent {
    title = 'Hello, Angular!';
  }

以下是 2024 年增加的一些特性和功能：

• 增加了新的工具和功能，例如解析延迟块信息和扩展性能事件集。

• 修复了定时器序列化和嵌套定时器问题。

• 为 platform-server 添加了多次传输状态的警告。

详细信息：Angular Releases

4. Svelte

• 内容: Svelte 是一个新型前端框架，与传统框架不同，它在编译时将组件转换为高效的原生 JavaScript 代码。

• 技术栈: JavaScript, HTML, CSS

• 影响: Svelte 的编译时特性减少了运行时开销，提升了应用的性能，受到前端开发者的关注和喜爱。

• 代码示例:

  <script>
    let name = 'world';
  </script>
  
  <h1>Hello {name}!</h1>

以下是 2024 年增加的一些特性和功能：

• 修复了一些派生和追踪相关的问题。

• 引入了 class 属性可以是对象或数组。

• 增加了工人导出的条件以更好地支持基于工人的环境。

详细信息：Svelte Releases

5. Next.js

• 内容: Next.js 是一个基于 React 的框架，用于构建服务端渲染和静态网站生成的应用。

• 技术栈: JavaScript, React, Node.js

• 影响: Next.js 提供了强大的服务端渲染和静态生成功能，优化了前端性能和 SEO，广泛应用于现代 web 开发中。

• 代码示例:

  import React from 'react';
  
  function Home() {
    return <h1>Welcome to Next.js!</h1>;
  }
  
  export default Home;

以下是 2024 年增加的一些特性和功能：

• 修复了一些与链接和页面重新加载逻辑相关的问题。

• 增加了对 images.qualities 配置的支持。

• 增加了一些文档和示例的改进。

详细信息：Next.js Releases

6. Nuxt.js

• 内容: Nuxt.js 是一个基于 Vue.js 的通用应用框架，支持服务端渲染、静态站点生成和单页面应用。

• 技术栈: JavaScript, Vue.js

• 影响: Nuxt.js 提供了开箱即用的配置，简化了 Vue.js 项目的开发，提升了开发效率和性能。

• 代码示例:

  export default {
    data() {
      return {
        message: 'Hello, Nuxt.js!'
      };
    }
  };

以下是 2024 年增加的一些特性和功能：

• 增加了对  Vite 6 和 TypeScript 5.7 的支持。

• 改进了开发工具和页面元数据的热模块重载。

• 增加了新的性能和文档改进。

详细信息：Nuxt Releases

7. Gatsby

• 内容: Gatsby 是一个基于 React 的静态网站生成框架，提供快速的开发体验和出色的性能。

• 技术栈: JavaScript, React, GraphQL

• 影响: Gatsby 的静态生成特性提升了网站的加载速度和 SEO，受到前端开发者的广泛应用。

• 代码示例:

  import React from 'react';
  
  const IndexPage = () => (
    <main>
      <h1>Hello, Gatsby!</h1>
    </main>
  );
  
  export default IndexPage;

以下是 2024 年增加的一些特性和功能：

• 主要集中在性能改进和安全修复上。

• 增加了对Shopify和WordPress的支持和改进。

详细信息：Gatsby Releases

8. Redux

• 内容: Redux 是一个用于 JavaScript 应用状态管理的库，常与 React 一起使用。

• 技术栈: JavaScript

• 影响: Redux 提供了可预测的状态管理方案，提升了大型应用的状态管理和调试能力。

• 代码示例:

  import { createStore } from'redux';
  
  function counter(state = 0, action) {
  switch (action.type) {
      case'INCREMENT':
        return state + 1;
      case'DECREMENT':
        return state - 1;
      default:
        return state;
    }
  }
  
  const store = createStore(counter);
  
  store.subscribe(() =>console.log(store.getState()));
  
  store.dispatch({ type: 'INCREMENT' });
  store.dispatch({ type: 'DECREMENT' });

以下是 2024 年增加的一些特性和功能：

• 将代码库转换为 TypeScript，并更新了打包以更好地兼容 ESM/CJS。

• action.type 现在必须是字符串。

• 废弃了 createStore 和 AnyAction 类型。

详细信息：Redux Releases

9. Tailwind CSS

• 内容: Tailwind CSS 是一个功能类优先的 CSS 框架，提供了大量的实用工具类，简化了样式的编写。

• 技术栈: CSS, JavaScript

• 影响: Tailwind CSS 的实用工具类方法减少了自定义 CSS 的需求，提高了开发效率和代码一致性。

• 代码示例:

  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
    Button
  </button>

以下是 2024 年增加的一些特性和功能：

• 引入了 @import 引用选项以导入 Tailwind CSS 配置细节。

• 改进了调试日志和依赖相关警告。

• 修复了一些与 PostCSS  和 Vite 相关的问题。

详细信息：TailwindCSS Releases

10. Three.js

• 内容: Three.js 是一个用于创建和显示 3D 图形的 JavaScript 库，基于 WebGL。

• 技术栈: JavaScript, WebGL

• 影响: Three.js 使得在浏览器中创建复杂的 3D 图形和动画变得更加容易，推动了前端 3D 可视化的发展。

• 代码示例:

  ```js
  import * as THREE from 'three';
  
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
  
  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);
  
  camera.position.z = 5;
  
  function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
  }
  
  animate();
  ```

以下是 2024 年增加的一些特性和功能：

• 移除了一些过时的代码并清理了项目。

• 增加了对 WebGPU 的支持和改进。

• 修复了渲染和材质相关的问题。

详细信息：Three.js Releases

最后

这些项目在 2024 年获得了大量的关注和 star，展示了前端开发的最新趋势和技术进步。

更多精彩项目，请看下方宝藏仓库，请慎入！

https://github.com/FrontEndGitHub/FrontEndGitHub

不知不觉，原创文章已经写到第 75 期了

往期精文

• 玩转 GitHub 篇，推荐 10 个你没见过的 GitHub 的高效开源神器，YYDS！