fix: remove leftover merge conflict markers (#483)

Co-authored-by: Mohammad Reza Badri <[email protected]>

Author: PouriaDamavandi

scripts/deadLinkChecker.js

@@ -10,18 +10,7 @@ const PUBLIC_DIR = path.join(__dirname, '../public');
 const fileCache = new Map();
 const anchorMap = new Map(); // Map<filepath, Set<anchorId>>
 const contributorMap = new Map(); // Map<anchorId, URL>
-<<<<<<< HEAD
-<<<<<<< HEAD
-<<<<<<< HEAD
-=======
 const redirectMap = new Map(); // Map<source, destination>
->>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9
-=======
-const redirectMap = new Map(); // Map<source, destination>
->>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9
-=======
-const redirectMap = new Map(); // Map<source, destination>
->>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 let errorCodes = new Set();
 
 async function readFileWithCache(filePath) {
@@ -174,14 +163,6 @@ async function validateLink(link) {
     return {valid: true};
   }
 
-<<<<<<< HEAD
-<<<<<<< HEAD
-<<<<<<< HEAD
-=======
-=======
->>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9
-=======
->>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
   // Check for redirects
   if (redirectMap.has(urlWithoutAnchor)) {
     const redirectDestination = redirectMap.get(urlWithoutAnchor);
@@ -198,13 +179,6 @@ async function validateLink(link) {
     return validateLink(redirectedLink);
   }
 
-<<<<<<< HEAD
-<<<<<<< HEAD
->>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9
-=======
->>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9
-=======
->>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
   // Check if it's an error code link
   const errorCodeMatch = urlWithoutAnchor.match(/^\/errors\/(\d+)$/);
   if (errorCodeMatch) {
@@ -338,32 +312,12 @@ async function fetchErrorCodes() {
     }
     const codes = await response.json();
     errorCodes = new Set(Object.keys(codes));
-<<<<<<< HEAD
-<<<<<<< HEAD
-<<<<<<< HEAD
-    console.log(chalk.gray(`Fetched ${errorCodes.size} React error codes\n`));
-=======
-    console.log(chalk.gray(`Fetched ${errorCodes.size} React error codes`));
->>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9
-=======
-    console.log(chalk.gray(`Fetched ${errorCodes.size} React error codes`));
->>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9
-=======
     console.log(chalk.gray(`Fetched ${errorCodes.size} React error codes`));
->>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
   } catch (error) {
     throw new Error(`Failed to fetch error codes: ${error.message}`);
   }
 }
 
-<<<<<<< HEAD
-<<<<<<< HEAD
-<<<<<<< HEAD
-=======
-=======
->>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9
-=======
->>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 async function buildRedirectsMap() {
   try {
     const vercelConfigPath = path.join(__dirname, '../vercel.json');
@@ -388,30 +342,12 @@ async function buildRedirectsMap() {
   }
 }
 
-<<<<<<< HEAD
-<<<<<<< HEAD
->>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9
-=======
->>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9
-=======
->>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 async function main() {
   const files = getMarkdownFiles();
   console.log(chalk.gray(`Checking ${files.length} markdown files...`));
 
   await fetchErrorCodes();
-<<<<<<< HEAD
-<<<<<<< HEAD
-<<<<<<< HEAD
-=======
   await buildRedirectsMap();
->>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9
-=======
-  await buildRedirectsMap();
->>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9
-=======
-  await buildRedirectsMap();
->>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
   await buildContributorMap();
   await buildAnchorMap(files);
 
@@ -421,18 +357,7 @@ async function main() {
   const totalLinks = results.reduce((sum, r) => sum + r.totalLinks, 0);
 
   if (deadLinks.length > 0) {
-<<<<<<< HEAD
-<<<<<<< HEAD
-<<<<<<< HEAD
-=======
-    console.log('\n');
->>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9
-=======
-    console.log('\n');
->>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9
-=======
     console.log('\n');
->>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
     for (const link of deadLinks) {
       console.log(chalk.yellow(`${link.file}:${link.line}:${link.column}`));
       console.log(chalk.reset(`  Link text: ${link.text}`));

src/content/learn/add-react-to-an-existing-project.md

@@ -20,23 +20,11 @@ Let's say you have an existing web app at `example.com` built with another serve
 
 Here's how we recommend to set it up:
 
-1. **Build the React part of your app** using one of the [React-based frameworks](/learn/creating-a-react-app).
+1. **Build the React part of your app** using one of the [React-based frameworks](/learn/start-a-new-react-project).
 2. **Specify `/some-app` as the *base path*** in your framework's configuration (here's how: [Next.js](https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)).
 3. **Configure your server or a proxy** so that all requests under `/some-app/` are handled by your React app.
 
-<<<<<<< HEAD
-<<<<<<< HEAD
-<<<<<<< HEAD
-This ensures the React part of your app can [benefit from the best practices](/learn/creating-a-react-app#full-stack-frameworks) baked into those frameworks.
-=======
 This ensures the React part of your app can [benefit from the best practices](/learn/build-a-react-app-from-scratch#consider-using-a-framework) baked into those frameworks.
->>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9
-=======
-This ensures the React part of your app can [benefit from the best practices](/learn/build-a-react-app-from-scratch#consider-using-a-framework) baked into those frameworks.
->>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9
-=======
-This ensures the React part of your app can [benefit from the best practices](/learn/build-a-react-app-from-scratch#consider-using-a-framework) baked into those frameworks.
->>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 Many React-based frameworks are full-stack and let your React app take advantage of the server. However, you can use the same approach even if you can't or don't want to run JavaScript on the server. In that case, serve the HTML/CSS/JS export ([`next export` output](https://nextjs.org/docs/advanced-features/static-html-export) for Next.js, default for Gatsby) at `/some-app/` instead.
 
@@ -161,7 +149,7 @@ root.render(<NavigationBar />);
 
 Notice how the original HTML content from `index.html` is preserved, but your own `NavigationBar` React component now appears inside the `<nav id="navigation">` from your HTML. Read the [`createRoot` usage documentation](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react) to learn more about rendering React components inside an existing HTML page.
 
-When you adopt React in an existing project, it's common to start with small interactive components (like buttons), and then gradually keep "moving upwards" until eventually your entire page is built with React. If you ever reach that point, we recommend migrating to [a React framework](/learn/creating-a-react-app) right after to get the most out of React.
+When you adopt React in an existing project, it's common to start with small interactive components (like buttons), and then gradually keep "moving upwards" until eventually your entire page is built with React. If you ever reach that point, we recommend migrating to [a React framework](/learn/start-a-new-react-project) right after to get the most out of React.
 
 ## Using React Native in an existing native mobile app {/*using-react-native-in-an-existing-native-mobile-app*/}
 

src/content/learn/synchronizing-with-effects.md

@@ -732,19 +732,7 @@ Writing `fetch` calls inside Effects is a [popular way to fetch data](https://ww
 
 This list of downsides is not specific to React. It applies to fetching data on mount with any library. Like with routing, data fetching is not trivial to do well, so we recommend the following approaches:
 
-<<<<<<< HEAD
-<<<<<<< HEAD
-<<<<<<< HEAD
-- **If you use a [framework](/learn/creating-a-react-app#full-stack-frameworks), use its built-in data fetching mechanism.** Modern React frameworks have integrated data fetching mechanisms that are efficient and don't suffer from the above pitfalls.
-=======
 - **If you use a [framework](/learn/start-a-new-react-project#full-stack-frameworks), use its built-in data fetching mechanism.** Modern React frameworks have integrated data fetching mechanisms that are efficient and don't suffer from the above pitfalls.
->>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9
-=======
-- **If you use a [framework](/learn/start-a-new-react-project#full-stack-frameworks), use its built-in data fetching mechanism.** Modern React frameworks have integrated data fetching mechanisms that are efficient and don't suffer from the above pitfalls.
->>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9
-=======
-- **If you use a [framework](/learn/start-a-new-react-project#full-stack-frameworks), use its built-in data fetching mechanism.** Modern React frameworks have integrated data fetching mechanisms that are efficient and don't suffer from the above pitfalls.
->>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 - **Otherwise, consider using or building a client-side cache.** Popular open source solutions include [React Query](https://tanstack.com/query/latest), [useSWR](https://swr.vercel.app/), and [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview) You can build your own solution too, in which case you would use Effects under the hood, but add logic for deduplicating requests, caching responses, and avoiding network waterfalls (by preloading data or hoisting data requirements to routes).
 
 You can continue fetching data directly in Effects if neither of these approaches suit you.

src/content/learn/typescript.md

@@ -20,19 +20,7 @@ TypeScript is a popular way to add type definitions to JavaScript codebases. Out
 
 ## Installation {/*installation*/}
 
-<<<<<<< HEAD
-<<<<<<< HEAD
-<<<<<<< HEAD
-All [production-grade React frameworks](/learn/creating-a-react-app#full-stack-frameworks) offer support for using TypeScript. Follow the framework specific guide for installation:
-=======
 All [production-grade React frameworks](/learn/start-a-new-react-project#full-stack-frameworks) offer support for using TypeScript. Follow the framework specific guide for installation:
->>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9
-=======
-All [production-grade React frameworks](/learn/start-a-new-react-project#full-stack-frameworks) offer support for using TypeScript. Follow the framework specific guide for installation:
->>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9
-=======
-All [production-grade React frameworks](/learn/start-a-new-react-project#full-stack-frameworks) offer support for using TypeScript. Follow the framework specific guide for installation:
->>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 - [Next.js](https://nextjs.org/docs/app/building-your-application/configuring/typescript)
 - [Remix](https://remix.run/docs/en/1.19.2/guides/typescript)

src/content/learn/you-might-not-need-an-effect.md

@@ -26,19 +26,7 @@ There are two common cases in which you don't need Effects:
 * **You don't need Effects to transform data for rendering.** For example, let's say you want to filter a list before displaying it. You might feel tempted to write an Effect that updates a state variable when the list changes. However, this is inefficient. When you update the state, React will first call your component functions to calculate what should be on the screen. Then React will ["commit"](/learn/render-and-commit) these changes to the DOM, updating the screen. Then React will run your Effects. If your Effect *also* immediately updates the state, this restarts the whole process from scratch! To avoid the unnecessary render passes, transform all the data at the top level of your components. That code will automatically re-run whenever your props or state change.
 * **You don't need Effects to handle user events.** For example, let's say you want to send an `/api/buy` POST request and show a notification when the user buys a product. In the Buy button click event handler, you know exactly what happened. By the time an Effect runs, you don't know *what* the user did (for example, which button was clicked). This is why you'll usually handle user events in the corresponding event handlers.
 
-<<<<<<< HEAD
-<<<<<<< HEAD
-<<<<<<< HEAD
-You *do* need Effects to [synchronize](/learn/synchronizing-with-effects#what-are-effects-and-how-are-they-different-from-events) with external systems. For example, you can write an Effect that keeps a jQuery widget synchronized with the React state. You can also fetch data with Effects: for example, you can synchronize the search results with the current search query. Keep in mind that modern [frameworks](/learn/creating-a-react-app#full-stack-frameworks) provide more efficient built-in data fetching mechanisms than writing Effects directly in your components.
-=======
 You *do* need Effects to [synchronize](/learn/synchronizing-with-effects#what-are-effects-and-how-are-they-different-from-events) with external systems. For example, you can write an Effect that keeps a jQuery widget synchronized with the React state. You can also fetch data with Effects: for example, you can synchronize the search results with the current search query. Keep in mind that modern [frameworks](/learn/start-a-new-react-project#full-stack-frameworks) provide more efficient built-in data fetching mechanisms than writing Effects directly in your components.
->>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9
-=======
-You *do* need Effects to [synchronize](/learn/synchronizing-with-effects#what-are-effects-and-how-are-they-different-from-events) with external systems. For example, you can write an Effect that keeps a jQuery widget synchronized with the React state. You can also fetch data with Effects: for example, you can synchronize the search results with the current search query. Keep in mind that modern [frameworks](/learn/start-a-new-react-project#full-stack-frameworks) provide more efficient built-in data fetching mechanisms than writing Effects directly in your components.
->>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9
-=======
-You *do* need Effects to [synchronize](/learn/synchronizing-with-effects#what-are-effects-and-how-are-they-different-from-events) with external systems. For example, you can write an Effect that keeps a jQuery widget synchronized with the React state. You can also fetch data with Effects: for example, you can synchronize the search results with the current search query. Keep in mind that modern [frameworks](/learn/start-a-new-react-project#full-stack-frameworks) provide more efficient built-in data fetching mechanisms than writing Effects directly in your components.
->>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 To help you gain the right intuition, let's look at some common concrete examples!
 
@@ -769,19 +757,7 @@ This ensures that when your Effect fetches data, all responses except the last r
 
 Handling race conditions is not the only difficulty with implementing data fetching. You might also want to think about caching responses (so that the user can click Back and see the previous screen instantly), how to fetch data on the server (so that the initial server-rendered HTML contains the fetched content instead of a spinner), and how to avoid network waterfalls (so that a child can fetch data without waiting for every parent).
 
-<<<<<<< HEAD
-<<<<<<< HEAD
-<<<<<<< HEAD
-**These issues apply to any UI library, not just React. Solving them is not trivial, which is why modern [frameworks](/learn/creating-a-react-app#full-stack-frameworks) provide more efficient built-in data fetching mechanisms than fetching data in Effects.**
-=======
-**These issues apply to any UI library, not just React. Solving them is not trivial, which is why modern [frameworks](/learn/start-a-new-react-project#full-stack-frameworks) provide more efficient built-in data fetching mechanisms than fetching data in Effects.**
->>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9
-=======
-**These issues apply to any UI library, not just React. Solving them is not trivial, which is why modern [frameworks](/learn/start-a-new-react-project#full-stack-frameworks) provide more efficient built-in data fetching mechanisms than fetching data in Effects.**
->>>>>>> e07ac94bc2c1ffd817b13930977be93325e5bea9
-=======
 **These issues apply to any UI library, not just React. Solving them is not trivial, which is why modern [frameworks](/learn/start-a-new-react-project#full-stack-frameworks) provide more efficient built-in data fetching mechanisms than fetching data in Effects.**
->>>>>>> e9a7cb1b6ca1659b42d81555ecef0cd554b7a983
 
 If you don't use a framework (and don't want to build your own) but would like to make data fetching from Effects more ergonomic, consider extracting your fetching logic into a custom Hook like in this example: