From 120509704530d3193d5120a1a2707427cf7d3681 Mon Sep 17 00:00:00 2001 From: dan Date: Tue, 4 Oct 2022 11:23:20 +0100 Subject: [PATCH] [Beta] Add Alternatives to createFactory API (#5149) --- beta/src/content/apis/react/createFactory.md | 133 ++++++++++++++++--- 1 file changed, 115 insertions(+), 18 deletions(-) diff --git a/beta/src/content/apis/react/createFactory.md b/beta/src/content/apis/react/createFactory.md index 156e055f..43cc26f2 100644 --- a/beta/src/content/apis/react/createFactory.md +++ b/beta/src/content/apis/react/createFactory.md @@ -4,7 +4,7 @@ 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. +This API will be removed in a future major version of React. [See the alternatives.](#alternatives) @@ -24,9 +24,25 @@ const factory = createFactory(type) ## Usage {/*usage*/} -### Creating React elements {/*creating-react-elements*/} +### Creating React elements with a factory {/*creating-react-elements-with-a-factory*/} -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) + + +This API will be removed in a future major version of React. [See the alternatives.](#alternatives) + + + +Although most React projects use [JSX](/learn/writing-markup-with-jsx) to describe the user interface, JSX is not required. In the past, `createFactory` used to be one of the ways you could describe the user interface without JSX. + +Call `createFactory` to create a *factory function* for a specific element type like `'button'`: + +```js +import { createFactory } from 'react'; + +const button = createFactory('button'); +``` + +Calling that factory function will produce React elements with the props and children you have provided: @@ -46,13 +62,68 @@ export default function App() { -Since `createFactory` has been deprecated, you need to remove it from your project's code. +This is how `createFactory` was used as an alternative to JSX. However, `createFactory` is deprecated, and you should not call `createFactory` in any new code. See how to migrate away from `createFactory` below. + +--- + +## Alternatives {/*alternatives*/} -For example, you can convert it to use [`createElement`](/api/react/createElement) instead of `createFactory` like this: +### Copying `createFactory` into your project {/*copying-createfactory-into-your-project*/} + +If your project has many `createFactory` calls, copy this `createFactory.js` implementation into your project: ```js App.js +import { createFactory } from './createFactory.js'; + +const button = createFactory('button'); + +export default function App() { + return button({ + onClick: () => { + alert('Clicked!') + } + }, 'Click me'); +} +``` + +```js createFactory.js +import { createElement } from 'react'; + +export function createFactory(type) { + return createElement.bind(null, type); +} +``` + + + +This lets you keep all of your code unchanged except the imports. + +--- + +### Replacing `createFactory` with `createElement` {/*replacing-createfactory-with-createelement*/} + +If you have a few `createFactory` calls that you don't mind porting manually, and you don't want to use JSX, you can replace every call a factory function with a [`createElement`](/api/react/createElement) call. For example, you can replace this code: + +```js {1,3,6} +import { createFactory } from 'react'; + +const button = createFactory('button'); + +export default function App() { + return button({ + onClick: () => { + alert('Clicked!') + } + }, 'Click me'); +} +``` + +with this code: + + +```js {1,4} import { createElement } from 'react'; export default function App() { @@ -61,12 +132,32 @@ export default function App() { alert('Clicked!') } }, 'Click me'); -}; +} +``` + +Here is a complete example of using React without JSX: + + + +```js App.js +import { createElement } from 'react'; + +export default function App() { + return createElement('button', { + onClick: () => { + alert('Clicked!') + } + }, 'Click me'); +} ``` -Alternatively, you can convert it to use [JSX:](/learn/writing-markup-with-jsx) +--- + +### Replacing `createFactory` with JSX {/*replacing-createfactory-with-jsx*/} + +Finally, you can use JSX instead of `createFactory`. This is the most common way to use React: @@ -84,23 +175,30 @@ export default function App() { -Every pattern that uses `createFactory` can be converted to either of the two styles above. + - +Sometimes, your existing code might pass some variable as a `type` instead of a constant like `'button'`: -The full implementation of `createFactory` looks like this: +```js {3} +function Heading({ isSubheading, ...props }) { + let type = isSubheading ? 'h2' : 'h1'; + const factory = createFactory(type); + return factory(props); +} +``` -```js -import { createElement } from 'react'; +To do the same in JSX, you need to rename your variable to start with an uppercase letter like `Type`: -function createFactory(type) { - return createElement.bind(null, type); +```js {2,3} +function Heading({ size, ...props }) { + let Type = isSubheading ? 'h2' : 'h1'; + return ; } ``` -If your project uses `createFactory` a lot, you may copy this helper into your project or publish it on npm. +Otherwise React will interpret `` as a built-in HTML tag because it is lowercase. - + --- @@ -108,10 +206,9 @@ If your project uses `createFactory` a lot, you may copy this helper into your p ### `createFactory(type)` {/*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. +This API will be removed in a future major version of React. [See the alternatives.](#alternatives)