react利用xml_在设计原型中利用React的力量

react利用xml

by Linton Ye

由Linton Ye

在设计原型中利用React的力量 (Harnessing the power of React in design prototyping)

使用React的设计师Jack Hallahan的访谈 (An interview with Jack Hallahan, a designer who uses React)

In today’s sea of design prototyping tools, React might be an unintuitive choice.

在当今的设计原型工具之海中，React可能是一个不直观的选择。

The process of creating a prototype is supposed to be fast and visual. After all, the purpose of creating prototypes is to spend as as little time as possible testing different design options before making a decision. Conventionally, coding (and therefore React) is considered slow and difficult as a prototyping tool.

创建原型的过程应该是快速而直观的。 毕竟，创建原型的目的是在做出决定之前花费尽可能少的时间来测试不同的设计选项。 传统上，编码(以及因此的React)被认为是缓慢且困难的原型开发工具。

Jack Hallahan is a product designer based in London, UK. He’s one of the designers who knows how to harness the power of code to streamline their design processes.

Jack Hallahan是英国伦敦的产品设计师。 他是知道如何利用代码的力量来简化其设计过程的设计师之一。

Intrigued by Jack’s inspiring post, I emailed him and wanted to know more. Jack was nice enough to have a chat with me, which I can’t wait to share with you!

杰克(Jack)具有启发性的帖子引起了我的兴趣，我给他发了电子邮件，想了解更多。 杰克很高兴和我聊天，我迫不及待想与您分享！

Here’s what we talked about:

这是我们谈论的内容：

• How did Jack learn React as a designer? What were his biggest struggles?
  杰克是如何学习React作为设计师的？ 他最大的挣扎是什么？
• When is a good time to use React for design prototyping?
  什么时候使用React进行设计原型的好时机？
• Why is React the right tool? How does it compare to visual prototyping tools?
  为什么React是正确的工具？ 它与视觉原型工具相比如何？
• What React related tools does he use in his design process?
  他在设计过程中使用了哪些与React相关的工具？
• Jack’s suggestions to designers on how to learn React
  Jack关于如何学习React的建议给设计师

Interested in hearing the story of a fellow designer? Keep reading ?! My questions are italicized. Jack’s responses follow in regular type.

有兴趣听一位设计师的故事吗？ 继续阅读 ？！ 我的问题被表述了。 杰克的回答是普通的。

关于将React用作设计原型工具 (On Using React As a Design Prototyping Tool)

寻找正确的原型制作工具 (Finding the right prototyping tool)

Linton: How do you use React in your workflow? What’s the story behind using React as a prototyping tool?

Linton： 您如何在工作流程中使用React？ 使用React作为原型制作工具的背后是什么故事？

Jack: Something that we’ve struggled with for a while at our company is finding the right prototyping tool for the sort of work that we’re doing.

杰克：我们公司苦苦挣扎了一段时间的事情是找到适合我们正在做的工作的原型工具。

Many user experiences are more-or-less a linear user journey. An example is an onboarding flow, checkout, or account registration. There may be small decisions along the way, but they can be handled by prototyping for a “happy path” and then considering edge-cases. We can use tools like Marvel to make it quite high fidelity and test that with users.

许多用户体验或多或少是线性用户旅程。 一个示例是入职流程，结帐或帐户注册。 一路上可能会有一些小的决定，但是可以通过为“一条快乐的道路”制作原型然后考虑边缘情况来进行处理。 我们可以使用Marvel之类的工具使其具有较高的保真度，并与用户进行测试。

However, what I needed to prototype was not a linear user journey.

但是，我要做的原型并不是线性的用户旅程。

非线性用户旅程的原型 (Prototyping a non-linear user journey)

Our product is a business tool that allows customers to get their data from their business, for example their sales team performance data. It then creates a visual dashboard to put up on the TV in the office so that everyone can see the data all the time.

我们的产品是一种商业工具，允许客户从其业务中获取其数据，例如其销售团队的绩效数据。 然后，它创建了一个可视仪表板，可以放置在办公室的电视上，以便每个人都可以随时查看数据。

People use it to design data visualizations and to design dashboards. There are a lot of options that a user might have to go through in order to get the data they need and configure it in the right way to be viewed. It also has to handle data. Data come in different shapes and sizes. If we design a new data visualization, it has to be robust enough to handle different types of data, different schemas, different numbers from one digit to six digits.

人们使用它来设计数据可视化和设计仪表板。 为了获得所需的数据并以正确的方式对其进行配置，用户可能必须经历许多选择。 它还必须处理数据。 数据具有不同的形状和大小。 如果我们设计一个新的数据可视化，它必须足够强大以处理不同类型的数据，不同的模式，从一位到六位的不同数字。

Configuring a data-visualization is an example of a non-linear path. There are many options, all of which can be chosen in different combinations. Every combination will result in a different visualization. Seeing the preview of the chart change is a visual confirmation that the user’s decisions are having the intended effect. Because the outcome is very visual, a lower fidelity would not have been able to validate as thoroughly.

配置数据可视化是非线性路径的一个示例。 有很多选项，所有选项都可以以不同的组合进行选择。 每种组合都会产生不同的可视化效果。 看到图表更改的预览可以直观地确认用户的决定具有预期的效果。 由于结果非常直观，因此较低的保真度将无法完全验证。

There wasn’t really a tool that allowed us to prototype a complete user journey. I have also tried prototyping this with Axure RP in the past, which allows for some conditional logic, however it soon got out-of-hand.

确实没有一个工具可以让我们为完整的用户旅程提供原型。 过去，我也曾尝试使用Axure RP对此进行原型设计，该模型允许使用一些条件逻辑，但是很快就失控了。

I put aside other tools and invested my time into building something in React, and it really paid off.

我抛开了其他工具，将时间投入到在React中构建一些东西，这确实很有价值。

For me, the advantage of React is that it fills a gap that we had in our prototyping toolkit. That gap was interfaces that allow you to configure something in a non-linear way, and interfaces that handle data.

对我而言，React的优势在于它填补了我们原型设计工具包中的空白。 差距是允许您以非线性方式配置某些东西的接口，以及处理数据的接口 。

示例原型 (Example prototypes)

Can you give us some examples of non-linear user journies?

您能给我们一些非线性用户旅程的例子吗？

The first prototype was used to test the interaction design with users, as well as validating the options available to users: could they create a theme that suited their brand?

第一个原型用于测试与用户的交互设计，以及验证用户可用的选项：他们是否可以创建适合其品牌的主题？

Configuring a theme wasn’t a linear journey. It needed to be quite visual. It’s high fidelity because it introduced some new interaction patterns we needed to be confident about. Because the outcome is very visual, a lower fidelity would not have been able to validate as thoroughly.

配置主题并不是线性的过程。 它需要非常直观。 它具有很高的保真度，因为它引入了一些新的交互模式，我们需要对此充满信心。 由于结果非常直观，因此较低的保真度将无法完全验证。

Another example is this table widget prototype. It is high fidelity only in the table visualization. The form on the left is more-or-less un-styled. In fact the table is very similar to the markup and styling used to create the same thing in our production code. The prototype was create to figure out those things in detail — alignment, padding, hover states, font sizes, truncation, etc.

另一个示例是此表窗口小部件原型。 仅在表格可视化中它才具有高保真度。 左侧的表单或多或少没有样式。 实际上，该表与在生产代码中用于创建相同内容的标记和样式非常相似。 创建原型是为了详细了解这些内容-对齐，填充，悬停状态，字体大小，截断等。

为什么React是正确的工具？ (Why is React the right tool?)

Managing multiple paths and handling data are the natural power of code.

管理多条路径和处理数据是代码的自然力量。

Because React is JavaScript, if you want to make changes to the way that data is displayed, like doing some rounding or if you want to sort it, you can do that. You can’t do that in simple visual tools.

因为React是JavaScript，所以如果您想更改数据的显示方式(例如进行四舍五入或对数据进行排序)，则可以这样做。 您无法通过简单的可视化工具做到这一点。

[With visual tools] If you want to create a prototype to test the experience of doing something such as sorting the table, you have to create a couple of screens that look like the user flow and hope that the user’s going to click on the right button. If they don’t, you’d have to say, oops, sorry, we didn’t design that bit, let’s just get back to the right path.

[使用可视工具]如果要创建原型以测试进行表排序等操作的体验，则必须创建几个看起来像用户流程的屏幕，并希望用户单击右侧的按钮。 如果他们不这样做，那么您不得不说，哎呀，对不起，我们没有设计那么一点，让我们回到正确的道路上。

In comparison, React allows me to create more robust prototypes to handle data with a complete user journey. The user could explore different options, rather than just an on-rail experience where the user has to click the right button every time.

相比之下，React允许我创建更强大的原型来处理完整的用户旅程数据。 用户可以探索不同的选项，而不仅仅是每次都必须单击右键的在线体验。

One of those things is the idea of a component having state. The app knows the current state that it’s in, and you can do something to the interface to update the state. And then that state can be passed down to children. You can update a component over here by clicking something over there very easily. And then you can go back and undo it and it doesn’t affect the things down the line.

其中之一就是组件具有状态的想法。 该应用程序知道它所处的当前状态，您可以对界面进行一些操作以更新该状态。 然后，该状态可以传递给孩子。 您可以通过单击此处的某些内容来更新此处的组件。 然后您可以返回并撤消该操作，它不会影响所有事情。

High-fidelity prototypes by default

默认情况下，高保真原型

Fidelity is something you get by default when prototyping with code. Of course your button may not be styled until you add CSS, but even an un-styled button element looks and works like a button in the browser. It looks real and works as expected because it is real. You get things like cursor: pointer, hover and active states, the ability to highlight and copy text, real form elements like fields you can type in and radio buttons you can toggle, all without having to draw them or style them in any way.

在使用代码进行原型制作时，默认情况下会获得保真度。 当然，在添加CSS之前，可能不会设置按钮的样式，但即使是未设置样式的按钮元素，其外观也像浏览器中的按钮一样工作。 它看起来很真实，并且可以正常工作，因为它是真实的。 您将获得诸如光标之类的东西：指针，悬停和活动状态，突出显示和复制文本的能力，诸如您可以键入的字段之类的真实表单元素以及可以切换的单选按钮，而无需绘制它们或以任何方式对其进行样式设置。

In the end, we had something that was close to a finished experience. We had all the logic to handle someone changing the color or uploading a logo. And the interface was able to be in any state in any time and not be broken. So I could test it with users without worrying about going to some sort of broken state and trying to recover from that.

最后，我们获得了接近完成体验的东西。 我们拥有处理所有更改颜色或上载徽标的逻辑。 而且该接口可以随时处于任何状态而不会损坏。 因此，我可以与用户一起测试它，而不必担心会进入某种损坏状态并尝试从中恢复。

与视觉原型工具的比较 (Comparison with visual prototyping tools)

Do you use other prototyping tools? When do you use them?

您是否使用其他原型制作工具？ 您何时使用它们？

Yes, I create lower-fidelity static sketches before moving to React. Typically I would sketch on paper and also make some quick images in Sketch, possibly even using a tool like Marvel to string them together. I can explore more ideas and make changes faster in these tools — they are better for “divergent” design, and React is best for “convergent” design — no longer exploring but rather deciding, validating, and iterating.

是的，在转向React之前，我创建了低保真静态草图。 通常，我会在纸上进行素描，并在Sketch中制作一些快速图像，甚至可能使用Marvel之类的工具将它们串在一起。 我可以探索更多的想法并在这些工具中更快地进行更改-它们更适合“差异化”设计，而React最适合“融合”设计-不再探索，而是决定，验证和迭代。

Can you comment on the speed of creating prototypes in React compared to visual prototyping tools?

与视觉原型工具相比，您能否评论一下在React中创建原型的速度？

React has a fairly steep learning curve, but it can be surprisingly quick once you get the hang of it. However it’s simply overkill for a lot of prototypes and I wouldn’t recommend it for things that other tools can do well. I find it enjoyable to spend an afternoon coding and considering the fidelity and “robustness” of the prototypes like those above. I think it’s pretty fast!

React具有相当陡峭的学习曲线，但是一旦掌握了它，它可能会很快变得惊人。 但是，对于许多原型来说，这简直是太过分了，对于其他工具可以做得很好的事情，我也不推荐使用。 我发现度过一个下午的编码并考虑上述原型的保真度和“健壮性”是一件很愉快的事情。 我认为这非常快！

工作流程 (Workflow)

How does the developer handoff happen after the prototypes you create are approved?

在批准您创建的原型后，如何进行开发人员移交？

We don’t have a concept of handoff here. Our workflow is agile with design and dev closely coupled. Our engineers are used to dealing with design concepts in many different formats, sometimes static mockups, detailed prototypes, or just sketches. It really depends on the work. We break down the design in planning to uncover anything that needs further exploration, and we often “pair” together to implement a design.

这里没有交接的概念。 我们的工作流程与设计和开发人员紧密耦合而敏捷。 我们的工程师习惯于处理许多不同格式的设计概念，有时包括静态模型，详细的原型或只是草图。 这真的取决于工作。 我们在计划设计中分解设计以发现任何需要进一步探索的东西，并且我们经常“配对”在一起以实施设计。

Do the devs directly use your components, or write the code from scratch, or somewhere in-between?

开发人员是否直接使用您的组件，还是从头开始或在两者之间编写代码？

No, none of my code is used in our production app. When building a prototype I don’t need to worry about maintainability, reusability, or scalability. The code is bad, basically, but it does the job I need it to do. Our frontend app is complex with Redux, tests, component APIs, etc. It’s not worth trying to use my code for that job.

不，我的代码没有在我们的生产应用程序中使用。 构建原型时，我无需担心可维护性，可重用性或可伸缩性。 基本上，代码是不好的，但是它可以完成我需要做的工作。 我们的前端应用程序非常复杂，包含Redux，测试，组件API等。不值得尝试使用我的代码来完成这项工作。

React相关工具 (React related tools)

What React related tools are you using in your design process?

您在设计过程中使用了哪些与React相关的工具？

create-react-app

创建React应用

The number one tool that helped me get off the ground with React was Facebook’s create-react-app. The startup boilerplate app that is just ready to go, pre-configured, and has lots of great features built in.

帮助我在React上起步的第一工具是Facebook的create-react-app。 该启动样板应用程序已准备就绪，可以进行预配置并内置许多强大功能。

Before that, it was difficult to find a good template project on Github to start with. I didn’t know what was good, what I needed, and what I didn’t need. Things like Webpack were a complete mystery to me, and still are. So create-react-app was so easy. It had a lot of great things built in and it’s just gotten better at the time.

在此之前，很难在Github上找到一个好的模板项目。 我不知道什么是好，我需要什么，不需要什么。 Webpack之类的东西对我来说是一个完全的谜，现在仍然如此。 因此，create-react-app非常容易。 它内置了许多很棒的东西，并且在那时变得越来越好。

The other thing that comes along with create-react-app is a quick way to share to GitHub pages. Since it’s all hosted for free, I can very easily get a URL, send it to my colleagues, and they can access it or send it to users who might be on the other side of the world.

create-react-app附带的另一件事是共享到GitHub页面的快速方法。 由于所有这些都是免费托管的，因此我可以很容易地获得一个URL，将其发送给我的同事，然后他们可以访问该URL或将其发送给可能位于世界另一端的用户。

Apart from that, I’ve installed things like Lint and a prettier in my code editor which just helps to keep things neat and easy to look for errors, and the React Chrome extension tool.

除此之外，我还在代码编辑器中安装了Lint和更漂亮的东西(这有助于使内容保持整洁并易于查找错误)和React Chrome扩展工具。

Tachyons for styling

造型的 快球

Tachyons is a different approach to CSS than what most people are used to. It’s been called functional CSS or atomic CSS. Basically it’s a library of classes that have a very specific purpose like applying one single style.

Tachyons是与大多数人习惯CSS不同的方法。 它被称为功能CSS或原子CSS。 基本上，这是一个类库，具有特定目的，例如应用一种样式。

It creates this design-as-you-go mindset. You’re more or less writing inline styles — saying “I want the font to be big, and the corners to be rounded. I want it to have a shadow and the background to be green.” You don’t have to go and give it a semantic name and then go and write a bunch of styles that match up to that element. If you’re confident with how CSS works, it just cuts down the amount of juggling that you have to do to get something styled.

它创建了随心所欲的设计心态。 您或多或少都在编写内联样式-说“我希望字体较大，并且将圆角弄圆。 我希望它有阴影，背景为绿色。” 您不必去给它一个语义名称，然后去写一堆与该元素匹配的样式。 如果您对CSS的工作方式充满信心，那么它只会减少为获得样式而必须进行的处理。

React Storybook

React故事书

We use React Storybook as a component library. It’s a shared resource between design and development. We’re continuing to improve it, but I can already see how Storybook can be a great bridge for designers and front-enders working on a React app.

我们使用React Storybook作为组件库。 它是设计和开发之间的共享资源。 我们正在继续对其进行改进，但是我已经看到Storybook如何成为设计人员和前端人员在React应用程序上工作的桥梁。

At the moment, when we’ve designed a component we want to reuse, it will be added to Storybook by an engineer. We can then refer to Storybook when designing new interfaces. We can check what components we have that are ready to use, which ones might need changing, and discover if we need to design and build something new.

目前，当我们设计了要重用的组件时，工程师会将其添加到Storybook中。 在设计新界面时，我们可以参考Storybook。 我们可以检查我们准备使用哪些组件，哪些组件可能需要更改，并发现我们是否需要设计和构建新的组件。

In the future, it would be great to have Storybook as a source-of-truth for both designers and the front-end team. We could use React-Sketchapp to have a version of each component that can be used by designers in Sketch. I haven’t had a chance to properly try React-Sketchapp. The Airbnb design team is doing some amazing work, but we’re not yet at the scale where this becomes crucial.

将来，将Storybook用作设计师和前端团队的真相，将是很棒的。 我们可以使用React-Sketchapp为每个组件提供一个版本，供设计人员在Sketch中使用。 我没有机会正确尝试React-Sketchapp。 Airbnb设计团队正在做一些出色的工作，但是我们还没有达到使之变得至关重要的规模。

作为设计师学习React (On Learning React as A Designer)

How did you learn React? Did you have any prior programming experience?

您是如何学习React的？ 您之前有编程经验吗？

I have been working in digital design for a while. I have obviously become pretty familiar with HTML and CSS. I’ve been building websites and basic things for a long time. JavaScript is something that I had often flirted with, but I had never quite jumped in the deep end. I’ve used a little bit of jQuery, but for the most part it was a mystery.

我从事数字设计已有一段时间了。 我显然已经非常熟悉HTML和CSS。 我已经建立网站和基本的东西很长时间了。 JavaScript是我经常喜欢的东西，但是我从没有深入了解过。 我使用了一些jQuery，但是在大多数情况下，这是一个谜。

We have an innovation day every two weeks. Anyone in the product and engineering team can use that time to work on a personal project that’s not usual project work. So, it’s a great opportunity to level up and broaden my skill set.

我们每两周举行一次创新日。 产品和工程团队中的任何人都可以利用这段时间来完成个人项目，而这不是通常的项目工作。 因此，这是升级和扩展我的技能的绝佳机会。

I started off doing a couple of JavaScript tutorials through Codecademy to get my head around some of the basics. And the reason I looked at React was more curiosity than anything. The engineers were using it. I had been learning about some of the core concepts, such as components and state. I went searching for a few tutorials and I’m working my way through a couple of little projects, following blog posts for the instructions. Eventually I started to figure out how it was working.

我开始通过Codecademy编写了一些JavaScript教程，以了解一些基本知识。 我看React的原因是好奇心比什么都重要。 工程师正在使用它。 我一直在学习一些核心概念，例如组件和状态。 我一直在寻找一些教程，并且按照博客中的说明进行一些小项目。 最终，我开始弄清楚它是如何工作的。

Once I had those very basic concepts done, I tried to use them to build real projects. That led me to learn more and become a bit more confident with it.

一旦完成了这些非常基本的概念，我便尝试使用它们来构建实际项目。 这使我学到更多，并对它变得更有信心。

What were the biggest struggles when you were learning React and how did you overcome them?

当您学习React时，最大的挣扎是什么？如何克服它们？

The React ecosystem is notoriously complex. It can be hard for a beginner to create a safe place to experiment without battling the build tools constantly. I spent ages trying to find the right starter project, but I didn’t really know what I was looking for. A colleague pointed me at create-react-app when it was gaining some traction, and from that point I’ve relied on it for all my React projects.

React生态系统非常复杂。 对于初学者而言，如果不不断与构建工具进行斗争，可能很难创建一个安全的实验场所。 我花了很长时间试图找到合适的入门项目，但我真的不知道自己在寻找什么。 一位同事在获得吸引力的时候将我指向了create-react-app，从那时起，我在所有React项目中都依靠它。

I think most folks will stumble over JSX from time to time, I still do if I’m switching between React and html for different projects. I haven’t found any tricks here — you just need to memorize the differences, but luckily there aren’t too many.

我认为大多数人会不时发现JSX，如果我在不同项目的React和html之间切换，我仍然会这样做。 我在这里没有找到任何花样-您只需要记住差异，但是幸运的是，并没有太多。

It took me a while to build the right mental model about how React works and fits together. And the fact I was almost a complete beginner with JavaScript didn’t help. It was as though small bits were becoming clear but there were still too many gaps to see the big picture. I remember struggling for a long time to make a child component update its parent’s state.

我花了一些时间来建立关于React如何工作和融合的正确思维模型。 而且我几乎完全是JavaScript初学者，这一事实并没有帮助。 似乎细微的东西已经变得清晰了，但是仍然有太多的空白无法看到大局。 我记得很长一段时间都在努力使子组件更新其父组件的状态。

Even now I would still consider myself a beginner — I would have to Google even basic things. But I’m better at knowing what to google to find the answers, and how the new knowledge will fit with the things I’m more familiar with.

即使是现在，我仍然会认为自己是一个初学者-我甚至必须向Google提出一些基本要求。 但是我更擅长于在Google上找到答案，以及新知识将如何与我更熟悉的事物相适应。

When learning a new technology, an important milestone is knowing what to google and what questions to ask. From that point on, learning tends to become self-reinforcing. Everything you learn in the process will build up your new foundation to learn the next concept. But to get to that point, you’d need to learn enough of the basics to get around.

在学习新技术时，一个重要的里程碑是知道要向谷歌搜索什么以及要问什么问题。 从那时起，学习趋于自我增强。 您在此过程中学习的所有内容都将为学习下一个概念奠定新的基础。 但是要达到这一点，您需要学习足够的基础知识。

It’s a lot like learning a new (human) language, you’d need to know the alphabets and build up enough vocabulary. Then, you can start looking up words in a dictionary, reading and talking to people from which you’ll learn new words and new expressions.

这就像学习一种新的(人类)语言一样，您需要了解字母并建立足够的词汇量。 然后，您可以开始在字典中查找单词，与可以与他们学习新单词和新表达的人进行阅读和交谈。

The initial effort might seem tedious but it’s a must. The good news is that you’ll know it when you get there, like Jack did. Helping you overcome the initial hurdles is also my main goal when creating the React course for designers at learnreact.design.

最初的工作可能看起来很乏味，但这是必须的。 好消息是，您到杰克时就知道了。 在learningreact.design为设计师创建React课程时，帮助我克服最初的障碍也是我的主要目标。

Any suggestions to fellow designers on learning React or learning to code in general?

在学习React或学习编码方面，对其他设计师有什么建议吗？

You can read as many tutorials as you want. You can do a class or watch a video, but unless you actually try to build something on your own, you’re not really gonna get the pieces together in your mind. So it started clicking for me when I started building things that were beyond the tutorials.

您可以阅读任意数量的教程。 您可以上课或观看视频，但除非您自己尝试自己制作一些东西，否则您将无法真正掌握所有内容。 因此，当我开始构建教程以外的内容时，它就开始为我点击。

Take what you’ve done in a tutorial or a class, add something to it. Or think of something that might have some similarities to what you’ve just been learning. If the example was a product profile on an e-commerce website, then you can try to create a user profile on a social network. You can do that in React and think about the sort of things that would need to go into that interface. Just start from scratch and build it yourself. And that’s where you realize what you know and what you don’t know.

采取您在教程或课程中所做的事情，向其中添加一些内容。 或考虑一些可能与您刚刚学到的东西相似的东西。 如果该示例是电子商务网站上的产品资料，则可以尝试在社交网络上创建用户资料。 您可以在React中做到这一点，并考虑进入该界面所需的各种事情。 只是从头开始并自己构建它。 这就是您意识到自己知道和不知道的地方的地方。

As you get better, as you learn more, you’ll also learn how to solve the problems that you’re going to encounter more easily.

随着您变得越来越好，您了解的越多，您还将学习如何解决将更容易遇到的问题。

So when you first start out, you’ll see console errors and you have no idea what they mean or how to fix them, it’s very scary and you need someone to hold your hand. But at some point, you stop being scared by an error and you think, “OK, I don’t know what this is now, but I know what to google to figure out how to fix it”. Or, “I roughly know where it is in the app that it’s happening, so I’ll go and try to debug it”.

因此，当您第一次开始时，会看到控制台错误，并且不知道它们的含义或解决方法，这非常可怕，您需要有人牵着手。 但是到了某个时候，您就不再被错误吓到了，并想：“好吧，我不知道现在是什么，但是我知道要用谷歌找出解决方法。” 或者，“我大致知道它在应用程序中的位置，因此我将尝试对其进行调试”。

You learn how to fix your errors and if you want to do something new, you learn the path that you might take to get there. I struggled, to begin with. But by building real things, I got to that point where I was more able to be self-reliant in solving my own problems and learning the next thing.

您将学习如何解决错误，并且如果您想做新的事情，那么您将学习达到此目的的路径。 首先，我奋斗了。 但是通过构建真实的事物，我到达了一个点，在这个意义上，我能够更加自力更生地解决自己的问题并学习下一件事。

最后说明(来自我，不是杰克) (Final Note (from me, not Jack))

I’m really impressed and inspired by Jack’s drive to explore and use whatever tools he has to solve design problems at hand. With this mindset, he was not afraid to enter new territories and pick up new tools along the way.

Jack的探索和使用他所需要的任何工具来解决手头的设计问题，都给我留下了深刻的印象和启发。 以这种思维方式，他不惧怕进入新领域并沿途使用新工具。

Personally, I think every designer should have this attitude towards new technologies. No matter if it’s React, blockchain, or voice-based interfaces. We should be open to experiment with them and be ready to embrace them in our design process.

我个人认为每个设计师都应该对新技术持这种态度。 无论是React，区块链还是基于语音的接口。 我们应该开放尝试它们，并准备将它们包含在我们的设计过程中。

What do you think? Let me know in the comments!

你怎么看？ 在评论中让我知道！

I’d like to thank Jack for his time chatting with me, and providing high quality answers to my endless follow-up questions (so that I could just copy and paste ?)!

我要感谢杰克花时间与我聊天，并为我无尽的后续问题提供了高质量的答案(以便我可以复制并粘贴？)！

Don’t forget to check out my React course tailored for designers: learnreact.design. ?

不要忘记查看我为设计师量身定制的React课程： learningreact.design 。 ？

翻译自: https://www.freecodecamp.org/news/harnessing-the-power-of-react-in-design-prototyping-4a74e70db5f5/

react利用xml