🕷️ Crawler Inspector

URL Lookup

Direct Parameter Lookup

Raw Queries and Responses

1. Shard Calculation

Query:

Response:

Calculated Shard: 182 (from laksa127)

2. Crawled Status Check

Query:

curl -X POST \
  'http://laksa182.int.ahrefs:8124/' \
  -H 'Content-Type: text/plain' \
  -H 'X-ClickHouse-Database: crawler3' \
  -H 'Authorization: Basic YXBpOg==' \
  -d 'SELECT getAhrefsURLFromUnparsed(src_unparsed) AS found_url, ifNull(toUnixTimestamp(download_stamp), 0) AS crawl_time, ifNull(toUnixTimestamp(props_url_first_seen), 0) AS first_indexed_time, download_http_code AS http_code, src_unparsed AS src_unparsed, src_root_hash AS src_root_hash, history_drop_reason AS history_drop_reason, meta_title AS meta_title, meta_descriptions AS meta_descriptions, attrs_boilerpipe_text AS attrs_boilerpipe_text, attrs_markdown AS attrs_markdown, attrs_readable_markdown AS attrs_readable_markdown, meta_canonical AS meta_canonical FROM crawler3.page_info_local FINAL PREWHERE (src_root_hash, src_unparsed) IN ((getAhrefsRootHashFromUnparsed(getAhrefsUnparsedNoserviceFromURL(\'https://react.dev/learn/creating-a-react-app\')), getAhrefsUnparsedNoserviceFromURL(\'https://react.dev/learn/creating-a-react-app\'))) FORMAT JSONEachRow'

Response:

