From dc1d58026f74d7273390de64dea66fe591c56190 Mon Sep 17 00:00:00 2001 From: Irshath Codes Date: Mon, 24 Apr 2023 21:31:41 +0530 Subject: [PATCH 1/8] fix form submit on enter (#5958) --- src/components/Layout/HomeContent.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js index e6bb995a4..0597642ae 100644 --- a/src/components/Layout/HomeContent.js +++ b/src/components/Layout/HomeContent.js @@ -1463,7 +1463,10 @@ function VideoList({videos, emptyHeading}) { function SearchInput({value, onChange}) { const id = useId(); return ( -
+ e.preventDefault()}> From 609533c95ea0dc99f8d3ddc629f27d41674799b4 Mon Sep 17 00:00:00 2001 From: dan Date: Fri, 28 Apr 2023 16:05:51 +0100 Subject: [PATCH 2/8] Make bundle analysis workflow less fragile (#5971) * Make bundle analysis workflow less fragile * Use sticky comment action --- .github/workflows/analyze.yml | 2 +- .github/workflows/analyze_comment.yml | 26 ++++---------------------- 2 files changed, 5 insertions(+), 23 deletions(-) diff --git a/.github/workflows/analyze.yml b/.github/workflows/analyze.yml index c447a2cdb..07271cef6 100644 --- a/.github/workflows/analyze.yml +++ b/.github/workflows/analyze.yml @@ -38,7 +38,7 @@ jobs: # Here's the first place where next-bundle-analysis' own script is used # This step pulls the raw bundle stats for the current bundle - name: Analyze bundle - run: npx -p nextjs-bundle-analysis report + run: npx -p nextjs-bundle-analysis@0.5.0 report - name: Upload bundle uses: actions/upload-artifact@v2 diff --git a/.github/workflows/analyze_comment.yml b/.github/workflows/analyze_comment.yml index bd73b6b4e..c7e4fbb25 100644 --- a/.github/workflows/analyze_comment.yml +++ b/.github/workflows/analyze_comment.yml @@ -47,26 +47,8 @@ jobs: pr_number=$(cat pr_number/pr_number) echo "pr-number=$pr_number" >> $GITHUB_OUTPUT - - name: Find Comment - uses: peter-evans/find-comment@v1 - if: success() - id: fc - with: - issue-number: ${{ steps.get-comment-body.outputs.pr-number }} - body-includes: "" - - - name: Create Comment - uses: peter-evans/create-or-update-comment@v1.4.4 - if: success() && steps.fc.outputs.comment-id == 0 - with: - issue-number: ${{ steps.get-comment-body.outputs.pr-number }} - body: ${{ steps.get-comment-body.outputs.body }} - - - name: Update Comment - uses: peter-evans/create-or-update-comment@v1.4.4 - if: success() && steps.fc.outputs.comment-id != 0 + - name: Comment + uses: marocchino/sticky-pull-request-comment@v2 with: - issue-number: ${{ steps.get-comment-body.outputs.pr-number }} - body: ${{ steps.get-comment-body.outputs.body }} - comment-id: ${{ steps.fc.outputs.comment-id }} - edit-mode: replace + header: next-bundle-analysis + message: ${{ steps.get-comment-body.outputs.body }} From 496c5784a971aee2980abdd0b3b9ff1d9be30505 Mon Sep 17 00:00:00 2001 From: dan Date: Fri, 28 Apr 2023 16:12:25 +0100 Subject: [PATCH 3/8] Fix the comment action --- .github/workflows/analyze_comment.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/analyze_comment.yml b/.github/workflows/analyze_comment.yml index c7e4fbb25..5a3047cfc 100644 --- a/.github/workflows/analyze_comment.yml +++ b/.github/workflows/analyze_comment.yml @@ -51,4 +51,5 @@ jobs: uses: marocchino/sticky-pull-request-comment@v2 with: header: next-bundle-analysis + number: ${{ steps.get-comment-body.outputs.pr-number }} message: ${{ steps.get-comment-body.outputs.body }} From 52c777b2c3089a8e127ee11a1cb23b7c640b6e7d Mon Sep 17 00:00:00 2001 From: dan Date: Fri, 28 Apr 2023 17:25:56 +0100 Subject: [PATCH 4/8] Document propTypes (#5974) --- src/content/reference/react/Component.md | 28 ++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/src/content/reference/react/Component.md b/src/content/reference/react/Component.md index 8b95b1660..c1b605803 100644 --- a/src/content/reference/react/Component.md +++ b/src/content/reference/react/Component.md @@ -978,6 +978,34 @@ Defining `defaultProps` in class components is similar to using [default values] --- +### `static propTypes` {/*static-proptypes*/} + +You can define `static propTypes` together with the [`prop-types`](https://www.npmjs.com/package/prop-types) library to declare the types of the props accepted by your component. These types will be checked during rendering and in development only. + +```js +import PropTypes from 'prop-types'; + +class Greeting extends React.Component { + static propTypes = { + name: PropTypes.string + }; + + render() { + return ( +

Hello, {this.props.name}

+ ); + } +} +``` + + + +We recommend using [TypeScript](https://www.typescriptlang.org/) instead of checking prop types at runtime. + + + +--- + ### `static getDerivedStateFromError(error)` {/*static-getderivedstatefromerror*/} If you define `static getDerivedStateFromError`, React will call it when a child component (including distant children) throws an error during rendering. This lets you display an error message instead of clearing the UI. From 7ea43a8d92b485707a5d8528da7b9785b24ef316 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=A0=95=ED=99=98?= Date: Sat, 29 Apr 2023 01:31:36 +0900 Subject: [PATCH 5/8] Fix typo in useMemo (product.id -> productId) (#5965) --- src/content/reference/react/useMemo.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react/useMemo.md b/src/content/reference/react/useMemo.md index f758af5a7..543c11125 100644 --- a/src/content/reference/react/useMemo.md +++ b/src/content/reference/react/useMemo.md @@ -1126,7 +1126,7 @@ To memoize a function with `useMemo`, your calculation function would have to re export default function Page({ productId, referrer }) { const handleSubmit = useMemo(() => { return (orderDetails) => { - post('/product/' + product.id + '/buy', { + post('/product/' + productId + '/buy', { referrer, orderDetails }); @@ -1142,7 +1142,7 @@ This looks clunky! **Memoizing functions is common enough that React has a built ```js {2,7} export default function Page({ productId, referrer }) { const handleSubmit = useCallback((orderDetails) => { - post('/product/' + product.id + '/buy', { + post('/product/' + productId + '/buy', { referrer, orderDetails }); From fd621b874c5732e03daaae22ab7cb2bb238c2e7f Mon Sep 17 00:00:00 2001 From: Monica Powell Date: Fri, 28 Apr 2023 19:15:19 -0400 Subject: [PATCH 6/8] update chronological order of the React Miami conf (#5977) --- src/content/community/conferences.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md index 6e8585369..b1860ac0d 100644 --- a/src/content/community/conferences.md +++ b/src/content/community/conferences.md @@ -10,11 +10,6 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c ## Upcoming Conferences {/*upcoming-conferences*/} -### React Miami 2023 {/*react-miami-2023*/} -April 20 - 21, 2023. Miami, FL, USA - -[Website](https://www.reactmiami.com/) - [Twitter](https://twitter.com/ReactMiamiConf) - ### Reactathon 2023 {/*reactathon-2023*/} May 2 - 3, 2023. San Francisco, CA, USA @@ -92,6 +87,11 @@ December 8 & 12, 2023. In-person in Berlin, Germany + remote first interactivity ## Past Conferences {/*past-conferences*/} +### React Miami 2023 {/*react-miami-2023*/} +April 20 - 21, 2023. Miami, FL, USA + +[Website](https://www.reactmiami.com/) - [Twitter](https://twitter.com/ReactMiamiConf) + ### React Day Berlin 2022 {/*react-day-berlin-2022*/} December 2, 2022. In-person in Berlin, Germany + remote (hybrid event) From ef55fb2710cb847964e4b574f24fa7c2b030698a Mon Sep 17 00:00:00 2001 From: Dexter St-Pierre Date: Fri, 28 Apr 2023 20:59:12 -0500 Subject: [PATCH 7/8] Update Fragment.md (#5953) The actual dom nodes that are siblings are the h1 and article nodes --- src/content/reference/react/Fragment.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md index 638450405..aa72b08a0 100644 --- a/src/content/reference/react/Fragment.md +++ b/src/content/reference/react/Fragment.md @@ -54,7 +54,7 @@ function Post() { } ``` -Fragments are useful because grouping elements with a Fragment has no effect on layout or styles, unlike if you wrapped the elements in another container like a DOM element. If you inspect this example with the browser tools, you'll see that all `

` and `

` DOM nodes appear as siblings without wrappers around them: +Fragments are useful because grouping elements with a Fragment has no effect on layout or styles, unlike if you wrapped the elements in another container like a DOM element. If you inspect this example with the browser tools, you'll see that all `

` and `
` DOM nodes appear as siblings without wrappers around them: From 8ed23b1a06ed0d836151622c1455c74bf2d0ce25 Mon Sep 17 00:00:00 2001 From: Matthew Runyon Date: Fri, 28 Apr 2023 21:21:36 -0500 Subject: [PATCH 8/8] Add key param to createPortal reference (#5928) * Add key param to createPortal reference * Update createPortal.md * Update createPortal.md * Update createPortal.md --------- Co-authored-by: dan --- src/content/reference/react-dom/createPortal.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react-dom/createPortal.md b/src/content/reference/react-dom/createPortal.md index eef915409..006f78a9a 100644 --- a/src/content/reference/react-dom/createPortal.md +++ b/src/content/reference/react-dom/createPortal.md @@ -10,7 +10,7 @@ title: createPortal ```js
- {createPortal(children, domNode)} + {createPortal(children, domNode, key?)}
``` @@ -22,7 +22,7 @@ title: createPortal ## Reference {/*reference*/} -### `createPortal(children, domNode)` {/*createportal*/} +### `createPortal(children, domNode, key?)` {/*createportal*/} To create a portal, call `createPortal`, passing some JSX, and the DOM node where it should be rendered: @@ -50,6 +50,8 @@ A portal only changes the physical placement of the DOM node. In every other way * `domNode`: Some DOM node, such as those returned by `document.getElementById()`. The node must already exist. Passing a different DOM node during an update will cause the portal content to be recreated. +* **optional** `key`: A unique string or number to be used as the portal's [key.](/learn/rendering-lists/#keeping-list-items-in-order-with-key) + #### Returns {/*returns*/} `createPortal` returns a React node that can be included into JSX or returned from a React component. If React encounters it in the render output, it will place the provided `children` inside the provided `domNode`.