From 5d392ab82c76087636bb8aa7a264c8fa9d706b8b Mon Sep 17 00:00:00 2001 From: Arati Chilad <58401542+arati-1@users.noreply.github.com> Date: Mon, 26 Sep 2022 11:44:44 -0700 Subject: [PATCH 1/6] Added documentation for React.createFactory --- beta/src/content/apis/react/createFactory.md | 70 ++++++++++++++++++-- beta/src/sidebarReference.json | 3 +- 2 files changed, 64 insertions(+), 9 deletions(-) diff --git a/beta/src/content/apis/react/createFactory.md b/beta/src/content/apis/react/createFactory.md index 834d6b3b0a5..ea6034ff389 100644 --- a/beta/src/content/apis/react/createFactory.md +++ b/beta/src/content/apis/react/createFactory.md @@ -2,19 +2,75 @@ title: createFactory --- - - -This section is incomplete, please see the old docs for [createFactory.](https://reactjs.org/docs/react-api.html#createfactory) - - + +`createFactory` lets you create a function that creates React element of a given `type`. The `type` argument can be either a tag name string (such as `div` or `span`), a React component type (a class or a function), or a React fragment type. - +You may typically invoke createFactory, if you are using [React without JSX.](https://beta.reactjs.org/learn/add-react-to-a-website#run-the-jsx-preprocessor) ```js React.createFactory(type) ``` - + + +`createFactory` is considered legacy, and we encourage you to either use **JSX** or use `React.createElement()` directly instead. + + + +## Usage {/*usage*/} + +### Creating React elements {/*creating-react-elements*/} + +In this example, we can render a React element of the `type` `button`. + + + +``` js App.js +import React from 'react'; +import { render } from 'react-dom'; + +const MyButton = (reactElement = 'button') => + (React.createFactory(reactElement))({ + onClick: (evt) => { + evt.preventDefault(); + alert("I was created by createFactory()"); + } + }, 'Click'); + +export default function App(){ + return ( +
+ {MyButton()} +
+ ) +}; +``` +``` js index.js + +import {render} from 'react-dom'; +import App from './App.js'; + +render(, document.getElementById('root')); + +``` + + +### `createFactory(type)` {/*createFactory*/} + +Call `createFactory(type)` to create a function that creates React element of a given `type`. + +```js +const myElement= React.createFactory(type) + +``` + +#### Parameters {/*parameters*/} + +* `type`: The `type` argument can be either a tag name string (such as `div` or `span`), a React component type (a class or a function), or a React fragment type. + +#### Returns {/*returns*/} + + Returns a function that can be used to create React element of the given `type`. diff --git a/beta/src/sidebarReference.json b/beta/src/sidebarReference.json index 40132eebd32..1ff72d4ffa7 100644 --- a/beta/src/sidebarReference.json +++ b/beta/src/sidebarReference.json @@ -37,8 +37,7 @@ }, { "title": "createFactory", - "path": "/apis/react/createFactory", - "wip": true + "path": "/apis/react/createFactory" }, { "title": "createRef", From 846ba31302505b514e7155aa0fc0cbe86149b061 Mon Sep 17 00:00:00 2001 From: Arati Chilad <58401542+arati-1@users.noreply.github.com> Date: Tue, 27 Sep 2022 08:32:08 -0700 Subject: [PATCH 2/6] Update beta/src/content/apis/react/createFactory.md Co-authored-by: Strek --- beta/src/content/apis/react/createFactory.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/beta/src/content/apis/react/createFactory.md b/beta/src/content/apis/react/createFactory.md index ea6034ff389..a64e6094c44 100644 --- a/beta/src/content/apis/react/createFactory.md +++ b/beta/src/content/apis/react/createFactory.md @@ -6,7 +6,7 @@ title: createFactory `createFactory` lets you create a function that creates React element of a given `type`. The `type` argument can be either a tag name string (such as `div` or `span`), a React component type (a class or a function), or a React fragment type. -You may typically invoke createFactory, if you are using [React without JSX.](https://beta.reactjs.org/learn/add-react-to-a-website#run-the-jsx-preprocessor) +You may typically invoke createFactory, if you are using [React without JSX].(https://beta.reactjs.org/learn/add-react-to-a-website#run-the-jsx-preprocessor) ```js React.createFactory(type) From 4f1a896babe411f50278ca685da2cb2a02d2d59e Mon Sep 17 00:00:00 2001 From: Holly Sweeney <77758406+holly1238@users.noreply.github.com> Date: Fri, 30 Sep 2022 10:34:21 -0700 Subject: [PATCH 3/6] minor editorial updates (#2) --- beta/src/content/apis/react/createFactory.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/beta/src/content/apis/react/createFactory.md b/beta/src/content/apis/react/createFactory.md index a64e6094c44..114a1e204d5 100644 --- a/beta/src/content/apis/react/createFactory.md +++ b/beta/src/content/apis/react/createFactory.md @@ -4,9 +4,9 @@ title: createFactory -`createFactory` lets you create a function that creates React element of a given `type`. The `type` argument can be either a tag name string (such as `div` or `span`), a React component type (a class or a function), or a React fragment type. +`createFactory` lets you create a function that creates a React element of a given `type`. The `type` argument can be either a tag name string (such as `div` or `span`), a React component type (a class or a function), or a React fragment type. -You may typically invoke createFactory, if you are using [React without JSX].(https://beta.reactjs.org/learn/add-react-to-a-website#run-the-jsx-preprocessor) +`createFactory` is typically invoked if you are using [React without JSX.](https://beta.reactjs.org/learn/add-react-to-a-website#run-the-jsx-preprocessor) ```js React.createFactory(type) @@ -60,7 +60,7 @@ render(, document.getElementById('root')); ### `createFactory(type)` {/*createFactory*/} -Call `createFactory(type)` to create a function that creates React element of a given `type`. +Call `createFactory(type)` to create a function that creates a React element of a given `type`. ```js const myElement= React.createFactory(type) @@ -73,4 +73,4 @@ const myElement= React.createFactory(type) #### Returns {/*returns*/} - Returns a function that can be used to create React element of the given `type`. + Returns a function that can be used to create a React element of the given `type`. From 97555b1e839a28868f04a150e3ee134b9dd7f861 Mon Sep 17 00:00:00 2001 From: Arati Chilad <58401542+arati-1@users.noreply.github.com> Date: Mon, 3 Oct 2022 10:32:12 -0700 Subject: [PATCH 4/6] Update createFactory.md --- beta/src/content/apis/react/createFactory.md | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/beta/src/content/apis/react/createFactory.md b/beta/src/content/apis/react/createFactory.md index 114a1e204d5..74e75c9a0a9 100644 --- a/beta/src/content/apis/react/createFactory.md +++ b/beta/src/content/apis/react/createFactory.md @@ -32,8 +32,8 @@ In this example, we can render a React element of the `type` `button`. import React from 'react'; import { render } from 'react-dom'; -const MyButton = (reactElement = 'button') => - (React.createFactory(reactElement))({ +const MyButton = () => + (React.createFactory("button"))({ onClick: (evt) => { evt.preventDefault(); alert("I was created by createFactory()"); @@ -50,15 +50,16 @@ export default function App(){ ``` ``` js index.js -import {render} from 'react-dom'; +import {createRoot} from 'react-dom/client'; import App from './App.js'; -render(, document.getElementById('root')); +const root = createRoot(document.getElementById('root')); +root.render(); ``` -### `createFactory(type)` {/*createFactory*/} +### `createFactory(type)` {/*createfactory*/} Call `createFactory(type)` to create a function that creates a React element of a given `type`. From 1747c756271721e52f9f7c92402b4a367f97aaab Mon Sep 17 00:00:00 2001 From: Arati Chilad <58401542+arati-1@users.noreply.github.com> Date: Mon, 3 Oct 2022 10:34:11 -0700 Subject: [PATCH 5/6] Update createFactory.md --- beta/src/content/apis/react/createFactory.md | 1 - 1 file changed, 1 deletion(-) diff --git a/beta/src/content/apis/react/createFactory.md b/beta/src/content/apis/react/createFactory.md index 74e75c9a0a9..6230c7d4bc1 100644 --- a/beta/src/content/apis/react/createFactory.md +++ b/beta/src/content/apis/react/createFactory.md @@ -30,7 +30,6 @@ In this example, we can render a React element of the `type` `button`. ``` js App.js import React from 'react'; -import { render } from 'react-dom'; const MyButton = () => (React.createFactory("button"))({ From dc427990dcc40a7455df23d03c05242a86d4dda0 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 4 Oct 2022 05:06:50 +0100 Subject: [PATCH 6/6] edits --- beta/src/components/MDX/ExpandableCallout.tsx | 11 +- beta/src/components/MDX/MDXComponents.tsx | 4 + beta/src/content/apis/react/createFactory.md | 136 +++++++++++++----- 3 files changed, 116 insertions(+), 35 deletions(-) diff --git a/beta/src/components/MDX/ExpandableCallout.tsx b/beta/src/components/MDX/ExpandableCallout.tsx index 216f454279d..e388a6bedef 100644 --- a/beta/src/components/MDX/ExpandableCallout.tsx +++ b/beta/src/components/MDX/ExpandableCallout.tsx @@ -6,9 +6,10 @@ import {useRef} from 'react'; import * as React from 'react'; import cn from 'classnames'; import {IconNote} from '../Icon/IconNote'; +import {IconWarning} from '../Icon/IconWarning'; import {IconGotcha} from '../Icon/IconGotcha'; -type CalloutVariants = 'gotcha' | 'note' | 'wip'; +type CalloutVariants = 'deprecated' | 'gotcha' | 'note' | 'wip'; interface ExpandableCalloutProps { children: React.ReactNode; @@ -16,6 +17,14 @@ interface ExpandableCalloutProps { } const variantMap = { + deprecated: { + title: 'Deprecated', + Icon: IconWarning, + containerClasses: 'bg-red-5 dark:bg-red-60 dark:bg-opacity-20', + textColor: 'text-red-50 dark:text-red-40', + overlayGradient: + 'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)', + }, note: { title: 'Note', Icon: IconNote, diff --git a/beta/src/components/MDX/MDXComponents.tsx b/beta/src/components/MDX/MDXComponents.tsx index 8280670b682..dc6086ab5fd 100644 --- a/beta/src/components/MDX/MDXComponents.tsx +++ b/beta/src/components/MDX/MDXComponents.tsx @@ -79,6 +79,9 @@ const Wip = ({children}: {children: React.ReactNode}) => ( const Gotcha = ({children}: {children: React.ReactNode}) => ( {children} ); +const Deprecated = ({children}: {children: React.ReactNode}) => ( + {children} +); const Note = ({children}: {children: React.ReactNode}) => ( {children} ); @@ -369,6 +372,7 @@ export const MDXComponents = { return
{children}
; }, Gotcha, + Deprecated, Wip, HomepageHero, Illustration, diff --git a/beta/src/content/apis/react/createFactory.md b/beta/src/content/apis/react/createFactory.md index 6230c7d4bc1..156e055f762 100644 --- a/beta/src/content/apis/react/createFactory.md +++ b/beta/src/content/apis/react/createFactory.md @@ -2,75 +2,143 @@ title: createFactory --- - + + +This API will be removed in a future major version of React. Use [JSX](/learn/writing-markup-with-jsx) or [`createElement`](/api/react/createElement) instead. + + -`createFactory` lets you create a function that creates a React element of a given `type`. The `type` argument can be either a tag name string (such as `div` or `span`), a React component type (a class or a function), or a React fragment type. + -`createFactory` is typically invoked if you are using [React without JSX.](https://beta.reactjs.org/learn/add-react-to-a-website#run-the-jsx-preprocessor) +`createFactory` lets you create a function that produces React elements of a given type. ```js -React.createFactory(type) +const factory = createFactory(type) ``` - - - -`createFactory` is considered legacy, and we encourage you to either use **JSX** or use `React.createElement()` directly instead. - + +--- + ## Usage {/*usage*/} ### Creating React elements {/*creating-react-elements*/} -In this example, we can render a React element of the `type` `button`. +You shouldn't use `createFactory` in new code. In the existing code, it's typically used as an alternative to [JSX:](/learn/writing-markup-with-jsx) -``` js App.js -import React from 'react'; +```js App.js +import { createFactory } from 'react'; -const MyButton = () => - (React.createFactory("button"))({ - onClick: (evt) => { - evt.preventDefault(); - alert("I was created by createFactory()"); +const button = createFactory('button'); + +export default function App() { + return button({ + onClick: () => { + alert('Clicked!') } - }, 'Click'); - -export default function App(){ - return ( -
- {MyButton()} -
- ) + }, 'Click me'); +} +``` + + + +Since `createFactory` has been deprecated, you need to remove it from your project's code. + +For example, you can convert it to use [`createElement`](/api/react/createElement) instead of `createFactory` like this: + + + +```js App.js +import { createElement } from 'react'; + +export default function App() { + return createElement('button', { + onClick: () => { + alert('Clicked!') + } + }, 'Click me'); }; ``` -``` js index.js -import {createRoot} from 'react-dom/client'; -import App from './App.js'; + -const root = createRoot(document.getElementById('root')); -root.render(); +Alternatively, you can convert it to use [JSX:](/learn/writing-markup-with-jsx) + + +```js App.js +export default function App() { + return ( + + ); +}; ``` + +Every pattern that uses `createFactory` can be converted to either of the two styles above. + + + +The full implementation of `createFactory` looks like this: + +```js +import { createElement } from 'react'; + +function createFactory(type) { + return createElement.bind(null, type); +} +``` + +If your project uses `createFactory` a lot, you may copy this helper into your project or publish it on npm. + + + +--- + +## Reference {/*reference*/} + ### `createFactory(type)` {/*createfactory*/} -Call `createFactory(type)` to create a function that creates a React element of a given `type`. + + + +This API will be removed in a future major version of React. Use [JSX](/learn/writing-markup-with-jsx) or [`createElement`](/api/react/createElement) instead. + + + +Call `createFactory(type)` to create a factory function which produces React elements of a given `type`. ```js -const myElement= React.createFactory(type) +import { createFactory } from 'react'; +const button = createFactory('button'); +``` + +Then you can use it to create React elements without JSX: + +```js +export default function App() { + return button({ + onClick: () => { + alert('Clicked!') + } + }, 'Click me'); +} ``` #### Parameters {/*parameters*/} -* `type`: The `type` argument can be either a tag name string (such as `div` or `span`), a React component type (a class or a function), or a React fragment type. +* `type`: The `type` argument must be a valid React component type. For example, it could be a tag name string (such as `'div'` or `'span'`), or a React component (a function, a class, or a special component like [`Fragment`](/apis/react/Fragment)). #### Returns {/*returns*/} - Returns a function that can be used to create a React element of the given `type`. +Returns a factory function. That factory function receives a `props` object as the first argument, followed by a list of `...children` arguments, and returns a React element with the given `type`, `props` and `children`.