{"found_url":"https:\/\/react.dev\/learn\/creating-a-react-app","crawl_time":1775713176,"first_indexed_time":1739563343,"http_code":200,"src_unparsed":"dev,react!\/learn\/creating-a-react-app s443","src_root_hash":"17140691864557838982","history_drop_reason":null,"meta_title":"Creating a React App – React","meta_descriptions":[],"attrs_boilerpipe_text":"If you want to build a new app or website with React, we recommend starting with a framework.\nIf your app has constraints not well-served by existing frameworks, you prefer to build your own framework, or you just want to learn the basics of a React app, you can\nbuild a React app from scratch\n.\nFull-stack frameworks\nThese recommended frameworks support all the features you need to deploy and scale your app in production. They have integrated the latest React features and take advantage of React’s architecture.\nNote\nFull-stack frameworks do not require a server.\nAll the frameworks on this page support client-side rendering (\nCSR\n), single-page apps (\nSPA\n), and static-site generation (\nSSG\n). These apps can be deployed to a\nCDN\nor static hosting service without a server. Additionally, these frameworks allow you to add server-side rendering on a per-route basis, when it makes sense for your use case.\nThis allows you to start with a client-only app, and if your needs change later, you can opt-in to using server features on individual routes without rewriting your app. See your framework’s documentation for configuring the rendering strategy.\nNext.js (App Router)\nNext.js’s App Router\nis a React framework that takes full advantage of React’s architecture to enable full-stack React apps.\nTerminal\nnpx create-next-app@latest\nNext.js is maintained by\nVercel\n. You can\ndeploy a Next.js app\nto any hosting provider that supports Node.js or Docker containers, or to your own server. Next.js also supports\nstatic export\nwhich doesn’t require a server.\nReact Router (v7)\nReact Router\nis the most popular routing library for React and can be paired with Vite to create a full-stack React framework\n. It emphasizes standard Web APIs and has several\nready to deploy templates\nfor various JavaScript runtimes and platforms.\nTo create a new React Router framework project, run:\nTerminal\nnpx create-react-router@latest\nReact Router is maintained by\nShopify\n.\nExpo (for native apps)\nExpo\nis a React framework that lets you create universal Android, iOS, and web apps with truly native UIs.\nIt provides an SDK for\nReact Native\nthat makes the native parts easier to use. To create a new Expo project, run:\nTerminal\nnpx create-expo-app@latest\nIf you’re new to Expo, check out the\nExpo tutorial\n.\nExpo is maintained by\nExpo (the company)\n. Building apps with Expo is free, and you can submit them to the Google and Apple app stores without restrictions. Expo additionally provides opt-in paid cloud services.\nOther frameworks\nThere are other up-and-coming frameworks that are working towards our full stack React vision:\nTanStack Start (Beta)\n: TanStack Start is a full-stack React framework powered by TanStack Router. It provides a full-document SSR, streaming, server functions, bundling, and more using tools like Nitro and Vite.\nRedwoodSDK\n: Redwood is a full stack React framework with lots of pre-installed packages and configuration that makes it easy to build full-stack web applications.\nDeep Dive\nWhich features make up the React team’s full-stack architecture vision?\nNext.js’s App Router bundler fully implements the official\nReact Server Components specification\n. This lets you mix build-time, server-only, and interactive components in a single React tree.\nFor example, you can write a server-only React component as an\nasync\nfunction that reads from a database or from a file. Then you can pass data down from it to your interactive components:\n\/\/ This component runs *only* on the server (or during the build).\nasync\nfunction\nTalks\n(\n{\nconfId\n}\n)\n{\n\/\/ 1. You're on the server, so you can talk to your data layer. API endpoint not required.\nconst\ntalks\n=\nawait\ndb\n.\nTalks\n.\nfindAll\n(\n{\nconfId\n}\n)\n;\n\/\/ 2. Add any amount of rendering logic. It won't make your JavaScript bundle larger.\nconst\nvideos\n=\ntalks\n.\nmap\n(\ntalk\n=>\ntalk\n.\nvideo\n)\n;\n\/\/ 3. Pass the data down to the components that will run in the browser.\nreturn\n<\nSearchableVideoList\nvideos\n=\n{\nvideos\n}\n\/>\n;\n}\nNext.js’s App Router also integrates\ndata fetching with Suspense\n. This lets you specify a loading state (like a skeleton placeholder) for different parts of your user interface directly in your React tree:\n<\nSuspense\nfallback\n=\n{\n<\nTalksLoading\n\/>\n}\n>\n<\nTalks\nconfId\n=\n{\nconf\n.\nid\n}\n\/>\n<\/\nSuspense\n>\nServer Components and Suspense are React features rather than Next.js features. However, adopting them at the framework level requires buy-in and non-trivial implementation work. At the moment, the Next.js App Router is the most complete implementation. The React team is working with bundler developers to make these features easier to implement in the next generation of frameworks.\nStart From Scratch\nIf your app has constraints not well-served by existing frameworks, you prefer to build your own framework, or you just want to learn the basics of a React app, there are other options available for starting a React project from scratch.\nStarting from scratch gives you more flexibility, but does require that you make choices on which tools to use for routing, data fetching, and other common usage patterns.  It’s a lot like building your own framework, instead of using a framework that already exists. The\nframeworks we recommend\nhave built-in solutions for these problems.\nIf you want to build your own solutions, see our guide to\nbuild a React app from Scratch\nfor instructions on how to set up a new React project starting with a build tool like\nVite\n,\nParcel\n, or\nRSbuild\n.\nIf you’re a framework author interested in being included on this page,\nplease let us know\n.","attrs_markdown":"[![logo by @sawaratsuki1004](https:\/\/react.dev\/_next\/image?url=%2Fimages%2Fuwu.png&w=128&q=75)](https:\/\/react.dev\/)\n\n[React](https:\/\/react.dev\/)\n\n[v19.2](https:\/\/react.dev\/versions)\n\nSearch`⌘``Ctrl``K`\n\n[Learn](https:\/\/react.dev\/learn)\n\n[Reference](https:\/\/react.dev\/reference\/react)\n\n[Community](https:\/\/react.dev\/community)\n\n[Blog](https:\/\/react.dev\/blog)\n\n- [Quick Start](https:\/\/react.dev\/learn \"Quick Start\")\n  - [Tutorial: Tic-Tac-Toe](https:\/\/react.dev\/learn\/tutorial-tic-tac-toe \"Tutorial: Tic-Tac-Toe\")\n  - [Thinking in React](https:\/\/react.dev\/learn\/thinking-in-react \"Thinking in React\")\n- [Installation](https:\/\/react.dev\/learn\/installation \"Installation\")\n  - [Creating a React App](https:\/\/react.dev\/learn\/creating-a-react-app \"Creating a React App\")\n  - [Build a React App from Scratch](https:\/\/react.dev\/learn\/build-a-react-app-from-scratch \"Build a React App from Scratch\")\n  - [Add React to an Existing Project](https:\/\/react.dev\/learn\/add-react-to-an-existing-project \"Add React to an Existing Project\")\n- [Setup](https:\/\/react.dev\/learn\/setup \"Setup\")\n  - [Editor Setup](https:\/\/react.dev\/learn\/editor-setup \"Editor Setup\")\n  - [Using TypeScript](https:\/\/react.dev\/learn\/typescript \"Using TypeScript\")\n  - [React Developer Tools](https:\/\/react.dev\/learn\/react-developer-tools \"React Developer Tools\")\n- [React Compiler](https:\/\/react.dev\/learn\/react-compiler \"React Compiler\")\n  - [Introduction](https:\/\/react.dev\/learn\/react-compiler\/introduction \"Introduction\")\n  - [Installation](https:\/\/react.dev\/learn\/react-compiler\/installation \"Installation\")\n  - [Incremental Adoption](https:\/\/react.dev\/learn\/react-compiler\/incremental-adoption \"Incremental Adoption\")\n  - [Debugging and Troubleshooting](https:\/\/react.dev\/learn\/react-compiler\/debugging \"Debugging and Troubleshooting\")\n- [Describing the UI](https:\/\/react.dev\/learn\/describing-the-ui \"Describing the UI\")\n  - [Your First Component](https:\/\/react.dev\/learn\/your-first-component \"Your First Component\")\n  - [Importing and Exporting Components](https:\/\/react.dev\/learn\/importing-and-exporting-components \"Importing and Exporting Components\")\n  - [Writing Markup with JSX](https:\/\/react.dev\/learn\/writing-markup-with-jsx \"Writing Markup with JSX\")\n  - [JavaScript in JSX with Curly Braces](https:\/\/react.dev\/learn\/javascript-in-jsx-with-curly-braces \"JavaScript in JSX with Curly Braces\")\n  - [Passing Props to a Component](https:\/\/react.dev\/learn\/passing-props-to-a-component \"Passing Props to a Component\")\n  - [Conditional Rendering](https:\/\/react.dev\/learn\/conditional-rendering \"Conditional Rendering\")\n  - [Rendering Lists](https:\/\/react.dev\/learn\/rendering-lists \"Rendering Lists\")\n  - [Keeping Components Pure](https:\/\/react.dev\/learn\/keeping-components-pure \"Keeping Components Pure\")\n  - [Your UI as a Tree](https:\/\/react.dev\/learn\/understanding-your-ui-as-a-tree \"Your UI as a Tree\")\n- [Adding Interactivity](https:\/\/react.dev\/learn\/adding-interactivity \"Adding Interactivity\")\n  - [Responding to Events](https:\/\/react.dev\/learn\/responding-to-events \"Responding to Events\")\n  - [State: A Component's Memory](https:\/\/react.dev\/learn\/state-a-components-memory \"State: A Component's Memory\")\n  - [Render and Commit](https:\/\/react.dev\/learn\/render-and-commit \"Render and Commit\")\n  - [State as a Snapshot](https:\/\/react.dev\/learn\/state-as-a-snapshot \"State as a Snapshot\")\n  - [Queueing a Series of State Updates](https:\/\/react.dev\/learn\/queueing-a-series-of-state-updates \"Queueing a Series of State Updates\")\n  - [Updating Objects in State](https:\/\/react.dev\/learn\/updating-objects-in-state \"Updating Objects in State\")\n  - [Updating Arrays in State](https:\/\/react.dev\/learn\/updating-arrays-in-state \"Updating Arrays in State\")\n- [Managing State](https:\/\/react.dev\/learn\/managing-state \"Managing State\")\n  - [Reacting to Input with State](https:\/\/react.dev\/learn\/reacting-to-input-with-state \"Reacting to Input with State\")\n  - [Choosing the State Structure](https:\/\/react.dev\/learn\/choosing-the-state-structure \"Choosing the State Structure\")\n  - [Sharing State Between Components](https:\/\/react.dev\/learn\/sharing-state-between-components \"Sharing State Between Components\")\n  - [Preserving and Resetting State](https:\/\/react.dev\/learn\/preserving-and-resetting-state \"Preserving and Resetting State\")\n  - [Extracting State Logic into a Reducer](https:\/\/react.dev\/learn\/extracting-state-logic-into-a-reducer \"Extracting State Logic into a Reducer\")\n  - [Passing Data Deeply with Context](https:\/\/react.dev\/learn\/passing-data-deeply-with-context \"Passing Data Deeply with Context\")\n  - [Scaling Up with Reducer and Context](https:\/\/react.dev\/learn\/scaling-up-with-reducer-and-context \"Scaling Up with Reducer and Context\")\n- [Escape Hatches](https:\/\/react.dev\/learn\/escape-hatches \"Escape Hatches\")\n  - [Referencing Values with Refs](https:\/\/react.dev\/learn\/referencing-values-with-refs \"Referencing Values with Refs\")\n  - [Manipulating the DOM with Refs](https:\/\/react.dev\/learn\/manipulating-the-dom-with-refs \"Manipulating the DOM with Refs\")\n  - [Synchronizing with Effects](https:\/\/react.dev\/learn\/synchronizing-with-effects \"Synchronizing with Effects\")\n  - [You Might Not Need an Effect](https:\/\/react.dev\/learn\/you-might-not-need-an-effect \"You Might Not Need an Effect\")\n  - [Lifecycle of Reactive Effects](https:\/\/react.dev\/learn\/lifecycle-of-reactive-effects \"Lifecycle of Reactive Effects\")\n  - [Separating Events from Effects](https:\/\/react.dev\/learn\/separating-events-from-effects \"Separating Events from Effects\")\n  - [Removing Effect Dependencies](https:\/\/react.dev\/learn\/removing-effect-dependencies \"Removing Effect Dependencies\")\n  - [Reusing Logic with Custom Hooks](https:\/\/react.dev\/learn\/reusing-logic-with-custom-hooks \"Reusing Logic with Custom Hooks\")\n\n[Learn React](https:\/\/react.dev\/learn)\n\n[Installation](https:\/\/react.dev\/learn\/installation)\n\nCopy pageCopy\n# Creating a React App\n\nIf you want to build a new app or website with React, we recommend starting with a framework.\n\nIf your app has constraints not well-served by existing frameworks, you prefer to build your own framework, or you just want to learn the basics of a React app, you can [build a React app from scratch](https:\/\/react.dev\/learn\/build-a-react-app-from-scratch).\n\n## Full-stack frameworks\nThese recommended frameworks support all the features you need to deploy and scale your app in production. They have integrated the latest React features and take advantage of React’s architecture.\n\n### Note\n#### Full-stack frameworks do not require a server.\nAll the frameworks on this page support client-side rendering ([CSR](https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/CSR)), single-page apps ([SPA](https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/SPA)), and static-site generation ([SSG](https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/SSG)). These apps can be deployed to a [CDN](https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/CDN) or static hosting service without a server. Additionally, these frameworks allow you to add server-side rendering on a per-route basis, when it makes sense for your use case.\n\nThis allows you to start with a client-only app, and if your needs change later, you can opt-in to using server features on individual routes without rewriting your app. See your framework’s documentation for configuring the rendering strategy.\n### Next.js (App Router)\n**[Next.js’s App Router](https:\/\/nextjs.org\/docs) is a React framework that takes full advantage of React’s architecture to enable full-stack React apps.**\n\nTerminal\n\nCopy\n```\nnpx create-next-app@latest\n```\n\nNext.js is maintained by [Vercel](https:\/\/vercel.com\/). You can [deploy a Next.js app](https:\/\/nextjs.org\/docs\/app\/building-your-application\/deploying) to any hosting provider that supports Node.js or Docker containers, or to your own server. Next.js also supports [static export](https:\/\/nextjs.org\/docs\/app\/building-your-application\/deploying\/static-exports) which doesn’t require a server.\n\n### React Router (v7)\n**[React Router](https:\/\/reactrouter.com\/start\/framework\/installation) is the most popular routing library for React and can be paired with Vite to create a full-stack React framework**. It emphasizes standard Web APIs and has several [ready to deploy templates](https:\/\/github.com\/remix-run\/react-router-templates) for various JavaScript runtimes and platforms.\n\nTo create a new React Router framework project, run:\n\nTerminal\n\nCopy\n```\nnpx create-react-router@latest\n```\n\nReact Router is maintained by [Shopify](https:\/\/www.shopify.com\/).\n\n### Expo (for native apps)\n**[Expo](https:\/\/expo.dev\/) is a React framework that lets you create universal Android, iOS, and web apps with truly native UIs.** It provides an SDK for [React Native](https:\/\/reactnative.dev\/) that makes the native parts easier to use. To create a new Expo project, run:\n\nTerminal\n\nCopy\n```\nnpx create-expo-app@latest\n```\n\nIf you’re new to Expo, check out the [Expo tutorial](https:\/\/docs.expo.dev\/tutorial\/introduction\/).\n\nExpo is maintained by [Expo (the company)](https:\/\/expo.dev\/about). Building apps with Expo is free, and you can submit them to the Google and Apple app stores without restrictions. Expo additionally provides opt-in paid cloud services.\n\n## Other frameworks\nThere are other up-and-coming frameworks that are working towards our full stack React vision:\n\n- [TanStack Start (Beta)](https:\/\/tanstack.com\/start\/): TanStack Start is a full-stack React framework powered by TanStack Router. It provides a full-document SSR, streaming, server functions, bundling, and more using tools like Nitro and Vite.\n- [RedwoodSDK](https:\/\/rwsdk.com\/): Redwood is a full stack React framework with lots of pre-installed packages and configuration that makes it easy to build full-stack web applications.\n\n##### Deep Dive\n#### Which features make up the React team’s full-stack architecture vision?\nShow Details\n\nNext.js’s App Router bundler fully implements the official [React Server Components specification](https:\/\/github.com\/reactjs\/rfcs\/blob\/main\/text\/0188-server-components.md). This lets you mix build-time, server-only, and interactive components in a single React tree.\n\nFor example, you can write a server-only React component as an `async` function that reads from a database or from a file. Then you can pass data down from it to your interactive components:\n```\n\/\/ This component runs *only* on the server (or during the build).async function Talks({ confId }) {\/\/ 1. You're on the server, so you can talk to your data layer. API endpoint not required.const talks = await db.Talks.findAll({ confId });\/\/ 2. Add any amount of rendering logic. It won't make your JavaScript bundle larger.const videos = talks.map(talk => talk.video);\/\/ 3. Pass the data down to the components that will run in the browser.return <SearchableVideoList videos={videos} \/>;}\n```\nNext.js’s App Router also integrates [data fetching with Suspense](https:\/\/react.dev\/blog\/2022\/03\/29\/react-v18#suspense-in-data-frameworks). This lets you specify a loading state (like a skeleton placeholder) for different parts of your user interface directly in your React tree:\n```\n<Suspense fallback={<TalksLoading \/>}><Talks confId={conf.id} \/><\/Suspense>\n```\nServer Components and Suspense are React features rather than Next.js features. However, adopting them at the framework level requires buy-in and non-trivial implementation work. At the moment, the Next.js App Router is the most complete implementation. The React team is working with bundler developers to make these features easier to implement in the next generation of frameworks.\n## Start From Scratch\nIf your app has constraints not well-served by existing frameworks, you prefer to build your own framework, or you just want to learn the basics of a React app, there are other options available for starting a React project from scratch.\n\nStarting from scratch gives you more flexibility, but does require that you make choices on which tools to use for routing, data fetching, and other common usage patterns. It’s a lot like building your own framework, instead of using a framework that already exists. The [frameworks we recommend](https:\/\/react.dev\/learn\/creating-a-react-app#full-stack-frameworks) have built-in solutions for these problems.\n\nIf you want to build your own solutions, see our guide to [build a React app from Scratch](https:\/\/react.dev\/learn\/build-a-react-app-from-scratch) for instructions on how to set up a new React project starting with a build tool like [Vite](https:\/\/vite.dev\/), [Parcel](https:\/\/parceljs.org\/), or [RSbuild](https:\/\/rsbuild.dev\/).\n***\n*If you’re a framework author interested in being included on this page, [please let us know](https:\/\/github.com\/reactjs\/react.dev\/issues\/new?assignees=&labels=type%3A+framework&projects=&template=3-framework.yml&title=%5BFramework%5D%3A+).*\n\n[PreviousInstallation](https:\/\/react.dev\/learn\/installation)\n\n[NextBuild a React App from Scratch](https:\/\/react.dev\/learn\/build-a-react-app-from-scratch)\n\n***\nCopyright © Meta Platforms, Inc\n\nno uwu plz\n\nuwu?\n\nLogo by[@sawaratsuki1004](https:\/\/twitter.com\/sawaratsuki1004)\n\n[Learn React](https:\/\/react.dev\/learn)\n\n[Quick Start](https:\/\/react.dev\/learn)\n\n[Installation](https:\/\/react.dev\/learn\/installation)\n\n[Describing the UI](https:\/\/react.dev\/learn\/describing-the-ui)\n\n[Adding Interactivity](https:\/\/react.dev\/learn\/adding-interactivity)\n\n[Managing State](https:\/\/react.dev\/learn\/managing-state)\n\n[Escape Hatches](https:\/\/react.dev\/learn\/escape-hatches)\n\n[API Reference](https:\/\/react.dev\/reference\/react)\n\n[React APIs](https:\/\/react.dev\/reference\/react)\n\n[React DOM APIs](https:\/\/react.dev\/reference\/react-dom)\n\n[Community](https:\/\/react.dev\/community)\n\n[Code of Conduct](https:\/\/github.com\/facebook\/react\/blob\/main\/CODE_OF_CONDUCT.md)\n\n[Meet the Team](https:\/\/react.dev\/community\/team)\n\n[Docs Contributors](https:\/\/react.dev\/community\/docs-contributors)\n\n[Acknowledgements](https:\/\/react.dev\/community\/acknowledgements)\n\nMore\n\n[Blog](https:\/\/react.dev\/blog)\n\n[React Native](https:\/\/reactnative.dev\/)\n\n[Privacy](https:\/\/opensource.facebook.com\/legal\/privacy)\n\n[Terms](https:\/\/opensource.fb.com\/legal\/terms\/)\n\n## On this page\n- [Overview](https:\/\/react.dev\/learn\/creating-a-react-app)\n- [Full-stack frameworks](https:\/\/react.dev\/learn\/creating-a-react-app#full-stack-frameworks)\n- [Next.js (App Router)](https:\/\/react.dev\/learn\/creating-a-react-app#nextjs-app-router)\n- [React Router (v7)](https:\/\/react.dev\/learn\/creating-a-react-app#react-router-v7)\n- [Expo (for native apps)](https:\/\/react.dev\/learn\/creating-a-react-app#expo)\n- [Other frameworks](https:\/\/react.dev\/learn\/creating-a-react-app#other-frameworks)\n- [Start From Scratch](https:\/\/react.dev\/learn\/creating-a-react-app#start-from-scratch)","attrs_readable_markdown":"If you want to build a new app or website with React, we recommend starting with a framework.\n\nIf your app has constraints not well-served by existing frameworks, you prefer to build your own framework, or you just want to learn the basics of a React app, you can [build a React app from scratch](https:\/\/react.dev\/learn\/build-a-react-app-from-scratch).\n\n## Full-stack frameworks\nThese recommended frameworks support all the features you need to deploy and scale your app in production. They have integrated the latest React features and take advantage of React’s architecture.\n\n### Note\n#### Full-stack frameworks do not require a server.\nAll the frameworks on this page support client-side rendering ([CSR](https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/CSR)), single-page apps ([SPA](https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/SPA)), and static-site generation ([SSG](https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/SSG)). These apps can be deployed to a [CDN](https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/CDN) or static hosting service without a server. Additionally, these frameworks allow you to add server-side rendering on a per-route basis, when it makes sense for your use case.\n\nThis allows you to start with a client-only app, and if your needs change later, you can opt-in to using server features on individual routes without rewriting your app. See your framework’s documentation for configuring the rendering strategy.\n### Next.js (App Router)\n**[Next.js’s App Router](https:\/\/nextjs.org\/docs) is a React framework that takes full advantage of React’s architecture to enable full-stack React apps.**\n\nTerminal\n```\nnpx create-next-app@latest\n```\n\nNext.js is maintained by [Vercel](https:\/\/vercel.com\/). You can [deploy a Next.js app](https:\/\/nextjs.org\/docs\/app\/building-your-application\/deploying) to any hosting provider that supports Node.js or Docker containers, or to your own server. Next.js also supports [static export](https:\/\/nextjs.org\/docs\/app\/building-your-application\/deploying\/static-exports) which doesn’t require a server.\n\n### React Router (v7)\n**[React Router](https:\/\/reactrouter.com\/start\/framework\/installation) is the most popular routing library for React and can be paired with Vite to create a full-stack React framework**. It emphasizes standard Web APIs and has several [ready to deploy templates](https:\/\/github.com\/remix-run\/react-router-templates) for various JavaScript runtimes and platforms.\n\nTo create a new React Router framework project, run:\n\nTerminal\n```\nnpx create-react-router@latest\n```\n\nReact Router is maintained by [Shopify](https:\/\/www.shopify.com\/).\n\n### Expo (for native apps)\n**[Expo](https:\/\/expo.dev\/) is a React framework that lets you create universal Android, iOS, and web apps with truly native UIs.** It provides an SDK for [React Native](https:\/\/reactnative.dev\/) that makes the native parts easier to use. To create a new Expo project, run:\n\nTerminal\n```\nnpx create-expo-app@latest\n```\n\nIf you’re new to Expo, check out the [Expo tutorial](https:\/\/docs.expo.dev\/tutorial\/introduction\/).\n\nExpo is maintained by [Expo (the company)](https:\/\/expo.dev\/about). Building apps with Expo is free, and you can submit them to the Google and Apple app stores without restrictions. Expo additionally provides opt-in paid cloud services.\n\n## Other frameworks\nThere are other up-and-coming frameworks that are working towards our full stack React vision:\n\n- [TanStack Start (Beta)](https:\/\/tanstack.com\/start\/): TanStack Start is a full-stack React framework powered by TanStack Router. It provides a full-document SSR, streaming, server functions, bundling, and more using tools like Nitro and Vite.\n- [RedwoodSDK](https:\/\/rwsdk.com\/): Redwood is a full stack React framework with lots of pre-installed packages and configuration that makes it easy to build full-stack web applications.\n\n##### Deep Dive\nWhich features make up the React team’s full-stack architecture vision?\n\nNext.js’s App Router bundler fully implements the official [React Server Components specification](https:\/\/github.com\/reactjs\/rfcs\/blob\/main\/text\/0188-server-components.md). This lets you mix build-time, server-only, and interactive components in a single React tree.\n\nFor example, you can write a server-only React component as an `async` function that reads from a database or from a file. Then you can pass data down from it to your interactive components:\n```\n\/\/ This component runs *only* on the server (or during the build).async function Talks({ confId }) {\/\/ 1. You're on the server, so you can talk to your data layer. API endpoint not required.const talks = await db.Talks.findAll({ confId });\/\/ 2. Add any amount of rendering logic. It won't make your JavaScript bundle larger.const videos = talks.map(talk => talk.video);\/\/ 3. Pass the data down to the components that will run in the browser.return <SearchableVideoList videos={videos} \/>;}\n```\nNext.js’s App Router also integrates [data fetching with Suspense](https:\/\/react.dev\/blog\/2022\/03\/29\/react-v18#suspense-in-data-frameworks). This lets you specify a loading state (like a skeleton placeholder) for different parts of your user interface directly in your React tree:\n```\n<Suspense fallback={<TalksLoading \/>}><Talks confId={conf.id} \/><\/Suspense>\n```\nServer Components and Suspense are React features rather than Next.js features. However, adopting them at the framework level requires buy-in and non-trivial implementation work. At the moment, the Next.js App Router is the most complete implementation. The React team is working with bundler developers to make these features easier to implement in the next generation of frameworks.\n## Start From Scratch\nIf your app has constraints not well-served by existing frameworks, you prefer to build your own framework, or you just want to learn the basics of a React app, there are other options available for starting a React project from scratch.\n\nStarting from scratch gives you more flexibility, but does require that you make choices on which tools to use for routing, data fetching, and other common usage patterns. It’s a lot like building your own framework, instead of using a framework that already exists. The [frameworks we recommend](https:\/\/react.dev\/learn\/creating-a-react-app#full-stack-frameworks) have built-in solutions for these problems.\n\nIf you want to build your own solutions, see our guide to [build a React app from Scratch](https:\/\/react.dev\/learn\/build-a-react-app-from-scratch) for instructions on how to set up a new React project starting with a build tool like [Vite](https:\/\/vite.dev\/), [Parcel](https:\/\/parceljs.org\/), or [RSbuild](https:\/\/rsbuild.dev\/).\n***\n*If you’re a framework author interested in being included on this page, [please let us know](https:\/\/github.com\/reactjs\/react.dev\/issues\/new?assignees=&labels=type%3A+framework&projects=&template=3-framework.yml&title=%5BFramework%5D%3A+).*","meta_canonical":null}

