Documentation updates for 0.16 #864

davesnx · 2024-11-20T16:14:47Z

Rename ReactEvent to React.Event (fixes ReactEvent -> React.Event in docs #831)
Removes JSX2
Removes deprecated APIs
Changes bs.attributes to mel
Promotes "Hooks" as a toplevel on the sidebar

anmonteiro · 2024-11-24T23:01:54Z

docs/components.md

@@ -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]`](https://melange.re/v4.0.0/communicate-with-javascript#using-js-t-objects), [`[bs.deriving abstract]`](https://melange.re/v4.0.0/communicate-with-javascript#using-external-functions), or any other function that takes named args and returns a single props structure.


we may need some kind of way to centrally update the melange version that we talk about.

anmonteiro · 2024-11-24T23:03:18Z

docs/context.md

 include React.Context; // Adds the makeProps external
 let make = React.Context.provider(themeContext);
 ```

-That will give you a `ContextProvider` component you can use in your application later on. You'll do this like you'd normally would in any React application.
+```reason
+/** or inside a any other module */


Suggested change

/** or inside a any other module */

/** or inside any other module */

anmonteiro · 2024-11-24T23:04:36Z

docs/context.md

+};
+```
+
+That will give you a `ContextProvider` component you can use in your application later on, by wrapping any component with `ContextProvider`, to have access to the context value inside the component tree. To know more about Context, check the [official React documentation](https://legacy.reactjs.org/docs/context.html) and [when to use it](https://react.dev/learn/passing-data-deeply-with-context).


should we update the legacy doc to https://react.dev/reference/react/createContext?

anmonteiro · 2024-11-24T23:06:21Z

docs/dom.md


 - `renderToString` : `React.element => string`
 - `renderToStaticMarkup` : `React.element => string`
+
+More info about `ReactDOMServer` can be found in the [official React documentation](https://react.dev/reference/react-dom/server).


we should add a small section about ReactDOMServerNode, which you can get by depending on reason-react.node

anmonteiro · 2024-11-24T23:07:46Z

docs/element-type-is-invalid.md

@@ -15,13 +15,13 @@ This likely means that:
 This is a common mistake. Please see Melange's [Import an ES6 Default Value](https://melange.re/v2.0.0/communicate-with-javascript/#default-es6-values). Aka, instead of:


I saw you updated the link to point to v4 above. we should likely update the melange doc links across the entire docs to be consistent, in that case.

anmonteiro · 2024-11-24T23:17:00Z

docs/usereducer-hook.md


 ```reason
-/* we create a type for the action */
+/* we create a type for the action, but action can be anything */


Suggested change

/* we create a type for the action, but action can be anything */

/* we can create anything as the type for action, here we use a variant with 2 cases. */

anmonteiro · 2024-11-24T23:17:38Z

docs/usereducer-hook.md


-/* and do the same for state */
-type state = {count: int};
+/* similarly on 'state', it can be anything. In this case, it's an int */


Suggested change

/* similarly on 'state', it can be anything. In this case, it's an int */

/* `state` could also be anything. In this case, we want an int */

anmonteiro · 2024-11-24T23:22:37Z

docs/usestate-hook.md

 };
 ```
+
+## Using Event values with useState


this is duplicated from docs/usestate-event-value.md. are you planning to delete that page?

anmonteiro · 2024-11-24T23:26:07Z

docs/working-with-optional-data.md

@@ -2,7 +2,11 @@
 title: Working with Optional Data
 ---

-If you're coming from Javascript, optional data can be a real pain in the butt. ReasonML removes a *whole class* of `null` and `undefined` bugs which makes your code WAY safer and easier to write, but it takes some good examples to get you there :smile:
+If you're coming from JavaScript, optional data can be a real pain in the butt. ReasonML removes a *whole class* of `null` and `undefined` bugs which makes your code safer and easier to write, but it takes some good examples to get you there :smile:


Suggested change

If you're coming from JavaScript, optional data can be a real pain in the butt. ReasonML removes a *whole class* of `null` and `undefined` bugs which makes your code safer and easier to write, but it takes some good examples to get you there :smile:

If you're coming from JavaScript, optional data can be a real pain. ReasonML removes a *whole class* of `null` and `undefined` bugs which makes your code safer and easier to write, but it takes some good examples to get you there :smile:

we can use this opportunity to remove some of this language too.

anmonteiro · 2024-11-24T23:26:56Z

docs/working-with-optional-data.md

+
+ReasonML uses the `option` type to represent optional data. As defined in the standard library [here](https://reasonml.github.io/api/Option.html).
+
+Here there are a few examples of how to work with optional data in ReasonML, using the [Belt](https://melange.re/v4.0.0/api/re/melange/Belt) library from `melange.belt`.


Suggested change

Here there are a few examples of how to work with optional data in ReasonML, using the [Belt](https://melange.re/v4.0.0/api/re/melange/Belt) library from `melange.belt`.

Here are a few examples of how to work with optional data in ReasonML, using the [Belt](https://melange.re/v4.0.0/api/re/melange/Belt) library from `melange.belt`.

davesnx added 6 commits November 20, 2024 14:04

Rename ReactEvent to React.Event

d0f680a

Delete JSX2 and record API content

0734535

Rename ReactEvent to React.Event in event.md

4880dfd

Adjust docs to melange with mel.attributes

8d3bb8b

Create a new section called hooks

4f5df8a

Use React.element in clone-element

7d776d7

anmonteiro reviewed Nov 24, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Documentation updates for 0.16 #864

Documentation updates for 0.16 #864

davesnx commented Nov 20, 2024

anmonteiro Nov 24, 2024

anmonteiro Nov 24, 2024

anmonteiro Nov 24, 2024

anmonteiro Nov 24, 2024

anmonteiro Nov 24, 2024

anmonteiro Nov 24, 2024

anmonteiro Nov 24, 2024

anmonteiro Nov 24, 2024

anmonteiro Nov 24, 2024

anmonteiro Nov 24, 2024

	/** or inside a any other module */
	/** or inside any other module */

		@@ -15,13 +15,13 @@ This likely means that:
		This is a common mistake. Please see Melange's [Import an ES6 Default Value](https://melange.re/v2.0.0/communicate-with-javascript/#default-es6-values). Aka, instead of:

	/* we create a type for the action, but action can be anything */
	/* we can create anything as the type for action, here we use a variant with 2 cases. */

	/* similarly on 'state', it can be anything. In this case, it's an int */
	/* `state` could also be anything. In this case, we want an int */

	If you're coming from JavaScript, optional data can be a real pain in the butt. ReasonML removes a whole class of `null` and `undefined` bugs which makes your code safer and easier to write, but it takes some good examples to get you there :smile:
	If you're coming from JavaScript, optional data can be a real pain. ReasonML removes a whole class of `null` and `undefined` bugs which makes your code safer and easier to write, but it takes some good examples to get you there :smile:


		ReasonML uses the `option` type to represent optional data. As defined in the standard library [here](https://reasonml.github.io/api/Option.html).

		Here there are a few examples of how to work with optional data in ReasonML, using the [Belt](https://melange.re/v4.0.0/api/re/melange/Belt) library from `melange.belt`.

	Here there are a few examples of how to work with optional data in ReasonML, using the [Belt](https://melange.re/v4.0.0/api/re/melange/Belt) library from `melange.belt`.
	Here are a few examples of how to work with optional data in ReasonML, using the [Belt](https://melange.re/v4.0.0/api/re/melange/Belt) library from `melange.belt`.

Documentation updates for 0.16 #864

Are you sure you want to change the base?

Documentation updates for 0.16 #864

Conversation

davesnx commented Nov 20, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment