编写react组件

Are you using React to build user interfaces? Well, I am too. And now, you’ll learn why you should write your React applications using ReasonML.

您是否正在使用React构建用户界面？ 好吧，我也是。 现在，您将了解为什么要使用ReasonML编写React应用程序的原因 。

React is a pretty cool way to write user interfaces. But, could we make it even cooler? Better?

React是编写用户界面的一种很酷的方法。 但是，我们可以使其更凉吗？ 更好？

To make it better, we need to identify its problems first. So, what is the main problem of React as a JavaScript library?

为了使其更好，我们需要首先确定其问题。 那么，React作为JavaScript库的主要问题是什么？

React最初不是为JavaScript开发的 (React wasn’t initially developed for JavaScript)

If you take a closer look at React, you’ll see that some of its main principles are foreign to JavaScript. Let’s talk about immutability, functional programming principles, and type system in particular.

如果仔细研究React，您会发现它的一些主要原理对于JavaScript来说是陌生的。 让我们讨论不变性，函数式编程原理，尤其是类型系统。

Immutability is one of the core principles of React. You don’t want to mutate your props or your state because if you do, you might experience unpredictable consequences. In JavaScript, we don’t have immutability out of the box. We are keeping our data structures immutable by a convention, or we use libraries such as immutableJS to achieve it.

不变性是React的核心原则之一。 您不想改变道具或状态，因为如果这样做，您可能会遇到不可预测的后果。 在JavaScript中，我们没有开箱即用的不变性。 我们通过约定将数据结构保持不变，或者使用诸如immutableJS之类的库来实现它。

React is based on the principles of functional programming since its applications are compositions of functions. Although JavaScript has some of these features, such as first-class functions, it’s not a functional programming language. When we want to write some nice declarative code, we need to use external libraries like Lodash/fp or Ramda.

由于React的应用是功能的组合，因此它基于函数式编程的原理。 尽管JavaScript具有其中的一些功能，例如一流的功能，但它不是功能编程语言。 当我们想要写一些很不错的声明代码，我们需要使用外部库像Lodash / FP或Ramda 。

So, what’s up with the type system? In React, we had PropTypes. We’ve used them to mimic the types in JavaScript since it isn’t a statically typed language itself. To take advantage of advanced static typing, we again need to use external dependencies, such as Flow and TypeScript.

那么，类型系统是怎么回事？ 在React中，我们有PropTypes 。 我们已经使用它们来模仿JavaScript中的类型，因为它本身不是静态类型的语言。 要利用高级静态类型，我们再次需要使用外部依赖项，例如Flow和TypeScript 。

As you can see, JavaScript isn’t compatible with React’s core principles.

如您所见， JavaScript与React的核心原理不兼容。

Is there another programming language that would be more compatible with React than JavaScript?

有没有比JavaScript更兼容React的编程语言？

Fortunately, we have ReasonML.

幸运的是，我们有ReasonML 。

In Reason, we get immutability out of the box. Since it’s based on OCaml, the functional programming language, we have such features built into the language itself as well. Reason also provides us with a strong type system on its own.

在理性中，我们开箱即用。 由于它基于功能性编程语言OCaml ，因此我们在语言本身中也内置了这些功能。 理性也为我们提供了一个强大的类型系统。

Reason is compatible with React’s core principles.

原因符合React的核心原则。

原因 (Reason)

It isn’t a new language. It’s an alternative JavaScript-like syntax and toolchain for OCaml, a functional programming language that’s been around for more than 20 years. Reason was created by Facebook developers who already used OCaml in their projects (Flow, Infer).

这不是一种新语言。 它是OCaml的替代类JavaScript语法和工具链，OCaml是一种已有20多年历史的功能性编程语言。 原因是由Facebook开发人员创建的，他们已经在其项目中使用了OCaml( Flow， Infer )。

Reason, with its C-like syntax, makes OCaml approachable for people coming from mainstream languages such as JavaScript or Java. It provides you with better documentation (compared to OCaml) and a growing community around it. Plus, it makes it easier to integrate with your existing JavaScript codebase.

原因，凭借其类似C的语法，使得OCaml对于来自诸如JavaScript或Java之类的主流语言的人们来说更加易于使用。 它为您提供了更好的文档(与OCaml相比)以及围绕它的不断发展的社区 。 另外，它使与现有JavaScript代码库的集成更加容易。

OCaml serves as a backing language for Reason. Reason has the same semantics as OCaml — only the syntax is different. This means that you can write OCaml using Reason’s JavaScript-like syntax. As a result, you can take advantage of OCaml’s awesome features, such as its strong type system and pattern matching.

OCaml作为Reason的支持语言。 原因与OCaml具有相同的语义-仅语法不同。 这意味着您可以使用Reason的类似JavaScript的语法编写OCaml。 因此，您可以利用OCaml的强大功能，例如强大的字体系统和模式匹配。

Let’s take a look at an example of Reason’s syntax.

让我们看一下Reason语法的示例。

let fizzbuzz = (i) =>switch (i mod 3, i mod 5) {| (0, 0) => "FizzBuzz"| (0, _) => "Fizz"| (_, 0) => "Buzz"| _ => string_of_int(i)};
for (i in 1 to 100) {Js.log(fizzbuzz(i))
};

Although we’re using pattern matching in this example, it’s still pretty similar to JavaScript, right?

尽管在此示例中我们使用模式匹配，但是它仍然与JavaScript非常相似，对吧？

However, the only usable language for browsers is still JavaScript, meaning we need to compile to it.

但是，浏览器唯一可用的语言仍然是JavaScript，这意味着我们需要对其进行编译。

BuckleScript (BuckleScript)

One of Reason’s powerful features is BuckleScript compiler, which takes your Reason code, and compiles it to readable and performant JavaScript with great dead code elimination. You’ll appreciate the readability if you’re working on a team where not everyone is familiar with Reason, since they’ll still be able to read the compiled JavaScript code.

Reason的强大功能之一是BuckleScript编译器 ，它可以将您的Reason代码，并通过消除死代码的方式将其编译为可读性强JavaScript。 如果您在一个不是每个人都熟悉Reason的团队中工作，您将赞赏其可读性，因为他们仍然能够读取已编译JavaScript代码。

The similarity with JavaScript is so close that some of Reason’s code doesn’t need to be changed by the compiler at all. So, you can enjoy the benefits of the statically typed language with no change to the code whatsoever.

与JavaScript的相似性如此之高，以至于编译器根本不需要更改Reason的某些代码。 因此，您无需更改任何代码即可享受静态类型语言的好处。

let add = (a, b) => a + b;add(6, 9);

This is valid code in both Reason and JavaScript.

这在Reason和JavaScript中都是有效的代码。

BuckleScript is shipped with four libraries: the standard library called Belt (OCaml standard library is insufficient), and bindings to JavaScript, Node.js and, DOM APIs.

BuckleScript附带有四个库：称为Belt的标准库( OCaml标准库不足 )，以及与JavaScript，Node.js和DOM API的绑定。

Since BuckleScript is based on OCaml compiler, you’ll get a blazingly fast compilation that is much faster than Babel and several times faster than TypeScript.

由于BuckleScript基于OCaml编译器，因此您将获得比Babel快得多且比TypeScript快几倍的快速编译 。

Let’s compile our FizzBuzz algorithm written in Reason to JavaScript.

让我们将用Reason编写的FizzBu​​zz算法编译为JavaScript。

As you can see, the resulting JavaScript code is pretty readable. It seems like it was written by a JavaScript developer.

如您所见，生成JavaScript代码可读性强。 似乎它是由JavaScript开发人员编写的。

Not only does Reason compile to JavaScript, but to native and bytecode as well. So, you can write a single application using Reason syntax and be able to run it in the browser on MacOS, Android, and iOS phones. There’s a game called Gravitron by Jared Forsyth which is written in Reason and it can be run on all the platforms I’ve just mentioned.

Reason不仅可以编译为JavaScript，还可以编译为本地代码和字节码。 因此，您可以使用Reason语法编写单个应用程序，并能够在MacOS，Android和iOS手机的浏览器中运行它。 Jared Forsyth编写了一款名为Gravitron的游戏，该游戏是使用Reason编写的，并且可以在我刚刚提到的所有平台上运行。

JavaScript互操作 (JavaScript interop)

BuckleScript also provides us with JavaScript interoperability. Not only can you paste your working JavaScript code in your Reason codebase, but your Reason code can also interact with that JavaScript one. This means you can easily integrate Reason code into your existing JavaScript codebase. Moreover, you can use all the JavaScript packages from the NPM ecosystem in your Reason code. For example, you can combine Flow, TypeScript, and Reason together in a single project.

BuckleScript还为我们提供了JavaScript 互操作性 。 您不仅可以将工作JavaScript代码粘贴到Reason代码库中，而且您的Reason代码还可以与该JavaScript代码进行交互。 这意味着您可以轻松地将Reason代码集成到您现有JavaScript代码库中。 此外，您可以在原因代码中使用NPM生态系统中的所有JavaScript软件包。 例如，您可以在一个项目中将Flow，TypeScript和Reason组合在一起。

However, it’s not that simple. To use JavaScript libraries or code in Reason, you need to port it to Reason first via Reason bindings. In other words, you need types for your untyped JavaScript code to be able to take an advantage of Reason’ s strong type system.

但是，这并不是那么简单。 要在Reason中使用JavaScript库或代码，您需要先通过Reason绑定将其移植到Reason。 换句话说，您需要无类型JavaScript代码的类型，以便能够利用Reason强大的类型系统。

Whenever you need to use a JavaScript library in your Reason code, check if the library was already ported to Reason by browsing the Reason Package Index (Redex) database. It’s a website that aggregates different libraries and tools written in Reason and JavaScript libraries with Reason bindings. If you found your library there, you can just install it as a dependency and use it in your Reason application.

每当您需要在原因代码中使用JavaScript库时，请通过浏览原因包索引( Redex )数据库来检查该库是否已移植到Reason。 这是一个网站，该网站汇聚了使用Reason绑定的用Reason和JavaScript库编写的不同库和工具。 如果您在此处找到您的库，则可以将其作为依赖项安装并在您的Reason应用程序中使用它。

However, if you didn’t find your library, you’ll need to write Reason bindings yourself. If you’re just starting with Reason, keep in mind that writing bindings aren’t a thing you want to start with, since it’s one of the more challenging things in Reason’s ecosystem.

但是，如果找不到您的库，则需要自己编写Reason绑定。 如果您只是从Reason入手，请记住，编写绑定并不是您想开始的事情，因为这是Reason生态系统中更具挑战性的事情之一。

Fortunately, I’m just writing a post about writing Reason bindings, so stay tuned!

幸运的是，我只是写一篇有关编写Reason绑定的文章，敬请期待！

When you need some functionality from a JavaScript library, you don’t need to write the Reason bindings for a library as a whole. You can do that only for the functions or components you need to use.

当需要JavaScript库中的某些功能时，无需为整个库编写Reason绑定。 您只能对需要使用的功能或组件执行此操作。

原因React (ReasonReact)

This article is about writing React in Reason, which you can do thanks to the ReasonReact library.

本文是关于在Rational中编写React的，您可以通过ReasonReact库来完成 。

Maybe you’re now thinking “I still don’t know why I should use React in Reason.”

也许您现在在想：“我仍然不知道为什么我应该在理性中使用React。”

We’ve already mentioned the main reason to do so — Reason is more compatible with React than JavaScript. Why is it more compatible? Because React was developed for Reason, or more precisely, for OCaml.

我们已经提到了这样做的主要原因–原因与JavaScript相比，React与React更兼容。 为什么它更兼容？ 因为React是为Reason开发的，或更准确地说，是为OCaml开发的。

理性之路 (Road to ReasonReact)

React’s first prototype was developed by Facebook and was written in Standard Meta Language (StandardML), a cousin of OCaml. Then, it was moved to OCaml. React was also transcribed to JavaScript.

React的第一个原型是由Facebook开发的，并使用OCaml的表亲Standard Meta Language( StandardML )编写。 然后，将其移至OCaml。 React也被转录为JavaScript。

This was because the whole web was using JavaScript, and it wasn’t probably smart to say, “Now we’ll build UI in OCaml.” And it worked — React in JavaScript has been widely adopted.

这是因为整个网络都在使用JavaScript，并且说“现在我们将在OCaml中构建UI”可能并不明智。 而且有效-JavaScript中的React已被广泛采用。

So, we became used to React as a JavaScript library. React together with other libraries and languages — Elm, Redux, Recompose, Ramda, and PureScript — made functional programming in JavaScript popular. And with the rise of Flow and TypeScript, static typing became popular as well. As a result, the functional programming paradigm with static types became mainstream in the world of the front-end.

因此，我们习惯了将React用作JavaScript库。 React与Elm ， Redux ， Recompose ， Ramda和PureScript等其他库和语言一起使JavaScript中的函数式编程流行。 随着Flow和TypeScript的兴起，静态类型也变得很流行。 结果，具有静态类型的函数式编程范例成为前端世界的主流。

In 2016, Bloomberg developed and open-sourced BuckleScript, the compiler that transforms OCaml to JavaScript. This enabled them to write safe code on the front-end using OCaml’s strong type system. They took the optimized and blazingly fast OCaml compiler and swapped its back-end generating native code for a JavaScript generating one.

2016年， 彭博社开发并开源了BuckleScript，该编译器将OCaml转换为JavaScript。 这使他们能够使用OCaml的强类型系统在前端编写安全代码。 他们采用了经过优化且速度非常快的OCaml编译器，并将其后端生成的本机代码替换为JavaScript生成的本机代码。

The popularity of functional programming together with the release of the BuckleScript generated the ideal climate for Facebook to get back to the original idea of React, which was initially written in an ML language.

函数式编程的普及以及BuckleScript的发布为Facebook回到最初使用ML语言编写的React最初思想提供了理想的环境。

They took OCaml semantics and JavaScript syntax, and created Reason. They also created the Reason wrapper around React — ReasonReact library — with additional functionalities such as the encapsulation of the Redux principles in stateful components. By doing so, they returned React to its original roots.

他们采用OCaml语义和JavaScript语法，并创建了Reason。 他们还围绕React(ReasonReact库)创建了Reason包装器，并具有其他功能，例如将Redux原则封装在有状态组件中。 通过这样做，他们使React返回其原始根目录 。

理性React的力量 (The power of React in Reason)

When React came into JavaScript, we adjusted JavaScript to React’s needs by introducing various libraries and tools. This also meant more dependencies for our projects. Not to mention that these libraries are still under development and breaking changes are introduced regularly. So you need to maintain these dependencies with care in your projects.

当React进入JavaScript时，我们通过引入各种库和工具使JavaScript适应了React的需求。 这也意味着对我们项目的更多依赖。 更不用说这些库仍在开发中，并且定期引入重大更改。 因此，您需要在项目中谨慎维护这些依赖性。

This added another layer of complexity to JavaScript development.

这为JavaScript开发增加了另一层复杂性。

Your typical React application will have at least these dependencies:

典型的React应用程序将至少具有以下依赖关系：

• static typing — Flow/TypeScript静态类型— Flow / TypeScript
• immutability — immutableJS不变性-immutableJS
• routing — ReactRouter路由— ReactRouter
• formatting — Prettier格式化—更漂亮
• linting — ESLint棉绒— ESLint
• helper function — Ramda/Lodash辅助功能-Ramda / Lodash

Let’s now swap JavaScript React for ReasonReact.

现在让我们将JavaScript React换成ReasonReact。

Do we still need all these dependencies?

我们还需要所有这些依赖吗？

• static typing — built-in

  静态输入- 内置

• immutability — built-in

  不变性- 内置

• routing — built-in

  路由- 内置

• formatting — built-in

  格式化- 内置

• linting — built-in

  棉绒— 内置

• helper functions — built-in

  辅助功能- 内置

You can learn more about these built-in features in my other post.

您可以在我的其他文章中了解有关这些内置功能的更多信息。

In the ReasonReact application, you don’t need these and many other dependencies since many crucial features that make your development easier are already included in the language itself. So, maintaining your packages will become easier and you don’t have an increase in complexity over time.

在ReasonReact应用程序中，您不需要这些以及许多其他依赖项，因为语言本身已经包含了许多使您的开发更加容易的关键功能。 因此，维护软件包将变得更加容易，并且随着时间的推移，您的复杂性也不会增加。

This is thanks to the OCaml, which is more than 20 years old. It’s a matured language with all of its core principles in place and stable.

这要感谢拥有20多年历史的OCaml。 这是一种成熟的语言，其所有核心原则均已到位且稳定。

结语 (Wrap-up)

At the beginning, the creators of Reason had two options. To take JavaScript and somehow make it better. By doing that they’d also need to deal with its historical burdens.

最初，Reason的创建者有两种选择。 使用JavaScript并以某种方式使其变得更好。 通过这样做，他们还需要处理其历史负担。

However, they went a different path. They took OCaml as a matured language with great performance and modified it so it resembles JavaScript.

但是，他们走了一条不同的道路。 他们将OCaml作为具有出色性能的成熟语言进行了修改，使其类似于JavaScript。

React is also based on the principles of OCaml. That’s why you’ll get a much better developer experience when you’re using it with Reason. React in Reason represents a safer way of building React components, since the strong type system has got your back and you don’t need to deal with most of the JavaScript (legacy) issues.

React也基于OCaml的原理。 这就是为什么将它与Reason一起使用时会获得更好的开发人员体验的原因。 React in Reason是构建React组件的一种更安全的方式，因为强大的类型系统已为您提供了支持，并且您无需处理大多数JavaScript(旧版)问题。

下一步是什么？ (What’s next?)

If you’re coming from the world of JavaScript, it’ll be easier for you to get started with Reason, due to its syntax similarity with JavaScript. If you’ve been programming in React, it’ll be even easier for you since you can use all your React knowledge as ReasonReact has the same mental model as React and very similar workflow. This means you don’t need to start from scratch. You’ll learn Reason as you develop.

如果您来自JavaScript世界，则由于它与JavaScript的语法相似，因此您更容易上手Reason。 如果您曾经在React中进行编程，那您会更加轻松，因为您可以使用所有React知识，因为ReasonReact具有与React相同的思维模型，并且工作流程非常相似。 这意味着您无需从头开始。 随着发展，您将学习理性。

The best way to start using Reason in your projects is to do it incrementally. I’ve already mentioned that you can take Reason code and use it in JavaScript, and the other way around. You can do the same thing with ReasonReact. You take your ReasonReact component and use it in your React JavaScript application, and vice versa.

在项目中开始使用Reason的最佳方法是逐步进行。 我已经提到过，您可以采用Reason代码并在JavaScript中使用它，反之亦然。 您可以使用ReasonReact执行相同的操作。 您将使用ReasonReact组件并将其在React JavaScript应用程序中使用，反之亦然。

This incremental approach has been chosen by Facebook developers who are using Reason extensively in the development of the Facebook Messenger app.

Facebook开发人员已在Facebook Messenger Messenger应用程序的开发中广泛使用了Reason，因此选择了这种渐进方法。

If you want to build an application using React in Reason and learn the basics of Reason in a practical way, check my other article where we’ll build a Tic Tac Toe game together.

如果您想使用React in Reason构建应用程序并以实用的方式学习Reason的基础知识，请查看我的另一篇文章， 我们将一起构建Tic Tac Toe游戏。

If you have any questions, criticism, observations, or tips for improvement, feel free to write a comment below or reach me via Twitter or my blog.

如果您有任何疑问，批评，意见或改进技巧，请随时在下面写评论，或通过Twitter或我的博客与我联系 。

翻译自: https://www.freecodecamp.org/news/psst-heres-why-reasonreact-is-the-best-way-to-write-react-5088d434d035/

编写react组件