Solid.js 最新官方文档翻译（1）—— 介绍与快速开始

冴羽
1,810 阅读4分钟

前言

Solid.js，一个比 React 更 react 的框架。每一个使用 React 的同学，你可以不使用，但不应该不了解。

目前 Solid.js 发布了最新的官方文档，但却缺少对应的中文文档。为了帮助大家学习 Solid.js，故有此系列。

我同时搭建了 Solid.js 最新的中文文档站点：solid.yayujs.com ，欢迎勘误。

虽说是翻译，但个人并不喜欢严格遵守原文，为了保证中文阅读流畅，会删减部分语句，对难懂的部分也会另做补充解释，希望能给大家带来一个好的中文学习体验。

欢迎围观我的“朋友圈”、加入“低调务实优秀中国好青年”前端社群，分享技术，带你成长。

Solid 介绍

Solid 是一个现代 JavaScript 框架，旨在构建响应式和高性能的用户界面 (UI)。它优先考虑简单且可预测的开发体验，使其成为开发人员的绝佳选择。

Solid 是什么？

作为一个 JavaScript 框架，Solid 拥有响应式和细粒度更新。

在编程中，响应式是指应用程序响应数据或用户交互变化的能力。

在以前，当发生变化时，需要重新加载整个网页才能显示更新的信息。而现在，使用细粒度响应式系统，更新仅应用于页面中需要更新的部分。

Solid 采用了细粒度响应式的概念，仅当应用程序依赖的数据发生变化时才更新。这减少了工作量，并可以带来更快的加载时间和更流畅的用户体验。

使用 Solid 的优势

  • 高性能: 细粒度响应式使得 Solid 仅更新已更改的内容，从而实现更快的加载时间和更流畅的整体性能。
  • 功能强大: Solid 使用更少的内存和处理能力，能够创建复杂的应用程序而不影响功能。这也为开发人员提供了在更新方式和时间上的灵活性。
  • 注重实用: 不拘泥于僵化的结构或方法，而是让您自由选择最适合您的策略和实践。
  • 高效开发: 不管开发者的经验水平如何，Solid 清晰且可预测的 API 使开发人员的工作更简单、更高效。

Solid 的目标是在速度、效率、功能和灵活性之间取得平衡，同时提供一个对开发人员友好的环境。这种功能组合使其成为构建响应式和高性能 UI 的绝佳选择。

Solid 演练场

访问演练场，在浏览器中体验 Solid。

此外，我们还提供了 JavaScript and Typescript Stackblitz 入门程序，它提供了一个基于 Web 的开发环境帮助您入门。

创建一个 Solid 应用

先决条件：

Solid 提供了快捷的项目模板，帮助你启动。要运行应用程序，请选择您喜欢的语言执行一下步骤：

JavaScript 项目

  1. 在终端中运行以下命令获取 JavaScript 入门模板：
# npm
npx degit solidjs/templates/js my-app

# yarn
yarn dlx degit solidjs/templates/js my-app

# pnpm
pnpm dlx degit solidjs/templates/js my-app

# bunx
bunx degit solidjs/templates/js my-app
  1. 导航至应用程序目录：
cd my-app
  1. 安装必要的依赖项：
# npm
npm install

# yarn
yarn install

# pnpm
pnpm install

# bun
bun install
  1. 运行应用程序：
# npm
npm run dev

# yarn
yarn dev

# pnpm
pnpm dev

# bun
bun dev

这将启动开发服务，现在，打开浏览器并导航至 localhost:3000 查看应用程序。

TypeScript 项目

  1. 使用 TypeScript 模板，在终端中运行以下命令：
# npm
npx degit solidjs/templates/ts my-app

# yarn
yarn dlx degit solidjs/templates/ts my-app

# pnpm
pnpm dlx degit solidjs/templates/ts my-app

# bunx
bunx degit solidjs/templates/ts my-app
  1. 导航至应用程序目录：
cd my-app
  1. 安装必要的依赖项：
# npm
npm install

# yarn
yarn install

# pnpm
pnpm install

# bun
bun install
  1. 运行应用程序：
# npm
npm run dev

# yarn
yarn dev

# pnpm
pnpm dev

# bun
bun dev

这将启动开发服务，现在，打开浏览器并导航至 localhost:3000 查看应用程序。

探索更多模板

Solid 提供多种 Vite 模板来简化您的开发流程。这些资源可在 GitHub 上获取。

Solid.js 中文文档

本篇已收录在掘金专栏 《Solid.js 中文文档》，该系列一共 25 篇。下一篇：Solid.js 最新官方文档翻译（2）—— 响应式介绍

此外我还写过 JavaScript 系列、TypeScript 系列、React 系列、Next.js 系列、VuePress 博客搭建系列等 14 个系列文章， 全系列文章目录：github.com/mqyqingfeng…

通过文字建立交流本身就是一种缘分，欢迎围观我的“朋友圈”、加入“低调务实优秀中国好青年”前端社群，分享技术，带你成长。

avatar
文章
阅读
粉丝