diff --git a/.github/workflows/analyze.yml b/.github/workflows/analyze.yml index 87dcfdc73..2a905a0df 100644 --- a/.github/workflows/analyze.yml +++ b/.github/workflows/analyze.yml @@ -11,10 +11,10 @@ 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' @@ -22,7 +22,7 @@ jobs: uses: bahmutov/npm-install@v1.7.10 - name: Restore next build - uses: actions/cache@v2 + uses: actions/cache@v3 id: restore-build-cache env: cache-name: cache-next-build @@ -41,7 +41,7 @@ jobs: run: npx -p nextjs-bundle-analysis@0.5.0 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 @@ -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 @@ -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 diff --git a/package.json b/package.json index 1f63eb121..ad9b9baa4 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx index 9137176ea..358cc1297 100644 --- a/src/components/Layout/Footer.tsx +++ b/src/components/Layout/Footer.tsx @@ -283,7 +283,7 @@ export function Footer() {
- ©{new Date().getFullYear()} + Copyright © Meta Platforms, Inc
{ setShowLoading(true); diff --git a/src/components/Search.tsx b/src/components/Search.tsx index cff7f8852..f5c963f67 100644 --- a/src/components/Search.tsx +++ b/src/components/Search.tsx @@ -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}); diff --git a/src/content/blog/2023/03/16/introducing-react-dev.md b/src/content/blog/2023/03/16/introducing-react-dev.md index 2498f40dc..c4da2b61f 100644 --- a/src/content/blog/2023/03/16/introducing-react-dev.md +++ b/src/content/blog/2023/03/16/introducing-react-dev.md @@ -269,7 +269,7 @@ Use the conditional operator (`cond ? a : b`) to render a ❌ if `isPacked` isn function Item({ name, isPacked }) { return (
  • - {name} {isPacked && '✔'} + {name} {isPacked && '✅'}
    • ); } @@ -307,7 +307,7 @@ export default function PackingList() { function Item({ name, isPacked }) { return (
  • - {name} {isPacked ? '✔' : '❌'} + {name} {isPacked ? '✅' : '❌'}
    • ); } diff --git a/src/content/blog/2024/04/25/react-19-upgrade-guide.md b/src/content/blog/2024/04/25/react-19-upgrade-guide.md index f464df959..5ead75a20 100644 --- a/src/content/blog/2024/04/25/react-19-upgrade-guide.md +++ b/src/content/blog/2024/04/25/react-19-upgrade-guide.md @@ -353,7 +353,7 @@ npm install react-shallow-renderer --save-dev ##### Please reconsider shallow rendering {/*please-reconsider-shallow-rendering*/} -Shallow rendering depends on React internals and can block you from future upgrades. We recommend migrating your tests to [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) or [@testing-library/react-native](https://callstack.github.io/react-native-testing-library/docs/getting-started). +Shallow rendering depends on React internals and can block you from future upgrades. We recommend migrating your tests to [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) or [@testing-library/react-native](https://testing-library.com/docs/react-native-testing-library/intro). @@ -524,7 +524,7 @@ We are deprecating `react-test-renderer` because it implements its own renderer The test renderer was created before there were more viable testing strategies available like [React Testing Library](https://testing-library.com), and we now recommend using a modern testing library instead. -In React 19, `react-test-renderer` logs a deprecation warning, and has switched to concurrent rendering. We recommend migrating your tests to [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) or [@testing-library/react-native](https://callstack.github.io/react-native-testing-library/docs/getting-started) for a modern and well supported testing experience. +In React 19, `react-test-renderer` logs a deprecation warning, and has switched to concurrent rendering. We recommend migrating your tests to [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/) or [@testing-library/react-native](https://testing-library.com/docs/react-native-testing-library/intro) for a modern and well supported testing experience. ## Notable changes {/*notable-changes*/} diff --git a/src/content/community/acknowledgements.md b/src/content/community/acknowledgements.md index aeb0787ef..9a981efd5 100644 --- a/src/content/community/acknowledgements.md +++ b/src/content/community/acknowledgements.md @@ -59,7 +59,7 @@ We'd like to recognize a few people who have made significant contributions to R This list is not exhaustive. -We'd like to give special thanks to [Tom Occhino](https://github.com/tomocchino) and [Adam Wolff](https://github.com/wolffiex) for their guidance and support over the years. We are also thankful to all the volunteers who [translated React into other languages.](https://translations.reactjs.org/) +We'd like to give special thanks to [Tom Occhino](https://github.com/tomocchino) and [Adam Wolff](https://github.com/wolffiex) for their guidance and support over the years. We are also thankful to all the volunteers who [translated React into other languages.](https://translations.react.dev/) ## Additional Thanks {/*additional-thanks*/} diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md index bebc17157..aaa761218 100644 --- a/src/content/community/conferences.md +++ b/src/content/community/conferences.md @@ -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. @@ -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 @@ -51,13 +35,58 @@ 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 Native London Conf 2024 {/*react-native-london-2024*/} +November 14 & 15, 2024. In-person in London, UK + +[Website](https://reactnativelondon.co.uk/) - [Twitter](https://x.com/RNLConf) + +### 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) diff --git a/src/content/community/meetups.md b/src/content/community/meetups.md index d8887c3de..14097aa4d 100644 --- a/src/content/community/meetups.md +++ b/src/content/community/meetups.md @@ -30,15 +30,8 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet * [Belo Horizonte](https://www.meetup.com/reactbh/) * [Curitiba](https://www.meetup.com/pt-br/ReactJS-CWB/) * [Florianópolis](https://www.meetup.com/pt-br/ReactJS-Floripa/) -* [Goiânia](https://www.meetup.com/pt-br/React-Goiania/) * [Joinville](https://www.meetup.com/pt-BR/React-Joinville/) -* [Juiz de Fora](https://www.meetup.com/pt-br/React-Juiz-de-Fora/) -* [Maringá](https://www.meetup.com/pt-BR/React-Maringa/) -* [Porto Alegre](https://www.meetup.com/pt-BR/React-Porto-Alegre/) -* [Rio de Janeiro](https://www.meetup.com/pt-BR/React-Rio-de-Janeiro/) -* [Salvador](https://www.meetup.com/pt-BR/ReactSSA) * [São Paulo](https://www.meetup.com/pt-BR/ReactJS-SP/) -* [Vila Velha](https://www.meetup.com/pt-BR/React-ES/) ## Bolivia {/*bolivia*/} * [Bolivia](https://www.meetup.com/ReactBolivia/) @@ -51,24 +44,13 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet * [Saskatoon, SK](https://www.meetup.com/saskatoon-react-meetup/) * [Toronto, ON](https://www.meetup.com/Toronto-React-Native/events/) -## Chile {/*chile*/} -* [Santiago](https://www.meetup.com/es-ES/react-santiago/) - -## China {/*china*/} -* [Beijing](https://www.meetup.com/Beijing-ReactJS-Meetup/) - ## Colombia {/*colombia*/} -* [Bogotá](https://www.meetup.com/meetup-group-iHIeHykY/) * [Medellin](https://www.meetup.com/React-Medellin/) -* [Cali](https://www.meetup.com/reactcali/) ## Denmark {/*denmark*/} * [Aalborg](https://www.meetup.com/Aalborg-React-React-Native-Meetup/) * [Aarhus](https://www.meetup.com/Aarhus-ReactJS-Meetup/) -## Egypt {/*egypt*/} -* [Cairo](https://www.meetup.com/react-cairo/) - ## England (UK) {/*england-uk*/} * [Manchester](https://www.meetup.com/Manchester-React-User-Group/) * [React.JS Girls London](https://www.meetup.com/ReactJS-Girls-London/) @@ -76,7 +58,6 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet * [React Native London](https://guild.host/RNLDN) ## France {/*france*/} -* [Nantes](https://www.meetup.com/React-Nantes/) * [Lille](https://www.meetup.com/ReactBeerLille/) * [Paris](https://www.meetup.com/ReactJS-Paris/) @@ -93,9 +74,6 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet * [Athens](https://www.meetup.com/React-To-React-Athens-MeetUp/) * [Thessaloniki](https://www.meetup.com/Thessaloniki-ReactJS-Meetup/) -## Hungary {/*hungary*/} -* [Budapest](https://www.meetup.com/React-Budapest/) - ## India {/*india*/} * [Ahmedabad](https://www.meetup.com/react-ahmedabad/) * [Bangalore (React)](https://www.meetup.com/ReactJS-Bangalore/) @@ -117,6 +95,9 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet ## Italy {/*italy*/} * [Milan](https://www.meetup.com/React-JS-Milano/) +## Japan {/*japan*/} +* [Osaka](https://react-osaka.connpass.com/) + ## Kenya {/*kenya*/} * [Nairobi - Reactdevske](https://kommunity.com/reactjs-developer-community-kenya-reactdevske) @@ -138,12 +119,6 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet * [Karachi](https://www.facebook.com/groups/902678696597634/) * [Lahore](https://www.facebook.com/groups/ReactjsLahore/) -## Panama {/*panama*/} -* [Panama](https://www.meetup.com/React-Panama/) - -## Peru {/*peru*/} -* [Lima](https://www.meetup.com/ReactJS-Peru/) - ## Philippines {/*philippines*/} * [Manila](https://www.meetup.com/reactjs-developers-manila/) * [Manila - ReactJS PH](https://www.meetup.com/ReactJS-Philippines/) @@ -160,7 +135,6 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet ## Spain {/*spain*/} * [Barcelona](https://www.meetup.com/ReactJS-Barcelona/) -* [Canarias](https://www.meetup.com/React-Canarias/) ## Sweden {/*sweden*/} * [Goteborg](https://www.meetup.com/ReactJS-Goteborg/) @@ -176,7 +150,6 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet * [Kyiv](https://www.meetup.com/Kyiv-ReactJS-Meetup) ## US {/*us*/} -* [Ann Arbor, MI - ReactJS](https://www.meetup.com/AnnArbor-jsx/) * [Atlanta, GA - ReactJS](https://www.meetup.com/React-ATL/) * [Austin, TX - ReactJS](https://www.meetup.com/ReactJS-Austin-Meetup/) * [Boston, MA - ReactJS](https://www.meetup.com/ReactJS-Boston/) @@ -187,7 +160,6 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet * [Cleveland, OH - ReactJS](https://www.meetup.com/Cleveland-React/) * [Columbus, OH - ReactJS](https://www.meetup.com/ReactJS-Columbus-meetup/) * [Dallas, TX - ReactJS](https://www.meetup.com/ReactDallas/) -* [Dallas, TX - [Remote] React JS](https://www.meetup.com/React-JS-Group/) * [Detroit, MI - Detroit React User Group](https://www.meetup.com/Detroit-React-User-Group/) * [Indianapolis, IN - React.Indy](https://www.meetup.com/React-Indy) * [Irvine, CA - ReactJS](https://www.meetup.com/ReactJS-OC/) @@ -197,27 +169,19 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet * [Los Angeles, CA - ReactJS](https://www.meetup.com/socal-react/) * [Los Angeles, CA - React Native](https://www.meetup.com/React-Native-Los-Angeles/) * [Miami, FL - ReactJS](https://www.meetup.com/React-Miami/) -* [Nashville, TN - ReactJS](https://www.meetup.com/NashReact-Meetup/) * [New York, NY - ReactJS](https://www.meetup.com/NYC-Javascript-React-Group/) * [New York, NY - React Ladies](https://www.meetup.com/React-Ladies/) * [New York, NY - React Native](https://www.meetup.com/React-Native-NYC/) * [New York, NY - useReactNYC](https://www.meetup.com/useReactNYC/) * [New York, NY - React.NYC](https://guild.host/react-nyc) -* [Omaha, NE - ReactJS/React Native](https://www.meetup.com/omaha-react-meetup-group/) * [Palo Alto, CA - React Native](https://www.meetup.com/React-Native-Silicon-Valley/) -* [Philadelphia, PA - ReactJS](https://www.meetup.com/Reactadelphia/) * [Phoenix, AZ - ReactJS](https://www.meetup.com/ReactJS-Phoenix/) -* [Pittsburgh, PA - ReactJS/React Native](https://www.meetup.com/ReactPgh/) -* [Portland, OR - ReactJS](https://www.meetup.com/Portland-ReactJS/) * [Provo, UT - ReactJS](https://www.meetup.com/ReactJS-Utah/) -* [Sacramento, CA - ReactJS](https://www.meetup.com/Sacramento-ReactJS-Meetup/) * [San Diego, CA - San Diego JS](https://www.meetup.com/sandiegojs/) * [San Francisco - Real World React](https://www.meetup.com/Real-World-React) * [San Francisco - ReactJS](https://www.meetup.com/ReactJS-San-Francisco/) * [San Francisco, CA - React Native](https://www.meetup.com/React-Native-San-Francisco/) -* [San Ramon, CA - TriValley Coders](https://www.meetup.com/trivalleycoders/) * [Santa Monica, CA - ReactJS](https://www.meetup.com/Los-Angeles-ReactJS-User-Group/) -* [Seattle, WA - React Native](https://www.meetup.com/Seattle-React-Native-Meetup/) * [Seattle, WA - ReactJS](https://www.meetup.com/seattle-react-js/) * [Tampa, FL - ReactJS](https://www.meetup.com/ReactJS-Tampa-Bay/) * [Tucson, AZ - ReactJS](https://www.meetup.com/Tucson-ReactJS-Meetup/) diff --git a/src/content/learn/adding-interactivity.md b/src/content/learn/adding-interactivity.md index 1278e1122..43818e338 100644 --- a/src/content/learn/adding-interactivity.md +++ b/src/content/learn/adding-interactivity.md @@ -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? +>>>>>>> 1697ae89a3bbafd76998dd7496754e5358bc1e9a diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md index 355bb25a4..18f4e2ab4 100644 --- a/src/content/learn/conditional-rendering.md +++ b/src/content/learn/conditional-rendering.md @@ -52,13 +52,17 @@ export default function PackingList() { +<<<<<<< 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}`. +>>>>>>> 1697ae89a3bbafd76998dd7496754e5358bc1e9a 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
  • {name} ✔
    • ; + return
  • {name} ✅
    • ; } return
  • {name}
    • ; ``` @@ -70,7 +74,7 @@ Jika *prop* `isPacked` bernilai `true`, kode ini **mengembalikan pohon JSX yang ```js function Item({ name, isPacked }) { if (isPacked) { - return
  • {name} ✔
    • ; + return
  • {name} ✅
    • ; } return
  • {name}
    • ; } @@ -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 -
  • {name} ✔
    • +
  • {name} ✅
    • ``` is very similar to @@ -172,7 +176,7 @@ Kedua cabang kondisional mengembalikan `
  • ...
    • `: ```js if (isPacked) { - return
  • {name} ✔
    • ; + return
  • {name} ✅
    • ; } return
  • {name}
    • ; ``` @@ -187,7 +191,7 @@ Daripada ini: ```js if (isPacked) { - return
  • {name} ✔
    • ; + return
  • {name} ✅
    • ; } return
  • {name}
    • ; ``` @@ -197,12 +201,16 @@ Anda bisa menulis ini: ```js return (
  • - {isPacked ? name + ' ✔' : name} + {isPacked ? name + ' ✅' : name}
    • ); ``` +<<<<<<< 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`"*. +>>>>>>> 1697ae89a3bbafd76998dd7496754e5358bc1e9a @@ -222,7 +230,7 @@ function Item({ name, isPacked }) {
  • {isPacked ? ( - {name + ' ✔'} + {name + ' ✅'} ) : ( name @@ -265,7 +273,7 @@ Pintasan umum lainnya yang akan Anda temui adalah [operator logis AND (`&&`) Jav ```js return (
  • - {name} {isPacked && '✔'} + {name} {isPacked && '✅'}
    • ); ``` @@ -280,7 +288,7 @@ Here it is in action: function Item({ name, isPacked }) { return (
  • - {name} {isPacked && '✔'} + {name} {isPacked && '✅'}
    • ); } @@ -337,7 +345,7 @@ Gunakan pernyataan `if` untuk menetapkan kembali ekspresi JSX ke `itemContent` j ```js if (isPacked) { - itemContent = name + " ✔"; + itemContent = name + " ✅"; } ``` @@ -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 (
  • @@ -401,7 +409,7 @@ function Item({ name, isPacked }) { if (isPacked) { itemContent = ( - {name + " ✔"} + {name + " ✅"} ); } @@ -464,7 +472,7 @@ Gunakan operator kondisional (`cond ? a : b`) untuk me-*render* ❌ jika `isPack function Item({ name, isPacked }) { return (
  • - {name} {isPacked && '✔'} + {name} {isPacked && '✅'}
    • ); } @@ -502,7 +510,7 @@ export default function PackingList() { function Item({ name, isPacked }) { return (
  • - {name} {isPacked ? '✔' : '❌'} + {name} {isPacked ? '✅' : '❌'}
    • ); } diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md index 14dd6022b..668b8a549 100644 --- a/src/content/learn/describing-the-ui.md +++ b/src/content/learn/describing-the-ui.md @@ -327,7 +327,7 @@ Dalam contoh ini, operator `&&` JavaScript digunakan untuk me-*render* centang s function Item({ name, isPacked }) { return (
  • - {name} {isPacked && '✔'} + {name} {isPacked && '✅'}
    • ); } diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md index 682734bd4..5c1d768c6 100644 --- a/src/content/learn/manipulating-the-dom-with-refs.md +++ b/src/content/learn/manipulating-the-dom-with-refs.md @@ -124,35 +124,35 @@ export default function CatFriends() { <>
    • Tom
    • Maru
    • Jellylorum
      • @@ -245,9 +245,9 @@ export default function CatFriends() { return ( <>
        @@ -948,7 +948,7 @@ const catList = []; for (let i = 0; i < 10; i++) { catList.push({ id: i, - imageUrl: 'https://placekitten.com/250/200?image=' + i + imageUrl: 'https://loremflickr.com/250/200/cat?lock=' + i }); } @@ -1065,7 +1065,7 @@ const catList = []; for (let i = 0; i < 10; i++) { catList.push({ id: i, - imageUrl: 'https://placekitten.com/250/200?image=' + i + imageUrl: 'https://loremflickr.com/250/200/cat?lock=' + i }); } diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md index f34c382ed..2920e8643 100644 --- a/src/content/learn/react-compiler.md +++ b/src/content/learn/react-compiler.md @@ -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: -npx react-compiler-healthcheck@latest +npx react-compiler-healthcheck@experimental This script will: @@ -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. -npm install eslint-plugin-react-compiler +npm install eslint-plugin-react-compiler@experimental Then, add it to your eslint config: @@ -203,7 +203,7 @@ If you're starting a new project, you can enable the compiler on your entire cod ### Babel {/*usage-with-babel*/} -npm install babel-plugin-react-compiler +npm install babel-plugin-react-compiler@experimental The compiler includes a Babel plugin which you can use in your build pipeline to run the compiler. @@ -258,7 +258,7 @@ Next.js has an experimental configuration to enable the React Compiler. It autom - Install `babel-plugin-react-compiler` -npm install next@canary babel-plugin-react-compiler +npm install next@canary babel-plugin-react-compiler@experimental Then configure the experimental option in `next.config.js`: diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md index 7e0e6ebc4..29652bd58 100644 --- a/src/content/learn/synchronizing-with-effects.md +++ b/src/content/learn/synchronizing-with-effects.md @@ -629,7 +629,11 @@ Lihat contoh di bawah ini untuk cara menangani pola umum. ### Mengontrol *widget* di luar React {/*controlling-non-react-widgets*/} +<<<<<<< HEAD Terkadang Anda perlu menambahkan *widget* UI yang tidak ditulis untuk React. Sebagai contoh, katakanlah Anda menambahkan komponen peta ke halaman Anda. Komponen ini memiliki metode `setZoomLevel()`, dan Anda ingin menjaga tingkat *zoom* tetap sinkron dengan variabel *state* `zoomLevel` dalam kode React Anda. *Effect* Anda akan terlihat seperti ini: +======= +Sometimes you need to add UI widgets that aren't written in React. For example, let's say you're adding a map component to your page. It has a `setZoomLevel()` method, and you'd like to keep the zoom level in sync with a `zoomLevel` state variable in your React code. Your Effect would look similar to this: +>>>>>>> 1697ae89a3bbafd76998dd7496754e5358bc1e9a ```js useEffect(() => { diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md index caa3d1915..cad5052c7 100644 --- a/src/content/learn/thinking-in-react.md +++ b/src/content/learn/thinking-in-react.md @@ -265,11 +265,19 @@ Pada langkah sebelumnya, Anda menemukan dua bagian status dalam aplikasi ini: te Sekarang mari kita bahas strateginya: +<<<<<<< HEAD 1. **Identifikasi komponen yang menggunakan state:** * `ProductTable` perlu memfilter daftar produk berdasarkan status tersebut (teks pencarian dan nilai kotak centang). * `SearchBar` perlu menampilkan status tersebut (teks pencarian dan nilai kotak centang). 1. **Temukan induk yang sama:** Komponen induk pertama yang dimiliki oleh kedua komponen tersebut adalah `FilterableProductTable`. 2. **Tentukan di mana state berada**: Kita akan menyimpan teks filter dan nilai state kotak centang di `FilterableProductTable`. +======= +1. **Identify components that use state:** + * `ProductTable` needs to filter the product list based on that state (search text and checkbox value). + * `SearchBar` needs to display that state (search text and checkbox value). +2. **Find their common parent:** The first parent component both components share is `FilterableProductTable`. +3. **Decide where the state lives**: We'll keep the filter text and checked state values in `FilterableProductTable`. +>>>>>>> 1697ae89a3bbafd76998dd7496754e5358bc1e9a Jadi nilai state akan berada di dalam `FilterableProductTable`. diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 5496ee37c..9586221e6 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -1133,7 +1133,11 @@ Memanggil fungsi `setSquares` akan membuat React mengetahui bahwa state dari kom +<<<<<<< HEAD JavaScript mendukung [closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) yang berarti fungsi dalam (misalnya `handleClick`) memiliki akses ke variabel dan fungsi yang didefinisikan di fungsi luar (misalnya `Board`). Fungsi `handleClick` dapat membaca state `squares` dan memanggil metode `setSquares` karena keduanya didefinisikan di dalam fungsi `Board`. +======= +JavaScript supports [closures](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) which means an inner function (e.g. `handleClick`) has access to variables and functions defined in an outer function (e.g. `Board`). The `handleClick` function can read the `squares` state and call the `setSquares` method because they are both defined inside of the `Board` function. +>>>>>>> 1697ae89a3bbafd76998dd7496754e5358bc1e9a diff --git a/src/content/learn/updating-objects-in-state.md b/src/content/learn/updating-objects-in-state.md index ead94cc14..1fee259b7 100644 --- a/src/content/learn/updating-objects-in-state.md +++ b/src/content/learn/updating-objects-in-state.md @@ -58,6 +58,7 @@ Berikut adalah contoh kode yang menampung objek di dalam *state* untuk mereprese ```js import { useState } from 'react'; + export default function MovingDot() { const [position, setPosition] = useState({ x: 0, @@ -127,6 +128,7 @@ Perhatikan bahwa sekarang titik merah sudah mengikuti kursor Anda ketika Anda me ```js import { useState } from 'react'; + export default function MovingDot() { const [position, setPosition] = useState({ x: 0, @@ -377,7 +379,11 @@ Perhatikan bahwa `...` sintaksis *spread* sebenarnya adalah "dangkal"--benda-ben #### Menggunakan satu event handler untuk beberapa bidang {/*using-a-single-event-handler-for-multiple-fields*/} +<<<<<<< HEAD Anda juga bisa menggunakan tanda `[` dan `]` di dalam definisi objek untuk menentukan sebuah properti dengan nama yang dinamis. Berikut adalah contoh yang sama, tetapi dengan satu *event handler* daripada tiga yang berbeda: +======= +You can also use the `[` and `]` braces inside your object definition to specify a property with a dynamic name. Here is the same example, but with a single event handler instead of three different ones: +>>>>>>> 1697ae89a3bbafd76998dd7496754e5358bc1e9a diff --git a/src/content/learn/you-might-not-need-an-effect.md b/src/content/learn/you-might-not-need-an-effect.md index 5342a27ed..8edc11c99 100644 --- a/src/content/learn/you-might-not-need-an-effect.md +++ b/src/content/learn/you-might-not-need-an-effect.md @@ -408,9 +408,15 @@ function Game() { Ada dua masalah dengan kode ini. +<<<<<<< HEAD Salah satu masalahnya adalah hal ini sangat tidak efisien: komponen (dan turunannya) harus di-*render* ulang di antara setiap panggilan `set` dalam rantai. Dalam contoh di atas, dalam kasus terburuk (`setCard` → *render* → `setGoldCardCount` → *render* → `setRound` → *render* → `setIsGameOver` → *render*) ada tiga *rendering* ulang yang tidak diperlukan pada pohon di bawah ini. Meskipun tidak lambat, seiring berkembangnya kode Anda, Anda akan menghadapi kasus di mana "rantai" yang Anda tulis tidak sesuai dengan persyaratan baru. Bayangkan Anda menambahkan cara untuk menelusuri sejarah gerakan permainan. Anda akan melakukannya dengan memperbarui setiap variabel *state* ke nilai dari masa lalu. Namun, menyetel *state* `card` ke nilai dari masa lalu akan memicu rantai *Effect* lagi dan mengubah data yang Anda tampilkan. Kode seperti ini seringkali kaku dan rapuh. +======= +The first problem is that it is very inefficient: the component (and its children) have to re-render between each `set` call in the chain. In the example above, in the worst case (`setCard` → render → `setGoldCardCount` → render → `setRound` → render → `setIsGameOver` → render) there are three unnecessary re-renders of the tree below. + +The second problem is that even if it weren't slow, as your code evolves, you will run into cases where the "chain" you wrote doesn't fit the new requirements. Imagine you are adding a way to step through the history of the game moves. You'd do it by updating each state variable to a value from the past. However, setting the `card` state to a value from the past would trigger the Effect chain again and change the data you're showing. Such code is often rigid and fragile. +>>>>>>> 1697ae89a3bbafd76998dd7496754e5358bc1e9a Dalam hal ini, lebih baik menghitung apa yang Anda bisa selama *rendering*, dan sesuaikan *state* di *event handler*: diff --git a/src/content/reference/react-dom/components/index.md b/src/content/reference/react-dom/components/index.md index 5ed4cbd6d..d6b4ea8ad 100644 --- a/src/content/reference/react-dom/components/index.md +++ b/src/content/reference/react-dom/components/index.md @@ -32,7 +32,11 @@ Komponen-komponen tersebut spesial dalam React karena dengan mengoper *prop* `va ## Komponen Sumber Daya dan Metadata {/*resource-and-metadata-components*/} +<<<<<<< HEAD Komponen bawaan peramban ini memungkinkan Anda memuat sumber daya external atau menyematkan metadata ke dokumen: +======= +These built-in browser components let you load external resources or annotate the document with metadata: +>>>>>>> 1697ae89a3bbafd76998dd7496754e5358bc1e9a * [``](/reference/react-dom/components/link) * [``](/reference/react-dom/components/meta) diff --git a/src/content/reference/react-dom/preinitModule.md b/src/content/reference/react-dom/preinitModule.md index 996c5a2ed..5f9be6d50 100644 --- a/src/content/reference/react-dom/preinitModule.md +++ b/src/content/reference/react-dom/preinitModule.md @@ -51,7 +51,7 @@ The `preinitModule` function provides the browser with a hint that it should sta #### Parameters {/*parameters*/} -* `href`: a string. The URL of the module you want to download and exeucute. +* `href`: a string. The URL of the module you want to download and execute. * `options`: an object. It contains the following properties: * `as`: a required string. It must be `'script'`. * `crossOrigin`: a string. The [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) to use. Its possible values are `anonymous` and `use-credentials`. diff --git a/src/content/reference/react-dom/server/renderToPipeableStream.md b/src/content/reference/react-dom/server/renderToPipeableStream.md index 22103ab28..d31230d4f 100644 --- a/src/content/reference/react-dom/server/renderToPipeableStream.md +++ b/src/content/reference/react-dom/server/renderToPipeableStream.md @@ -48,6 +48,7 @@ Di sisi klien, panggil [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) * `reactNode`: Node React yang ingin anda *render* menjadi HTML. Contohnya, sebuah elemen JSX seperti ``. Ini diharapkan mewakili keseluruhan dokumen. Jadi, komponen `App` harus me-*render tag* ``. +<<<<<<< HEAD * `options` **(opsional)**: Objek berisi opsi *streaming*. * `bootstrapScriptContent` **(opsional)**: Jika ditentukan, *string* ini akan diletakkan di dalam *tag* `