Documentation updates for 0.16 (#864)

* Rename ReactEvent to React.Event

* Delete JSX2 and record API content

* Rename ReactEvent to React.Event in event.md

* Adjust docs to melange with mel.attributes

* Create a new section called hooks

* Use React.element in clone-element

* Update docs/context.md

Co-authored-by: Antonio Nuno Monteiro <[email protected]>

* Update docs/usereducer-hook.md

Co-authored-by: Antonio Nuno Monteiro <[email protected]>

* Update docs/working-with-optional-data.md

Co-authored-by: Antonio Nuno Monteiro <[email protected]>

* Update docs/working-with-optional-data.md

Co-authored-by: Antonio Nuno Monteiro <[email protected]>

* ReactDOM docs

* use right link for createContext

* use https://melange.re/v4.0.0

* remove duplicity for usestate and events

* make melange urls references to change easily

* remove reasonml.org links in favor of melange

* fix testing with latest API

---------

Co-authored-by: Antonio Nuno Monteiro <[email protected]>

Author: davesnx

docs/callback-handlers.md

@@ -2,17 +2,13 @@
 title: cloneElement
 ---
 
-<aside class="warning">
-The Record API is in feature-freeze. For the newest features and better support going forward, please consider migrating to the new <a href="https://reasonml.github.io/reason-react/docs/en/components">function components</a>.
-</aside>
+Signature: `let cloneElement: (React.element, ~props: Js.t({..})=?, 'anyChildrenType) => React.element`
 
-Signature: `let cloneElement: (reactElement, ~props: Js.t({..})=?, 'anyChildrenType) => reactElement`
-
-Same as ReactJS' [cloneElement](https://reactjs.org/docs/react-api.html#cloneelement). However, adding extra props to a ReasonReact component doesn't make sense; you'd use a [**render prop**](https://reactjs.org/docs/render-props.html). Therefore, `ReasonReact.cloneElement` is only used in edge-cases to convert over existing code.
+Same as ReactJS' [cloneElement](https://reactjs.org/docs/react-api.html#cloneelement). However, adding extra props to a ReasonReact component doesn't make sense; you'd use a [**render prop**](https://reactjs.org/docs/render-props.html). Therefore, `ReasonReact.cloneElement` is only used in edge-cases.
 
 ```reason
 let clonedElement =
-  ReasonReact.cloneElement(
+  React.cloneElement(
     <div className="foo" />,
     ~props={"payload": 1},
     [||]

docs/children.md

@@ -2,7 +2,7 @@
 title: Components
 ---
 
-ReasonReact uses functions and [React Hooks](https://reactjs.org/docs/hooks-intro.html) to compose the component of your application. Let's look at how a component is written and then break down some of the things happening.
+ReasonReact uses functions and [React Hooks](https://reactjs.org/docs/hooks-intro.html) to compose your components of your application. Let's look at how a component is written and then break down some of the things happening.
 
 ```reason
 [@react.component]
@@ -20,10 +20,10 @@ let make = (~name) => {
 
 ## [@react.component]
 
-This snippet is doing quite a bit! The first thing you might notice is the decorator attribute above the definition. `[@react.component]` tells ReasonReact that you're writing a component with named args syntax (`~name`), but that you would like to compile it into a function that takes a JS object as props which is how React works. Concretely, this attribute will generate code for you that looks like this:
+This snippet is doing quite a bit! The first thing you might notice is the decorator attribute above the definition. `[@react.component]` tells ReasonReact that you're writing a component with named args syntax (`~name`), but that you would like to compile it into a function that takes a JavaScript object as props which is how React works. Concretely, this attribute will generate code for you that looks like this:
 
 ```reason
-[@bs.obj]
+[@mel.obj]
 external makeProps: (~name: 'name, ~key: string=?, unit) => {. "name": 'name} = "";
 
 let make = (Props) => {
@@ -39,7 +39,7 @@ let make = (Props) => {
 };
 ```
 
-It has added a new function called  `makeProps` which uses [`[@bs.obj]`](https://melange.re/v2.0.0/communicate-with-javascript/#using-jst-objects) to create your props object. This function gets compiled away by Melange and will be replaced by object literals when used.
+It has added a new function called `makeProps` which uses [mel-obj] to create your props object. This function gets compiled away by Melange and will be replaced by object literals when used.
 
 ### A note on `children`
 
@@ -113,7 +113,7 @@ Reason also always opts for the safest form of a given hook as well. So `React.u
 
 ## Hand-writing components
 
-You don't need to use the `[@react.component]` declaration to write components. Instead you can write a pair of `foo` and `fooProps` functions such that `type fooProps: 'a => props and foo: props => React.element` and these will always work as React components! This works with your own version of [`[@bs.obj]`](https://melange.re/v2.0.0/communicate-with-javascript/#using-jst-objects), [`[bs.deriving abstract]`](https://melange.re/v2.0.0/communicate-with-javascript/#convert-records-into-abstract-types), or any other function that takes named args and returns a single props structure.
+You don't need to use the `[@react.component]` declaration to write components. Instead you can write a pair of `foo` and `fooProps` functions such that `type fooProps: 'a => props and foo: props => React.element` and these will always work as React components! This works with your own version of [`[@mel.obj]`][mel-obj], or any other function that takes labelled arguments and returns a single prop object.
 
 ## Interop
 
@@ -122,33 +122,31 @@ You don't need to use the `[@react.component]` declaration to write components.
 The make function above is a normal React component, you can use it today with code like:
 
 ```js
-const MyComponent = require('./path/to/Component.bs.js').make;
+const MyComponent = require('./path/to/Component.js').make;
 
 <MyComponent name="Regina" />
 ```
 
 ### Import from JS
 
-It also works seamlessly with [`[@genType]`](https://github.com/cristianoc/genType) annotations and can be integrated with safety into TypeScript and Flow applications.
-
-Using a component written in JS requires a single external to annotate the types it takes.
+Using a component written in JavaScript requires a single `external` to annotate the types it takes.
 
 ```reason
-[@bs.module "./path/to/Component.js"][@react.component]
+[@mel.module "./path/to/Component.js"] [@react.component]
 external make: (~name: string) => React.element = "default";
 ```
 
 This `[@react.component]` annotation will, again, generate both `make` and `makeProps` functions for you with the correct types. Here's an example of what this desugars to without `[@react.component]`:
 
 ```reason
-[@bs.obj]
+[@mel.obj]
 external makeProps: (~name: 'name, ~key: string=?, unit) => {. "name": 'name} = "";
 
-[@bs.module "./path/to/Component.js"]
+[@mel.module "./path/to/Component.js"]
 external make: ({. "name": string}) => React.element = "default";
 ```
 
-**Note on `default`:** to understand what `default` means, see [the Melange docs on ES6](https://melange.re/v2.0.0/communicate-with-javascript/#default-es6-values).
+**Note on `default`:** to understand what `default` means, see [the Melange docs on ES6][default-es6-values].
 
 ## Component Naming
 
@@ -173,3 +171,6 @@ module Nested = {
 ```
 
 If you need a dynamic name for higher-order components or you would like to set your own name you can use `React.setDisplayName(make, "NameThatShouldBeInDevTools");`.
+
+[mel-obj]: https://melange.re/v4.0.0/communicate-with-javascript#using-js-t-objects
+[default-es6-values]: https://melange.re/v4.0.0/communicate-with-javascript#default-es6-values