翻译 | 红薯
出品 | OSC开源社区（ID：oschina2013）
在 JavaScript 前端开发框架中，Svelte 算是一个新来的搅局者，在网上我们已经听到很多关于 Svelte 的哔哔。因此我决定试试这个家伙，顺便跟 React 做个简单的比较。
本文将展示 Svelte 和 React 在构建一个基础应用的差异，其中涉及到的内容包括：
组件结构
状态初始化
属性传递
状态向上传递
事件侦听
动态样式
还有很多其他方面的内容需要讨论，例如 按需渲染 和 生命周期 等其他炫酷的概念。限于篇幅，这篇文章还是聚焦在基础使用上吧。
准备工作
在继续往下阅读之前，你应该准备好如下环境：
npm 或者 yarn
node.js
如果你用 Visual Studio Code 开发，可以装一个 Svelte 插件 。
Svelte 和 React.js 两者都是基于组件的 JavaScript 框架，主要用于 Web 应用的开发。最主要的区别是 Svelte 没有使用虚拟 DOM。Svelte 在构建的时候就将代码编译成 Vanilla JS 代码，而 React 在运行时解释代码。
Svelte 文档写道：
Svelte 是一种全新的构建 Web 应用的方法。诸如 React 和 Vue 这类传统的框架，它们的大部分工作都在浏览器上执行，而 Svelte 在构建应用的过程做就了大量的工作。 Svelte 没有使用虚拟 DOM 技术，而是当应用状态发生变化时，通过代码如手术般的更新 DOM。
酷！但是这些底层的细节对我来说并不重要。我只想从开发人员的角度看看，在使用 Svelte 和 React 开发应用程序时，感觉好吗？有趣吗？直观吗？
开工！
创建应用脚手架
在这篇文章中，我们将创建一个很小的 Web 应用，产品经理给这个应用确定了如下需求：
三个组件，分别是：App 、Heading 和 Button
当点击 Button 时，Heading 会更新显示点击的次数
每次点击 Button 时，Button 自身的颜色会跟着变化
首先使用如下命令在你电脑上创建一个新的目录，暂且命名为 svelte-react：
mkdir svelte-react
cd svelte-react
接着分别创建 Svelte 和 React 的应用模板并运行。这里 Svelte 的初始步骤比 React 多了一步，此外 Svelte 默认端口是 5000 ，而 React 是 3000 。
Svelte
打开终端窗口，运行如下命令：
npx degit sveltejs/template svelte-test React
cd svelte-test
npm install
npm run dev
打开第二个终端窗口，进入刚建好的 svelte-react 目录，运行命令：
npx create-react-app react-test
cd svelte-react
npm start
你会发现 Svelte 的命令运行快得多，因为你不是真正在运行一个工具，而是克隆一个项目模板。
构建应用组件
运行完上述命令后，你会注意到 Svelte 和 React 各自生成很多很多的文件，感兴趣的话，可以随便浏览看看这些生成的文件。
不管是 Svelte 和 React ，都是把组件源码放到 src 文件夹下，Svelte 项目主要是一些扩展名为 svelte 的文件，而 React 项目则是一些 .js 的文件。
两个项目都有一个 App 组件，分别是 App.svelte 和 App.js 。用你喜好的编辑器分别打开这两个文件，清空它们，我们从头开始。
组件结构 Svelte
和 React 组件不同的是，Svelte 的代码更像是以前我们在写 HTML、CSS 和 JavaScript 一样。
所有的 JavaScript 代码都位于 Svelte 文件顶部的 标签当中。
然后是 HTML 代码，你还可以在 标签中编写样式代码。有趣的是，组件中的样式代码只对当前组件有效。这意味着在组件中为
标签编写的样式不会影响到其他组件中的
元素。
接下来我们开始编写 App.svelte，首先删空文件内容，然后添加一个空的
特别声明：以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布，本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
