译者注

全部文档参看

• Material-UI中文文档

实例代码的效果预览请前往官方文档网站

• Material-UI

译者的话

目前的话两天翻译了前两个章节，全部api的翻译会在两周内完成，如果有什么纰漏错误之处，也请各位指出。

material-ui是什么

• material-ui是基于React实现的一系列谷歌MaterialDesign组件

知识储备

我们希望你在使用Material-UI之前，对React有一定的了解。因为Material-UI是一系列的React组件，因此了解React是怎样在web开发中运作的是十分重要的。

如果你已经熟悉如何开发一个单页面应用（SPA），同时熟练操作Node（译者注：这里应该是指NodeJS），那么请跳过这个章节，直接前往 安装 的部分。

否则，接下来是SPA和NodeJS的简要介绍。特别是当你只有很少的web开发经验，或是仅仅限于开发过通过HTML，CSS，少量JavaScript实现的web应用时，你会发现接下来的介绍对你很有帮助。

单页面应用（SPA）

很久很久以前（？），网站是通过使用HTML构建一个静态页面，使用CSS对样式进行控制，然后使用JavaScript来实现一些用户交互或者一些动画。大多数的客户端交互，尤其是那些对数据进行操作的行为，全部涉及到完整的服务器-客户端的往返访问：数据从客户端发送到服务器，它在那里被处理，然后将结果返回给客户端。此外，大部分的这种沟通模式是”死锁“的，这也就是说，在这个往返访问的过程中，客户端一直处于忙碌状态，是不能进行交互的。

随着异步服务器调用（ajax）的出现，客户端可以在发送数据到服务器并返回结果之前做其他事情，同时等待响应。然而大多数的客户端交互仍然需要对服务器进行往返访问，这使得网站变得不流畅，响应速度不够及时，无法像原生桌面应用一样．因此单页面应用(SPA)应运而生。

一个单页面应用（SPA）就是一个”网站“，然而基本上只由单一的一个页面构成。也就是说，整个网站都基于一个文件（通常是一个JavaScript文件），它仅从服务器发送到客户端一次。处理客户端交互的绝大部分逻辑都在这个文件之中。因此，所有必要的操作都是在浏览器内存中完成，所以提供了流畅，响应及时，快速的web应用体验。这种网络编程架构在过去的十年中获得了巨大的推动，这里有许多的面向这种结构的JavaScript框架，例如：

• Angular
• Ember
• Backbone
• React

将一个网站的所有代码集中在一个单一的文件，不可避免的会带来代码组织上的一些挑战。值得庆幸的是，有几个工具可以允许我们把代码分解为更小的模块（类似于将面向对象的应用分解为不同的类和接口）。这就是Node需要出场的地方。

Node

Node的核心是一个由C++编写的程序，它允许将JavaScript作为脚本使用（没错，在你的终端里，不是浏览器）。为了做到这点，Node使用谷歌ChromeV8 JavaScript引擎。因此，可以将Node单纯的视为一个运行时环境。

在Node诞生之初，它的主要目标是允许使用JavaScript在服务器端开发使用。这是有点激进，因为JavaScript历来是在客户端被使用的。然而，随着时间的推移，Web开发者们认识到使用Node进行工具和依赖管理的好处，并创建了类似项目：

Node Package Manager（NPM：Node包管理器）

或者叫它npm更为人熟知，正如其名，npm是一个命令行上的包管理工具，可以用来将外部的JavaScript引入自己的项目。例如material-ui，你可以将其视为一个包，通过npm导入。这意味着你可以通过在命令行运行：

npm install material-ui

来获得material-ui，并且在你需要的地方使用其组件。

这就是全部的简单介绍。如果你需要了解更多关于Node的知识，我们建议你在使用material-ui之前，去阅读一些在线的快速指南。

这个 博客 和这些 视频 会是一个不错的出发点。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!