Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sync with react.dev @ fe37c42e #730

Open
wants to merge 26 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
de726d2
Update verb usage in sentence (#7070)
ryanjbonnell Jul 20, 2024
6274d4f
docs: Add RenderCon Kenya 2024 conference (#6914)
orama254 Jul 20, 2024
6671ba7
Document behaviour of setting state inside `useLayoutEffect` (#7096)
OliverJAsh Aug 7, 2024
2bfa7a6
Update compiler docs installation instructions (#7095)
poteto Aug 8, 2024
a220bb3
docs: replace check mark emoji to check mark button emoji (#7121)
k35o Aug 22, 2024
b5f28b4
Redirect lists-and-keys to rendering-lists describing key (#7120)
BartoszKlonowski Aug 23, 2024
7d50c3f
Emphasize the second problem paragraph with chain of effects example …
BartoszKlonowski Aug 25, 2024
50004fa
Adds React Advanced London 2024 (#7127)
PixelsCommander Aug 26, 2024
40d7349
Parallel structure
sophiebits Aug 29, 2024
c2d6131
Fix typo 'bulit' -> 'built' (#7138)
tveastman Sep 1, 2024
391dadb
Fix typos in lazy.md and cache.md (#7141)
kihyeoon Sep 2, 2024
cd923d6
Update conferences.md to move the past conferences lower (#7130)
JiashengWu Sep 6, 2024
2c06272
add React Day Berlin 2024 to conferences.md (#7137)
McFrid Sep 6, 2024
60ef58c
Update conferences.md, add conference (#7135)
OlegKomissarov Sep 6, 2024
9aa2e36
Changed the documentation of the subscribe argument to a more accurat…
Tinttori Sep 8, 2024
0f2284d
Update copyright footer (#7152)
kassens Sep 9, 2024
13a73c1
Update the version 3 (#7161)
imparth7 Sep 16, 2024
505c85d
Update you-might-not-need-an-effect.md (#7169)
harish-sethuraman Sep 17, 2024
39abc60
Nit: server actions can't be passed events (#7175)
rickhanlonii Sep 19, 2024
c003ac4
Add stable fn notes to useMemo, useTransition, useState, and useReduc…
rickhanlonii Sep 22, 2024
e2f089d
Fix search results ranking and grouping (#7183)
rickhanlonii Sep 23, 2024
ec8f70f
rm insights prop to unbreak main
rickhanlonii Sep 23, 2024
8e6e81e
rm package-lock.json (#7184)
rickhanlonii Sep 23, 2024
8dba319
reactjsday-2024-Verona (#7171)
lxmarinkovic Sep 24, 2024
fe37c42
✨KOREAN(ko.react.dev) Translation Completed (#7185)
lumirlumir Sep 29, 2024
1fdb600
merging all conflicts
react-translations-bot Sep 30, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions .github/workflows/analyze.yml
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,18 @@ jobs:
analyze:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/checkout@v3

- name: Set up node
uses: actions/setup-node@v1
uses: actions/setup-node@v3
with:
node-version: '20.x'

- name: Install dependencies
uses: bahmutov/[email protected]

- name: Restore next build
uses: actions/cache@v2
uses: actions/cache@v3
id: restore-build-cache
env:
cache-name: cache-next-build
Expand All @@ -41,7 +41,7 @@ jobs:
run: npx -p [email protected] report

- name: Upload bundle
uses: actions/upload-artifact@v2
uses: actions/upload-artifact@v3
with:
path: .next/analyze/__bundle_analysis.json
name: bundle_analysis.json
Expand Down Expand Up @@ -73,7 +73,7 @@ jobs:
run: ls -laR .next/analyze/base && npx -p nextjs-bundle-analysis compare

- name: Upload analysis comment
uses: actions/upload-artifact@v2
uses: actions/upload-artifact@v3
with:
name: analysis_comment.txt
path: .next/analyze/__bundle_analysis_comment.txt
Expand All @@ -82,7 +82,7 @@ jobs:
run: echo ${{ github.event.number }} > ./pr_number

- name: Upload PR number
uses: actions/upload-artifact@v2
uses: actions/upload-artifact@v3
with:
name: pr_number
path: ./pr_number
Expand Down
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@
},
"dependencies": {
"@codesandbox/sandpack-react": "2.13.5",
"@docsearch/css": "3.0.0-alpha.41",
"@docsearch/react": "3.0.0-alpha.41",
"@docsearch/css": "^3.6.1",
"@docsearch/react": "^3.6.1",
"@headlessui/react": "^1.7.0",
"@radix-ui/react-context-menu": "^2.1.5",
"body-scroll-lock": "^3.1.3",
Expand Down
2 changes: 1 addition & 1 deletion src/components/Layout/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -283,7 +283,7 @@ export function Footer() {
<div
className="text-xs text-left rtl:text-right mt-2 pe-0.5"
dir="ltr">
&copy;{new Date().getFullYear()}
Copyright &copy; Meta Platforms, Inc
</div>
<div
className="uwu-visible text-xs cursor-pointer hover:text-link hover:dark:text-link-dark hover:underline"
Expand Down
12 changes: 11 additions & 1 deletion src/components/Search.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,17 @@ export function Search({
onOpen,
onClose,
searchParameters = {
hitsPerPage: 5,
hitsPerPage: 30,
attributesToHighlight: [
'hierarchy.lvl0',
'hierarchy.lvl1',
'hierarchy.lvl2',
'hierarchy.lvl3',
'hierarchy.lvl4',
'hierarchy.lvl5',
'hierarchy.lvl6',
'content',
],
},
}: SearchProps) {
useDocSearchKeyboardEvents({isOpen, onOpen, onClose});
Expand Down
4 changes: 2 additions & 2 deletions src/content/blog/2023/03/16/introducing-react-dev.md
Original file line number Diff line number Diff line change
Expand Up @@ -269,7 +269,7 @@ Use the conditional operator (`cond ? a : b`) to render a ❌ if `isPacked` isn
function Item({ name, isPacked }) {
return (
<li className="item">
{name} {isPacked && ''}
{name} {isPacked && ''}
</li>
);
}
Expand Down Expand Up @@ -307,7 +307,7 @@ export default function PackingList() {
function Item({ name, isPacked }) {
return (
<li className="item">
{name} {isPacked ? '' : '❌'}
{name} {isPacked ? '' : '❌'}
</li>
);
}
Expand Down
64 changes: 44 additions & 20 deletions src/content/community/conferences.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,26 +10,6 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c

## Upcoming Conferences {/*upcoming-conferences*/}

### React Nexus 2024 {/*react-nexus-2024*/}
July 04 & 05, 2024. Bangalore, India (In-person event)

[Website](https://reactnexus.com/) - [Twitter](https://twitter.com/ReactNexus) - [Linkedin](https://www.linkedin.com/company/react-nexus) - [YouTube](https://www.youtube.com/reactify_in)

### Chain React 2024 {/*chain-react-2024*/}
July 17-19, 2024. In-person in Portland, OR, USA

[Website](https://chainreactconf.com) - [Twitter](https://twitter.com/ChainReactConf)

### The Geek Conf 2024 {/*the-geek-conf-2024*/}
July 25, 2024. In-person in Berlin, Germany + remote (hybrid event)

[Website](https://thegeekconf.com) - [Twitter](https://twitter.com/thegeekconf)

### React Rally 2024 🐙 {/*react-rally-2024*/}
August 12-13, 2024. Park City, UT, USA

[Website](https://reactrally.com) - [Twitter](https://twitter.com/ReactRally) - [YouTube](https://www.youtube.com/channel/UCXBhQ05nu3L1abBUGeQ0ahw)

### React Universe Conf 2024 {/*react-universe-conf-2024*/}
September 5-6, 2024. Wrocław, Poland.

Expand All @@ -40,6 +20,10 @@ September 19-21, 2024. Alicante, Spain.

[Website](https://reactalicante.es/) - [Twitter](https://twitter.com/ReactAlicante) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w)

### RenderCon Kenya 2024 {/*rendercon-kenya-2024*/}
October 04 - 05, 2024. Nairobi, Kenya

[Website](https://rendercon.org/) - [Twitter](https://twitter.com/renderconke) - [LinkedIn](https://www.linkedin.com/company/renderconke/) - [YouTube](https://www.youtube.com/channel/UC0bCcG8gHUL4njDOpQGcMIA)

### React India 2024 {/*react-india-2024*/}
October 17 - 19, 2024. In-person in Goa, India (hybrid event) + Oct 15 2024 - remote day
Expand All @@ -51,13 +35,53 @@ October 18, 2024. In-person in Brussels, Belgium (hybrid event)

[Website](https://www.react.brussels/) - [Twitter](https://x.com/BrusselsReact)

### reactjsday 2024 {/*reactjsday-2024*/}
October 25, 2024. In-person in Verona, Italy + online (hybrid event)

[Website](https://2024.reactjsday.it/) - [Twitter](https://x.com/reactjsday) - [Facebook](https://www.facebook.com/GrUSP/) - [YouTube](https://www.youtube.com/c/grusp)

### React Advanced London 2024 {/*react-advanced-london-2024*/}
October 25 & 28, 2024. In-person in London, UK + online (hybrid event)

[Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced)

### React Summit US 2024 {/*react-summit-us-2024*/}
November 19 & 22, 2024. In-person in New York, USA + online (hybrid event)

[Website](https://reactsummit.us/) - [Twitter](https://twitter.com/reactsummit) - [Videos](https://portal.gitnation.org/)

### React Africa 2024 {/*react-africa-2024*/}
November 29, 2024. In-person in Casablanca, Morocco (hybrid event)

[Website](https://react-africa.com/) - [Twitter](https://x.com/BeJS_)

### React Day Berlin 2024 {/*react-day-berlin-2024*/}
December 13 & 16, 2024. In-person in Berlin, Germany + remote (hybrid event)

[Website](https://reactday.berlin/) - [Twitter](https://x.com/reactdayberlin)

## Past Conferences {/*past-conferences*/}

### React Rally 2024 🐙 {/*react-rally-2024*/}
August 12-13, 2024. Park City, UT, USA

[Website](https://reactrally.com) - [Twitter](https://twitter.com/ReactRally) - [YouTube](https://www.youtube.com/channel/UCXBhQ05nu3L1abBUGeQ0ahw)

### The Geek Conf 2024 {/*the-geek-conf-2024*/}
July 25, 2024. In-person in Berlin, Germany + remote (hybrid event)

[Website](https://thegeekconf.com) - [Twitter](https://twitter.com/thegeekconf)

### Chain React 2024 {/*chain-react-2024*/}
July 17-19, 2024. In-person in Portland, OR, USA

[Website](https://chainreactconf.com) - [Twitter](https://twitter.com/ChainReactConf)

### React Nexus 2024 {/*react-nexus-2024*/}
July 04 & 05, 2024. Bangalore, India (In-person event)

[Website](https://reactnexus.com/) - [Twitter](https://twitter.com/ReactNexus) - [Linkedin](https://www.linkedin.com/company/react-nexus) - [YouTube](https://www.youtube.com/reactify_in)

### React Summit 2024 {/*react-summit-2024*/}
June 14 & 18, 2024. In-person in Amsterdam, Netherlands + remote (hybrid event)

Expand Down
4 changes: 4 additions & 0 deletions src/content/learn/adding-interactivity.md
Original file line number Diff line number Diff line change
Expand Up @@ -265,7 +265,11 @@ setCount(count + 1); // Meminta render ulang dengan 1
console.log(count); // Masih 0!
```

<<<<<<< HEAD
Perilaku ini akan membantu Anda menghindari *bug* yang susah ditemukan. Berikut adalah aplikasi chat sederhana. Coba tebak apa yang terjadi jika Anda menekan "Kirim" terlebih dahulu dan *kemudian* mengubah penerima menjadi Bob. Nama siapa yang akan muncul di `alert` lima detik kemudian?
=======
This behavior helps you avoid subtle bugs. Here is a little chat app. Try to guess what happens if you press "Send" first and *then* change the recipient to Bob. Whose name will appear in the `alert` five seconds later?
>>>>>>> fe37c42e0b51167d7f3c98593f50de997d666266

<Sandpack>

Expand Down
36 changes: 22 additions & 14 deletions src/content/learn/conditional-rendering.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,13 +52,17 @@ export default function PackingList() {

</Sandpack>

<<<<<<< HEAD
Perhatikan bahwa beberapa komponen `Item` memiliki *prop* `isPacked` yang disetel ke `true`, bukan `false`. Anda ingin menambahkan tanda centang (✔) pada item yang sudah dikemas jika `isPacked={true}`.
=======
Notice that some of the `Item` components have their `isPacked` prop set to `true` instead of `false`. You want to add a checkmark (✅) to packed items if `isPacked={true}`.
>>>>>>> fe37c42e0b51167d7f3c98593f50de997d666266

Anda dapat menuliskannya sebagai [pernyataan `if`/`else`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) seperti ini:

```js
if (isPacked) {
return <li className="item">{name} </li>;
return <li className="item">{name} </li>;
}
return <li className="item">{name}</li>;
```
Expand All @@ -70,7 +74,7 @@ Jika *prop* `isPacked` bernilai `true`, kode ini **mengembalikan pohon JSX yang
```js
function Item({ name, isPacked }) {
if (isPacked) {
return <li className="item">{name} </li>;
return <li className="item">{name} </li>;
}
return <li className="item">{name}</li>;
}
Expand Down Expand Up @@ -159,7 +163,7 @@ Dalam praktiknya, mengembalikan `null` dari sebuah komponen tidaklah umum karena
Pada contoh sebelumnya, Anda mengontrol pohon JSX mana (jika ada!) yang akan dikembalikan oleh komponen. Anda mungkin telah melihat beberapa duplikasi pada keluaran *render*:

```js
<li className="item">{name} </li>
<li className="item">{name} </li>
```

is very similar to
Expand All @@ -172,7 +176,7 @@ Kedua cabang kondisional mengembalikan `<li className="item">...</li>`:

```js
if (isPacked) {
return <li className="item">{name} </li>;
return <li className="item">{name} </li>;
}
return <li className="item">{name}</li>;
```
Expand All @@ -187,7 +191,7 @@ Daripada ini:

```js
if (isPacked) {
return <li className="item">{name} </li>;
return <li className="item">{name} </li>;
}
return <li className="item">{name}</li>;
```
Expand All @@ -197,12 +201,16 @@ Anda bisa menulis ini:
```js
return (
<li className="item">
{isPacked ? name + ' ' : name}
{isPacked ? name + ' ' : name}
</li>
);
```

<<<<<<< HEAD
Anda dapat membacanya sebagai *"jika nilai `isPacked` adalah true, maka (`?`) render `name + ' ✔'`, jika tidak (`:`) render `name`"*.
=======
You can read it as *"if `isPacked` is true, then (`?`) render `name + ' ✅'`, otherwise (`:`) render `name`"*.
>>>>>>> fe37c42e0b51167d7f3c98593f50de997d666266

<DeepDive>

Expand All @@ -222,7 +230,7 @@ function Item({ name, isPacked }) {
<li className="item">
{isPacked ? (
<del>
{name + ' '}
{name + ' '}
</del>
) : (
name
Expand Down Expand Up @@ -265,7 +273,7 @@ Pintasan umum lainnya yang akan Anda temui adalah [operator logis AND (`&&`) Jav
```js
return (
<li className="item">
{name} {isPacked && ''}
{name} {isPacked && ''}
</li>
);
```
Expand All @@ -280,7 +288,7 @@ Here it is in action:
function Item({ name, isPacked }) {
return (
<li className="item">
{name} {isPacked && ''}
{name} {isPacked && ''}
</li>
);
}
Expand Down Expand Up @@ -337,7 +345,7 @@ Gunakan pernyataan `if` untuk menetapkan kembali ekspresi JSX ke `itemContent` j

```js
if (isPacked) {
itemContent = name + " ";
itemContent = name + " ";
}
```

Expand All @@ -357,7 +365,7 @@ Model ini adalah model yang paling bertele-tele, tetapi juga paling fleksibel. I
function Item({ name, isPacked }) {
let itemContent = name;
if (isPacked) {
itemContent = name + " ";
itemContent = name + " ";
}
return (
<li className="item">
Expand Down Expand Up @@ -401,7 +409,7 @@ function Item({ name, isPacked }) {
if (isPacked) {
itemContent = (
<del>
{name + " "}
{name + " "}
</del>
);
}
Expand Down Expand Up @@ -464,7 +472,7 @@ Gunakan operator kondisional (`cond ? a : b`) untuk me-*render* ❌ jika `isPack
function Item({ name, isPacked }) {
return (
<li className="item">
{name} {isPacked && ''}
{name} {isPacked && ''}
</li>
);
}
Expand Down Expand Up @@ -502,7 +510,7 @@ export default function PackingList() {
function Item({ name, isPacked }) {
return (
<li className="item">
{name} {isPacked ? '' : '❌'}
{name} {isPacked ? '' : '❌'}
</li>
);
}
Expand Down
2 changes: 1 addition & 1 deletion src/content/learn/describing-the-ui.md
Original file line number Diff line number Diff line change
Expand Up @@ -327,7 +327,7 @@ Dalam contoh ini, operator `&&` JavaScript digunakan untuk me-*render* centang s
function Item({ name, isPacked }) {
return (
<li className="item">
{name} {isPacked && ''}
{name} {isPacked && ''}
</li>
);
}
Expand Down
8 changes: 4 additions & 4 deletions src/content/learn/react-compiler.md
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ In addition to these docs, we recommend checking the [React Compiler Working Gro
Prior to installing the compiler, you can first check to see if your codebase is compatible:

<TerminalBlock>
npx react-compiler-healthcheck@latest
npx react-compiler-healthcheck@experimental
</TerminalBlock>

This script will:
Expand All @@ -143,7 +143,7 @@ Found no usage of incompatible libraries.
React Compiler also powers an eslint plugin. The eslint plugin can be used **independently** of the compiler, meaning you can use the eslint plugin even if you don't use the compiler.

<TerminalBlock>
npm install eslint-plugin-react-compiler
npm install eslint-plugin-react-compiler@experimental
</TerminalBlock>

Then, add it to your eslint config:
Expand Down Expand Up @@ -203,7 +203,7 @@ If you're starting a new project, you can enable the compiler on your entire cod
### Babel {/*usage-with-babel*/}

<TerminalBlock>
npm install babel-plugin-react-compiler
npm install babel-plugin-react-compiler@experimental
</TerminalBlock>

The compiler includes a Babel plugin which you can use in your build pipeline to run the compiler.
Expand Down Expand Up @@ -258,7 +258,7 @@ Next.js has an experimental configuration to enable the React Compiler. It autom
- Install `babel-plugin-react-compiler`

<TerminalBlock>
npm install next@canary babel-plugin-react-compiler
npm install next@canary babel-plugin-react-compiler@experimental
</TerminalBlock>

Then configure the experimental option in `next.config.js`:
Expand Down
Loading
Loading