Add Wrapping A Component For Use In JavaScript as a Reason til

README.md

@@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/).
 For a steady stream of TILs from a variety of rocketeers, checkout
 [til.hashrocket.com](https://til.hashrocket.com/).
 
-_703 TILs and counting..._
+_704 TILs and counting..._
 
 ---
 
@@ -523,6 +523,7 @@ _703 TILs and counting..._
 - [Stream A File Line By Line](reason/stream-a-file-line-by-line.md)
 - [String Interpolation With Integers And Sprintf](reason/string-interpolation-with-integers-and-sprintf.md)
 - [String Interpolation With Quoted Strings](reason/string-interpolation-with-quoted-strings.md)
+- [Wrapping A Component For Use In JavaScript](reason/wrapping-a-component-for-use-in-javascript.md)
 
 ### Ruby
 

reason/wrapping-a-component-for-use-in-javascript.md

@@ -0,0 +1,46 @@
+# Wrapping A Component For Use In JavaScript
+
+Consider the following
+[ReasonReact](https://reasonml.github.io/reason-react/en) component for
+displaying a greeting.
+
+```reason
+let component = ReasonReact.statelessComponent("Hello");
+
+let make = (~name, _children) => {
+  ...component,
+  render: _self =>
+    <p> {ReasonReact.string("Hello, ")} {ReasonReact.string(name)} </p>,
+};
+```
+
+If we will just be using this component in a ReasonML context, then that is
+all we need.
+
+If we want this component available for use in a JavaScript file, we have a
+little more work to do. We need to define the shape of the component's props
+using a bucklescript directive and then wrap the component so that it gets
+appropriate exported for a JavaScript context.
+
+Here is what that looks like.
+
+```reason
+[@bs.deriving abstract]
+type jsProps = {name: string};
+
+let default =
+  ReasonReact.wrapReasonForJs(~component, jsProps =>
+    make(~name=jsProps->nameGet, [||])
+  );
+```
+
+Our only prop is `name` which is a `string`. The `wrapReasonForJs` function
+and accompanying binding to `default` mean that we can import the compiled
+JS-equivalent like so:
+
+```javascript
+import Hello from 'src/components/Hello.bs.js';
+```
+
+See the [docs](https://reasonml.github.io/reason-react/docs/en/interop) for
+more details on Reason/JS interop.