翻译 | 《JavaScript Everywhere》第11章 用户界面和React
写在最后面
大家好呀，我是毛小悠，是一位前端开发工程师。正在翻译一本英文技术书籍。
为了进步大家的浏览体验，对语句的构造和内容略有调整。如果发现本文中有存在瑕疵的中央，或者你有任何意见或者倡议，能够在评论区留言，或者加我的微信：code_maomao，欢送互相沟通交流学习。
(ﾟ∀ﾟ)..:*☆哎哟不错哦
第11章 用户界面和React
1979年，驰名的史蒂夫·乔布斯（Steve Jobs）拜访了施乐帕克（Xerox Parc），在那里他看到了施乐Alto集体计算机的演示。过后其余计算机是由键入命令管制的，而Alto则应用鼠标并具备可关上和敞开的窗口图形界面。乔布斯在最后的Apple Macintosh的创作中持续借鉴了这些想法。原始Mac的风行导致计算机UI的激增。明天，在通常的一天，咱们可能会与许多图形用户界面进行交互，其中可能包含集体计算机以及智能手机，平板电脑，ATM，游戏机等。用户界面当初围绕着咱们，能够跨各种设施、内容类型、屏幕尺寸和交互格局应用。
例如，我最近去了另一个城市散会。那天早上，我醒来并在手机上查看了航班状态。我开车开车去机场，屏幕上显示了地图，让我能够抉择正在听的音乐。途中，我停在ATM机上取回一些现金，输出PIN码并在触摸屏上输出指令。达到机场时，我在一个登机台登机。在登机口等车时，我在平板电脑上回复了几封电子邮件。在航行中，我在电子墨显示设施上看了一本书。起飞后，我通过手机上的一个应用程序来找车骑行，而后停下来吃午餐，在显示屏上选定了我的订单。在会议上，一个幻灯片投影到了屏幕平台上，而咱们许多人在笔记本电脑上做笔记。当黄昏回到我的酒店时，通过酒店电视屏幕菜单，我浏览了找到的电视和电影产品。我的一天充斥了许多UI和屏幕尺寸，用于实现与生存的外围因素（如交通，金融和娱乐）相干的工作。
在本章中，咱们将简要介绍JavaScript用户界面开发的历史。把握了这些背景常识之后，咱们将摸索React的基础知识，这本书的其余部分将应用的JavaScript库。
JavaScript和UI
最后设计于1990年代中期（不闻名的，10 days），以加强Web界面，JavaScript在Web浏览器中提供了嵌入式的脚本语言。这使Web设计人员和开发人员能够向网页增加仅靠HTML无奈实现的交互。可怜的是，每个浏览器供应商都有不同的JavaScript实现，因而很难应用。这是导致旨在在单个浏览器中工作的应用程序激增的因素之一。
在2000年代中期
jQuery（以及相似的库，例如MooTools）开始风行。jQuery容许开发人员应用简略的API编写JavaScript，该API在各种浏览器之间都能很好地运行。不久之后，咱们都能够将网页上的内容删除、增加、替换和设置动画。大概在同一时间，Ajax（“异步JavaScript和XML”的缩写）使咱们可能从服务器获取数据并将其注入到页面中。这两种技术的联合为创立功能强大的交互式Web应用程序提供了一个生态系统。
随着这些应用程序的复杂性减少，对组织和样代码的需要也并行增长。到2010年代初，诸如Backbone，Angular和Ember之类的框架开始主导JavaScript应用程序畛域。这些框架通过在框架代码中强加构造并实现通用应用程序模式来工作。这些框架通常是依据软件设计的模块、视图、控制器（MVC）模式进行建模的。每个框架都对Web应用程序的所有层进行标准，提供了一种结构化的形式来解决模板、数据和用户交互。只管这样做有很多益处，但也意味着集成新技术或非规范技术的工作量可能会很大。
同时，桌面应用程序持续用零碎特定的编程语言编写。这意味着开发人员和团队常常被迫做出一种或两种格调的抉择（Mac应用程序或Windows应用程序，Web应用程序或桌面应用程序等）。挪动应用程序处于相似地位。响应式Web设计的衰亡意味着设计师和开发人员能够为挪动Web浏览器创立真正令人难以置信的网站和应用程序，然而抉择构建仅基于Web的应用程序将其锁定在挪动平台应用程序仓库之外。Apple的iOS应用程序是用Objective C（以及最近的Swift）编写的，而Android则依附Java编程语言（不要与咱们的敌人JavaScript混同）。这意味着由HTML，CSS和JavaScript组成的Web是惟一真正的跨平台用户界面平台。
JavaScript的申明式接口
在2010年代初期，Facebook的开发人员在其JavaScript代码的组织和治理方面面临挑战。作为回应，软件工程师Jordan Walke在Facebook的PHP库XHP的启发下编写了React。React与其余风行的JavaSript框架的不同之处在于，它仅专一于UI的出现。为此，React采纳了“申明性”编程办法，这意味着它提供了一种形象，容许开发人员专一于形容UI的状态。
随着React和相似库（例如Vue.js）的衰亡，咱们曾经看到开发人员编写UI的形式产生了变动。这些框架提供了一种在组件级别治理UI状态的办法。这使用户对应用程序感到晦涩，同时提供了杰出的开发体验。借助诸如用于构建桌面应用程序的Electron和用于跨平台本机挪动应用程序的React Native之类的工具，开发人员和团队当初能够在其所有应用程序中利用这些范例。
React足够了
在其余各章中，咱们将依附React库来构建咱们的UI。你不须要具备任何React的应用教训，然而在应用之前，如果你对语法有所理解，这样会对应用有所帮忙。为此，咱们将应用create-react-app搭建一个新我的项目。create-react-app是由React团队开发的工具，它使咱们可能疾速建设一个新的React我的项目，并有帮忙地形象出底层的构建工具，例如Webpack和Babel。
在终端应用程序中cd进入我的项目目录并运行以下命令，这将在名为just-enough-react的文件夹中创立一个新的React应用程序：
$ npx create-react-app just-enough-react$ cd just-enough-react运行这些命令将在just-enough-react中输入一个目录，该目录蕴含所有我的项目构造、代码依赖关系和用于构建功能齐全的应用程序的开发脚本。通过运行以下命令启动应用程序：
$ npm start当初，咱们的React应用程序将在浏览器中的http://localhost:3000上可见（图11-1）。
图11-1输出npm start将在浏览器中启动默认的create-react-app
当初，咱们能够通过更改src/App.js文件开始编辑咱们的应用程序。该文件蕴含咱们的次要React组件。在须要一些依赖关系之后，它蕴含一个返回一些相似于HTML的标记的函数：
function App() {return (// markup is here)}组件中应用的标记称为JSX。
JSX是一种相似于XML的基于XML的语法，它使咱们可能准确地形容UI并将其与JavaScript文件中的用户操作联合起来。如果你理解HTML，抉择JSX就只是须要学习一些小的差别。此示例中的最大区别是HTML的class属性被className替换，以防止与JavaScript的class语法抵触。
JSX？
如果像我一样，你来自网络标准化和严格的关注点拆散的时代背景，那么你可能会感觉这很厌恶。我抵赖，第一次遇到JSX时，我立刻强烈的不喜爱它。然而，UI逻辑与出现输入的耦合提供了许多引人注目的劣势，这些劣势可能会随着工夫的推移而增长。
让咱们通过删除大部分款式代码并将其简化为简略的“ Hello World！”来开始自定义咱们的应用程序：
import React from 'react';import './App.css';function App() {return (<div className="App"><p>Hello world!</p></div>);}export default App;你可能会留神到封装了咱们所有JSX内容的标签。每个React UI组件必须蕴含在父HTML元素内或应用React片段，该片段代表非HTML元素容器，例如：
function App() {return (<React.Fragment><p>Hello world!</p></React.Fragment>);}对于React的最弱小的性能之一是，咱们能够通过将其括在大括号{}中来间接在JSX中应用JavaScript。让咱们更新App函数以应用一些变量：
function App() {const name = 'Adam'const now = String(new Date())return (<div className="App"><p>Hello {name}!</p><p>The current time is {now}</p><p>Two plus two is {2+2}</p></div>);}在后面的示例中，你能够看到咱们间接在界面中应用了JavaScript。如许酷啊？
React的另一个有用性能是可能将每个UI性能变成其本人的组件。一个好的教训法令是，如果UI的某个方面以独立的形式运行，则应将其拆散为本人的组件。让咱们创立一个新组件。首先，在src/Sparkle.js中创立一个新文件，并申明一个新函数：
import React from 'react';function Sparkle() {return (<div></div>);}export default Sparkle;当初让咱们增加一些性能。每当用户单击一个按钮时，它将在咱们的页面中增加闪光的表情符号（任何应用程序的要害性能）。为了做到这一点，咱们将导入React的useState组件并为该组件定义一些初始状态，该初始状态将是一个空字符串（换句话说，没有任何闪动）。
import React, { useState } from 'react';function Sparkle() {// declare our initial component state// this a variable of 'sparkle' which is an empty string// we've also defined an 'addSparkle' function, which// we'll call in our click handlerconst [sparkle, addSparkle] = useState('');return (<div><p>{sparkle}</p></div>);}export default Sparkle;什么是State？
咱们将在第15章介绍更具体的state细节，但当初，只须要晓得有状态的组件能够在组件中更改任何信息的以后状态。
例如，如果UI组件具备一个复选框，则在选中时其状态为true，而在未选中时状态为false。
当初，咱们能够通过增加具备onClick性能的按钮来实现组件。留神驼峰命名，这在JSX中是必须的：
import React, { useState } from 'react';function Sparkle() {// declare our initial component state// this a variable of 'sparkle' which is an empty string// we've also defined an 'addSparkle' function, which// we'll call in our click handlerconst [sparkle, addSparkle] = useState('');return (<div><button onClick={() => addSparkle(sparkle + 'u2728')}>Add some sparkle</button><p>{sparkle}</p></div>);}export default Sparkle;要应用咱们的组件，咱们能够将其导入到src/App.js文件中，并将其申明为JSX元素，如下所示：
import React from 'react';import './App.css';// import our Sparkle componentimport Sparkle from './Sparkle'function App() {const name = 'Adam';let now = String(new Date());return (<div className="App"><p>Hello {name}!</p><p>The current time is {now}</p><p>Two plus two is {2+2}</p><Sparkle /></div>);}export default App;当初，如果你在浏览器中拜访咱们的应用程序，则应该看到咱们的按钮并可能单击它，将闪闪发光的表情符号增加到页面中！这是React的真正超级能力之一。咱们可能独立于应用程序的其余部分从新渲染单个组件或组件的元素（图11-2）。
图11-2单击按钮将更新组件状态并将内容增加到咱们的页面
当初，咱们应用create-react-app创立了一个新应用程序，更新了应用程序组件的JSX，创立了新组件，申明了组件状态，并动静更新了组件。在根本理解这些基础知识之后，咱们当初筹备应用React应用JavaScript开发申明式UI。
论断
咱们被各种设施上的用户界面所突围。JavaScript和Web技术为应用繁多技术在多个平台上开发这些接口提供了无可比拟的机会。同时，React和其余申明式视图库使咱们可能构建功能强大的动静应用程序。这些技术的联合使开发人员能够构建惊人的货色，而无需在每个平台都具备专门知识。在接下来的章节中，咱们将通过应用GraphQL API构建用于Web、桌面和挪动应用程序的接口，将其付诸实践。
如果有了解不到位的中央，欢送大家纠错。如果感觉还能够，麻烦您点赞珍藏或者分享一下，心愿能够帮到更多人。