3. Robots.txt Check

Query:

Response:

4. Spam/Ban Check

Query:

Response:

5. Seen Status Check

ℹ️ Skipped - page is already crawled

📄

INDEXABLE

✅

CRAWLED

2 hours ago

🤖

ROBOTS ALLOWED

Page Info Filters

Filter	Status	Condition	Details
HTTP status	PASS	`download_http_code = 200`	HTTP 200
Age cutoff	PASS	`download_stamp > now() - 6 MONTH`	0 months ago
History drop	PASS	`isNull(history_drop_reason)`	No drop reason
Spam/ban	PASS	`fh_dont_index != 1 AND ml_spam_score = 0`	ml_spam_score=0
Canonical	PASS	`meta_canonical IS NULL OR = '' OR = src_unparsed`	Not set

Page Details

Property	Value
URL	https://react.dev/learn/creating-a-react-app
Last Crawled	2026-04-09 05:39:36 (2 hours ago)
First Indexed	2025-02-14 20:02:23 (1 year ago)
HTTP Status Code	200
Meta Title	Creating a React App – React
Meta Description	null
Meta Canonical	null
Boilerpipe Text	If you want to build a new app or website with React, we recommend starting with a framework. If your app has constraints not well-served by existing frameworks, you prefer to build your own framework, or you just want to learn the basics of a React app, you can build a React app from scratch . Full-stack frameworks These recommended frameworks support all the features you need to deploy and scale your app in production. They have integrated the latest React features and take advantage of React’s architecture. Note Full-stack frameworks do not require a server. All the frameworks on this page support client-side rendering ( CSR ), single-page apps ( SPA ), and static-site generation ( SSG ). These apps can be deployed to a CDN or static hosting service without a server. Additionally, these frameworks allow you to add server-side rendering on a per-route basis, when it makes sense for your use case. This allows you to start with a client-only app, and if your needs change later, you can opt-in to using server features on individual routes without rewriting your app. See your framework’s documentation for configuring the rendering strategy. Next.js (App Router) Next.js’s App Router is a React framework that takes full advantage of React’s architecture to enable full-stack React apps. Terminal npx create-next-app@latest Next.js is maintained by Vercel . You can deploy a Next.js app to any hosting provider that supports Node.js or Docker containers, or to your own server. Next.js also supports static export which doesn’t require a server. React Router (v7) React Router is the most popular routing library for React and can be paired with Vite to create a full-stack React framework . It emphasizes standard Web APIs and has several ready to deploy templates for various JavaScript runtimes and platforms. To create a new React Router framework project, run: Terminal npx create-react-router@latest React Router is maintained by Shopify . Expo (for native apps) Expo is a React framework that lets you create universal Android, iOS, and web apps with truly native UIs. It provides an SDK for React Native that makes the native parts easier to use. To create a new Expo project, run: Terminal npx create-expo-app@latest If you’re new to Expo, check out the Expo tutorial . Expo is maintained by Expo (the company) . Building apps with Expo is free, and you can submit them to the Google and Apple app stores without restrictions. Expo additionally provides opt-in paid cloud services. Other frameworks There are other up-and-coming frameworks that are working towards our full stack React vision: TanStack Start (Beta) : TanStack Start is a full-stack React framework powered by TanStack Router. It provides a full-document SSR, streaming, server functions, bundling, and more using tools like Nitro and Vite. RedwoodSDK : Redwood is a full stack React framework with lots of pre-installed packages and configuration that makes it easy to build full-stack web applications. Deep Dive Which features make up the React team’s full-stack architecture vision? Next.js’s App Router bundler fully implements the official React Server Components specification . This lets you mix build-time, server-only, and interactive components in a single React tree. For example, you can write a server-only React component as an async function that reads from a database or from a file. Then you can pass data down from it to your interactive components: // This component runs only on the server (or during the build). async function Talks ( { confId } ) { // 1. You're on the server, so you can talk to your data layer. API endpoint not required. const talks = await db . Talks . findAll ( { confId } ) ; // 2. Add any amount of rendering logic. It won't make your JavaScript bundle larger. const videos = talks . map ( talk => talk . video ) ; // 3. Pass the data down to the components that will run in the browser. return < SearchableVideoList videos = { videos } /> ; } Next.js’s App Router also integrates data fetching with Suspense . This lets you specify a loading state (like a skeleton placeholder) for different parts of your user interface directly in your React tree: < Suspense fallback = { < TalksLoading /> } > < Talks confId = { conf . id } /> </ Suspense > Server Components and Suspense are React features rather than Next.js features. However, adopting them at the framework level requires buy-in and non-trivial implementation work. At the moment, the Next.js App Router is the most complete implementation. The React team is working with bundler developers to make these features easier to implement in the next generation of frameworks. Start From Scratch If your app has constraints not well-served by existing frameworks, you prefer to build your own framework, or you just want to learn the basics of a React app, there are other options available for starting a React project from scratch. Starting from scratch gives you more flexibility, but does require that you make choices on which tools to use for routing, data fetching, and other common usage patterns. It’s a lot like building your own framework, instead of using a framework that already exists. The frameworks we recommend have built-in solutions for these problems. If you want to build your own solutions, see our guide to build a React app from Scratch for instructions on how to set up a new React project starting with a build tool like Vite , Parcel , or RSbuild . If you’re a framework author interested in being included on this page, please let us know .
Markdown	[![logo by @sawaratsuki1004](https://react.dev/_next/image?url=%2Fimages%2Fuwu.png&w=128&q=75)](https://react.dev/) [React](https://react.dev/) [v19.2](https://react.dev/versions) Search`⌘``Ctrl``K` [Learn](https://react.dev/learn) [Reference](https://react.dev/reference/react) [Community](https://react.dev/community) [Blog](https://react.dev/blog) - [Quick Start](https://react.dev/learn "Quick Start") - [Tutorial: Tic-Tac-Toe](https://react.dev/learn/tutorial-tic-tac-toe "Tutorial: Tic-Tac-Toe") - [Thinking in React](https://react.dev/learn/thinking-in-react "Thinking in React") - [Installation](https://react.dev/learn/installation "Installation") - [Creating a React App](https://react.dev/learn/creating-a-react-app "Creating a React App") - [Build a React App from Scratch](https://react.dev/learn/build-a-react-app-from-scratch "Build a React App from Scratch") - [Add React to an Existing Project](https://react.dev/learn/add-react-to-an-existing-project "Add React to an Existing Project") - [Setup](https://react.dev/learn/setup "Setup") - [Editor Setup](https://react.dev/learn/editor-setup "Editor Setup") - [Using TypeScript](https://react.dev/learn/typescript "Using TypeScript") - [React Developer Tools](https://react.dev/learn/react-developer-tools "React Developer Tools") - [React Compiler](https://react.dev/learn/react-compiler "React Compiler") - [Introduction](https://react.dev/learn/react-compiler/introduction "Introduction") - [Installation](https://react.dev/learn/react-compiler/installation "Installation") - [Incremental Adoption](https://react.dev/learn/react-compiler/incremental-adoption "Incremental Adoption") - [Debugging and Troubleshooting](https://react.dev/learn/react-compiler/debugging "Debugging and Troubleshooting") - [Describing the UI](https://react.dev/learn/describing-the-ui "Describing the UI") - [Your First Component](https://react.dev/learn/your-first-component "Your First Component") - [Importing and Exporting Components](https://react.dev/learn/importing-and-exporting-components "Importing and Exporting Components") - [Writing Markup with JSX](https://react.dev/learn/writing-markup-with-jsx "Writing Markup with JSX") - [JavaScript in JSX with Curly Braces](https://react.dev/learn/javascript-in-jsx-with-curly-braces "JavaScript in JSX with Curly Braces") - [Passing Props to a Component](https://react.dev/learn/passing-props-to-a-component "Passing Props to a Component") - [Conditional Rendering](https://react.dev/learn/conditional-rendering "Conditional Rendering") - [Rendering Lists](https://react.dev/learn/rendering-lists "Rendering Lists") - [Keeping Components Pure](https://react.dev/learn/keeping-components-pure "Keeping Components Pure") - [Your UI as a Tree](https://react.dev/learn/understanding-your-ui-as-a-tree "Your UI as a Tree") - [Adding Interactivity](https://react.dev/learn/adding-interactivity "Adding Interactivity") - [Responding to Events](https://react.dev/learn/responding-to-events "Responding to Events") - [State: A Component's Memory](https://react.dev/learn/state-a-components-memory "State: A Component's Memory") - [Render and Commit](https://react.dev/learn/render-and-commit "Render and Commit") - [State as a Snapshot](https://react.dev/learn/state-as-a-snapshot "State as a Snapshot") - [Queueing a Series of State Updates](https://react.dev/learn/queueing-a-series-of-state-updates "Queueing a Series of State Updates") - [Updating Objects in State](https://react.dev/learn/updating-objects-in-state "Updating Objects in State") - [Updating Arrays in State](https://react.dev/learn/updating-arrays-in-state "Updating Arrays in State") - [Managing State](https://react.dev/learn/managing-state "Managing State") - [Reacting to Input with State](https://react.dev/learn/reacting-to-input-with-state "Reacting to Input with State") - [Choosing the State Structure](https://react.dev/learn/choosing-the-state-structure "Choosing the State Structure") - [Sharing State Between Components](https://react.dev/learn/sharing-state-between-components "Sharing State Between Components") - [Preserving and Resetting State](https://react.dev/learn/preserving-and-resetting-state "Preserving and Resetting State") - [Extracting State Logic into a Reducer](https://react.dev/learn/extracting-state-logic-into-a-reducer "Extracting State Logic into a Reducer") - [Passing Data Deeply with Context](https://react.dev/learn/passing-data-deeply-with-context "Passing Data Deeply with Context") - [Scaling Up with Reducer and Context](https://react.dev/learn/scaling-up-with-reducer-and-context "Scaling Up with Reducer and Context") - [Escape Hatches](https://react.dev/learn/escape-hatches "Escape Hatches") - [Referencing Values with Refs](https://react.dev/learn/referencing-values-with-refs "Referencing Values with Refs") - [Manipulating the DOM with Refs](https://react.dev/learn/manipulating-the-dom-with-refs "Manipulating the DOM with Refs") - [Synchronizing with Effects](https://react.dev/learn/synchronizing-with-effects "Synchronizing with Effects") - [You Might Not Need an Effect](https://react.dev/learn/you-might-not-need-an-effect "You Might Not Need an Effect") - [Lifecycle of Reactive Effects](https://react.dev/learn/lifecycle-of-reactive-effects "Lifecycle of Reactive Effects") - [Separating Events from Effects](https://react.dev/learn/separating-events-from-effects "Separating Events from Effects") - [Removing Effect Dependencies](https://react.dev/learn/removing-effect-dependencies "Removing Effect Dependencies") - [Reusing Logic with Custom Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks "Reusing Logic with Custom Hooks") [Learn React](https://react.dev/learn) [Installation](https://react.dev/learn/installation) Copy pageCopy # Creating a React App If you want to build a new app or website with React, we recommend starting with a framework. If your app has constraints not well-served by existing frameworks, you prefer to build your own framework, or you just want to learn the basics of a React app, you can [build a React app from scratch](https://react.dev/learn/build-a-react-app-from-scratch). ## Full-stack frameworks These recommended frameworks support all the features you need to deploy and scale your app in production. They have integrated the latest React features and take advantage of React’s architecture. ### Note #### Full-stack frameworks do not require a server. All the frameworks on this page support client-side rendering ([CSR](https://developer.mozilla.org/en-US/docs/Glossary/CSR)), single-page apps ([SPA](https://developer.mozilla.org/en-US/docs/Glossary/SPA)), and static-site generation ([SSG](https://developer.mozilla.org/en-US/docs/Glossary/SSG)). These apps can be deployed to a [CDN](https://developer.mozilla.org/en-US/docs/Glossary/CDN) or static hosting service without a server. Additionally, these frameworks allow you to add server-side rendering on a per-route basis, when it makes sense for your use case. This allows you to start with a client-only app, and if your needs change later, you can opt-in to using server features on individual routes without rewriting your app. See your framework’s documentation for configuring the rendering strategy. ### Next.js (App Router) [Next.js’s App Router](https://nextjs.org/docs) is a React framework that takes full advantage of React’s architecture to enable full-stack React apps. Terminal Copy ``` npx create-next-app@latest ``` Next.js is maintained by [Vercel](https://vercel.com/). You can [deploy a Next.js app](https://nextjs.org/docs/app/building-your-application/deploying) to any hosting provider that supports Node.js or Docker containers, or to your own server. Next.js also supports [static export](https://nextjs.org/docs/app/building-your-application/deploying/static-exports) which doesn’t require a server. ### React Router (v7) [React Router](https://reactrouter.com/start/framework/installation) is the most popular routing library for React and can be paired with Vite to create a full-stack React framework. It emphasizes standard Web APIs and has several [ready to deploy templates](https://github.com/remix-run/react-router-templates) for various JavaScript runtimes and platforms. To create a new React Router framework project, run: Terminal Copy ``` npx create-react-router@latest ``` React Router is maintained by [Shopify](https://www.shopify.com/). ### Expo (for native apps) [Expo](https://expo.dev/) is a React framework that lets you create universal Android, iOS, and web apps with truly native UIs. It provides an SDK for [React Native](https://reactnative.dev/) that makes the native parts easier to use. To create a new Expo project, run: Terminal Copy ``` npx create-expo-app@latest ``` If you’re new to Expo, check out the [Expo tutorial](https://docs.expo.dev/tutorial/introduction/). Expo is maintained by [Expo (the company)](https://expo.dev/about). Building apps with Expo is free, and you can submit them to the Google and Apple app stores without restrictions. Expo additionally provides opt-in paid cloud services. ## Other frameworks There are other up-and-coming frameworks that are working towards our full stack React vision: - [TanStack Start (Beta)](https://tanstack.com/start/): TanStack Start is a full-stack React framework powered by TanStack Router. It provides a full-document SSR, streaming, server functions, bundling, and more using tools like Nitro and Vite. - [RedwoodSDK](https://rwsdk.com/): Redwood is a full stack React framework with lots of pre-installed packages and configuration that makes it easy to build full-stack web applications. ##### Deep Dive #### Which features make up the React team’s full-stack architecture vision? Show Details Next.js’s App Router bundler fully implements the official [React Server Components specification](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md). This lets you mix build-time, server-only, and interactive components in a single React tree. For example, you can write a server-only React component as an `async` function that reads from a database or from a file. Then you can pass data down from it to your interactive components: ``` // This component runs only on the server (or during the build).async function Talks({ confId }) {// 1. You're on the server, so you can talk to your data layer. API endpoint not required.const talks = await db.Talks.findAll({ confId });// 2. Add any amount of rendering logic. It won't make your JavaScript bundle larger.const videos = talks.map(talk => talk.video);// 3. Pass the data down to the components that will run in the browser.return <SearchableVideoList videos={videos} />;} ``` Next.js’s App Router also integrates [data fetching with Suspense](https://react.dev/blog/2022/03/29/react-v18#suspense-in-data-frameworks). This lets you specify a loading state (like a skeleton placeholder) for different parts of your user interface directly in your React tree: ``` <Suspense fallback={<TalksLoading />}><Talks confId={conf.id} /></Suspense> ``` Server Components and Suspense are React features rather than Next.js features. However, adopting them at the framework level requires buy-in and non-trivial implementation work. At the moment, the Next.js App Router is the most complete implementation. The React team is working with bundler developers to make these features easier to implement in the next generation of frameworks. ## Start From Scratch If your app has constraints not well-served by existing frameworks, you prefer to build your own framework, or you just want to learn the basics of a React app, there are other options available for starting a React project from scratch. Starting from scratch gives you more flexibility, but does require that you make choices on which tools to use for routing, data fetching, and other common usage patterns. It’s a lot like building your own framework, instead of using a framework that already exists. The [frameworks we recommend](https://react.dev/learn/creating-a-react-app#full-stack-frameworks) have built-in solutions for these problems. If you want to build your own solutions, see our guide to [build a React app from Scratch](https://react.dev/learn/build-a-react-app-from-scratch) for instructions on how to set up a new React project starting with a build tool like [Vite](https://vite.dev/), [Parcel](https://parceljs.org/), or [RSbuild](https://rsbuild.dev/). *** If you’re a framework author interested in being included on this page, [please let us know](https://github.com/reactjs/react.dev/issues/new?assignees=&labels=type%3A+framework&projects=&template=3-framework.yml&title=%5BFramework%5D%3A+). [PreviousInstallation](https://react.dev/learn/installation) [NextBuild a React App from Scratch](https://react.dev/learn/build-a-react-app-from-scratch) *** Copyright © Meta Platforms, Inc no uwu plz uwu? Logo by[@sawaratsuki1004](https://twitter.com/sawaratsuki1004) [Learn React](https://react.dev/learn) [Quick Start](https://react.dev/learn) [Installation](https://react.dev/learn/installation) [Describing the UI](https://react.dev/learn/describing-the-ui) [Adding Interactivity](https://react.dev/learn/adding-interactivity) [Managing State](https://react.dev/learn/managing-state) [Escape Hatches](https://react.dev/learn/escape-hatches) [API Reference](https://react.dev/reference/react) [React APIs](https://react.dev/reference/react) [React DOM APIs](https://react.dev/reference/react-dom) [Community](https://react.dev/community) [Code of Conduct](https://github.com/facebook/react/blob/main/CODE_OF_CONDUCT.md) [Meet the Team](https://react.dev/community/team) [Docs Contributors](https://react.dev/community/docs-contributors) [Acknowledgements](https://react.dev/community/acknowledgements) More [Blog](https://react.dev/blog) [React Native](https://reactnative.dev/) [Privacy](https://opensource.facebook.com/legal/privacy) [Terms](https://opensource.fb.com/legal/terms/) ## On this page - [Overview](https://react.dev/learn/creating-a-react-app) - [Full-stack frameworks](https://react.dev/learn/creating-a-react-app#full-stack-frameworks) - [Next.js (App Router)](https://react.dev/learn/creating-a-react-app#nextjs-app-router) - [React Router (v7)](https://react.dev/learn/creating-a-react-app#react-router-v7) - [Expo (for native apps)](https://react.dev/learn/creating-a-react-app#expo) - [Other frameworks](https://react.dev/learn/creating-a-react-app#other-frameworks) - [Start From Scratch](https://react.dev/learn/creating-a-react-app#start-from-scratch)
Readable Markdown	If you want to build a new app or website with React, we recommend starting with a framework. If your app has constraints not well-served by existing frameworks, you prefer to build your own framework, or you just want to learn the basics of a React app, you can [build a React app from scratch](https://react.dev/learn/build-a-react-app-from-scratch). ## Full-stack frameworks These recommended frameworks support all the features you need to deploy and scale your app in production. They have integrated the latest React features and take advantage of React’s architecture. ### Note #### Full-stack frameworks do not require a server. All the frameworks on this page support client-side rendering ([CSR](https://developer.mozilla.org/en-US/docs/Glossary/CSR)), single-page apps ([SPA](https://developer.mozilla.org/en-US/docs/Glossary/SPA)), and static-site generation ([SSG](https://developer.mozilla.org/en-US/docs/Glossary/SSG)). These apps can be deployed to a [CDN](https://developer.mozilla.org/en-US/docs/Glossary/CDN) or static hosting service without a server. Additionally, these frameworks allow you to add server-side rendering on a per-route basis, when it makes sense for your use case. This allows you to start with a client-only app, and if your needs change later, you can opt-in to using server features on individual routes without rewriting your app. See your framework’s documentation for configuring the rendering strategy. ### Next.js (App Router) [Next.js’s App Router](https://nextjs.org/docs) is a React framework that takes full advantage of React’s architecture to enable full-stack React apps. Terminal ``` npx create-next-app@latest ``` Next.js is maintained by [Vercel](https://vercel.com/). You can [deploy a Next.js app](https://nextjs.org/docs/app/building-your-application/deploying) to any hosting provider that supports Node.js or Docker containers, or to your own server. Next.js also supports [static export](https://nextjs.org/docs/app/building-your-application/deploying/static-exports) which doesn’t require a server. ### React Router (v7) [React Router](https://reactrouter.com/start/framework/installation) is the most popular routing library for React and can be paired with Vite to create a full-stack React framework. It emphasizes standard Web APIs and has several [ready to deploy templates](https://github.com/remix-run/react-router-templates) for various JavaScript runtimes and platforms. To create a new React Router framework project, run: Terminal ``` npx create-react-router@latest ``` React Router is maintained by [Shopify](https://www.shopify.com/). ### Expo (for native apps) [Expo](https://expo.dev/) is a React framework that lets you create universal Android, iOS, and web apps with truly native UIs. It provides an SDK for [React Native](https://reactnative.dev/) that makes the native parts easier to use. To create a new Expo project, run: Terminal ``` npx create-expo-app@latest ``` If you’re new to Expo, check out the [Expo tutorial](https://docs.expo.dev/tutorial/introduction/). Expo is maintained by [Expo (the company)](https://expo.dev/about). Building apps with Expo is free, and you can submit them to the Google and Apple app stores without restrictions. Expo additionally provides opt-in paid cloud services. ## Other frameworks There are other up-and-coming frameworks that are working towards our full stack React vision: - [TanStack Start (Beta)](https://tanstack.com/start/): TanStack Start is a full-stack React framework powered by TanStack Router. It provides a full-document SSR, streaming, server functions, bundling, and more using tools like Nitro and Vite. - [RedwoodSDK](https://rwsdk.com/): Redwood is a full stack React framework with lots of pre-installed packages and configuration that makes it easy to build full-stack web applications. ##### Deep Dive Which features make up the React team’s full-stack architecture vision? Next.js’s App Router bundler fully implements the official [React Server Components specification](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md). This lets you mix build-time, server-only, and interactive components in a single React tree. For example, you can write a server-only React component as an `async` function that reads from a database or from a file. Then you can pass data down from it to your interactive components: ``` // This component runs only on the server (or during the build).async function Talks({ confId }) {// 1. You're on the server, so you can talk to your data layer. API endpoint not required.const talks = await db.Talks.findAll({ confId });// 2. Add any amount of rendering logic. It won't make your JavaScript bundle larger.const videos = talks.map(talk => talk.video);// 3. Pass the data down to the components that will run in the browser.return <SearchableVideoList videos={videos} />;} ``` Next.js’s App Router also integrates [data fetching with Suspense](https://react.dev/blog/2022/03/29/react-v18#suspense-in-data-frameworks). This lets you specify a loading state (like a skeleton placeholder) for different parts of your user interface directly in your React tree: ``` <Suspense fallback={<TalksLoading />}><Talks confId={conf.id} /></Suspense> ``` Server Components and Suspense are React features rather than Next.js features. However, adopting them at the framework level requires buy-in and non-trivial implementation work. At the moment, the Next.js App Router is the most complete implementation. The React team is working with bundler developers to make these features easier to implement in the next generation of frameworks. ## Start From Scratch If your app has constraints not well-served by existing frameworks, you prefer to build your own framework, or you just want to learn the basics of a React app, there are other options available for starting a React project from scratch. Starting from scratch gives you more flexibility, but does require that you make choices on which tools to use for routing, data fetching, and other common usage patterns. It’s a lot like building your own framework, instead of using a framework that already exists. The [frameworks we recommend](https://react.dev/learn/creating-a-react-app#full-stack-frameworks) have built-in solutions for these problems. If you want to build your own solutions, see our guide to [build a React app from Scratch](https://react.dev/learn/build-a-react-app-from-scratch) for instructions on how to set up a new React project starting with a build tool like [Vite](https://vite.dev/), [Parcel](https://parceljs.org/), or [RSbuild](https://rsbuild.dev/). *** If you’re a framework author interested in being included on this page, [please let us know](https://github.com/reactjs/react.dev/issues/new?assignees=&labels=type%3A+framework&projects=&template=3-framework.yml&title=%5BFramework%5D%3A+).
Shard	182 (laksa)
Root Hash	17140691864557838982
Unparsed URL	dev,react!/learn/creating-a-react-app s443