diff --git a/misc_docs/syntax/decorator_react_component.mdx b/misc_docs/syntax/decorator_react_component.mdx
new file mode 100644
index 000000000..51fbcbe82
--- /dev/null
+++ b/misc_docs/syntax/decorator_react_component.mdx
@@ -0,0 +1,41 @@
+---
+id: "react-component-decorator"
+keywords: ["react", "component", "decorator"]
+name: "@react.component"
+summary: "This is the `@react.component` decorator."
+category: "decorators"
+---
+
+The `@react.component` decorator is used to annotate functions that are [ReasonReact](https://reasonml.github.io/reason-react/en/) components.
+
+You will need this decorator whenever you want to use a ReScript / React component in ReScript JSX expressions.
+
+**Note:** The `@react.component` decorator requires the [react-jsx config](/docs/manual/latest/build-configuration#reason-refmt-old) to be set in your `bsconfig.json` to enable the required React transformations. 
+
+### Example
+
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```res
+@react.component
+let make = (~name) => {
+  <button> {ReasonReact.string("Hello " ++ name ++ "!")} </button>
+}
+```
+
+```js
+var React = require("react");
+
+function MyComponent(Props) {
+  var name = Props.name;
+  return React.createElement("button", undefined, "Hello " + name + "!");
+}
+
+var make = MyComponent;
+```
+
+</CodeTab>
+
+### References
+
+* [ReasonReact Components](https://reasonml.github.io/reason-react/docs/en/components)