译者注
全部文档参看
实例代码的效果预览请前往官方文档网站
译者的话
目前的话两天翻译了前两个章节,全部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框架,例如:
将一个网站的所有代码集中在一个单一的文件,不可避免的会带来代码组织上的一些挑战。值得庆幸的是,有几个工具可以允许我们把代码分解为更小的模块(类似于将面向对象的应用分解为不同的类和接口)。这就是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之前,去阅读一些在线的快速指南。