{"id":1222,"date":"2024-07-28T02:36:15","date_gmt":"2024-07-27T18:36:15","guid":{"rendered":"http:\/\/codermr.com\/?p=1222"},"modified":"2024-07-28T02:36:16","modified_gmt":"2024-07-27T18:36:16","slug":"react-frameworks","status":"publish","type":"post","link":"http:\/\/codermr.com\/index.php\/2024\/07\/28\/react-frameworks\/","title":{"rendered":"React frameworks"},"content":{"rendered":"\n

If you want to build a new app or a new website fully with React, we recommend picking one of the React-powered frameworks popular in the community.<\/p>\n\n\n\n

You can use React without a framework, however we\u2019ve found that most apps and sites eventually build solutions to common problems such as code-splitting, routing, data fetching, and generating HTML. These problems are common to all UI libraries, not just React.<\/p>\n\n\n\n

By starting with a framework, you can get started with React quickly, and avoid essentially building your own framework later.<\/p>\n\n\n\n

\n

Can I use React without a framework?\u00a0<\/p>\n\n\n\n

You can definitely use React without a framework\u2014that\u2019s how you\u2019d use React for a part of your page.<\/a> However, if you\u2019re building a new app or a site fully with React, we recommend using a framework.<\/strong><\/p>\n\n\n\n

Here\u2019s why.<\/p>\n\n\n\n

Even if you don\u2019t need routing or data fetching at first, you\u2019ll likely want to add some libraries for them. As your JavaScript bundle grows with every new feature, you might have to figure out how to split code for every route individually. As your data fetching needs get more complex, you are likely to encounter server-client network waterfalls that make your app feel very slow. As your audience includes more users with poor network conditions and low-end devices, you might need to generate HTML from your components to display content early\u2014either on the server, or during the build time. Changing your setup to run some of your code on the server or during the build can be very tricky.<\/p>\n\n\n\n

These problems are not React-specific. This is why Svelte has SvelteKit, Vue has Nuxt, and so on.<\/strong> To solve these problems on your own, you\u2019ll need to integrate your bundler with your router and with your data fetching library. It\u2019s not hard to get an initial setup working, but there are a lot of subtleties involved in making an app that loads quickly even as it grows over time. You\u2019ll want to send down the minimal amount of app code but do so in a single client\u2013server roundtrip, in parallel with any data required for the page. You\u2019ll likely want the page to be interactive before your JavaScript code even runs, to support progressive enhancement. You may want to generate a folder of fully static HTML files for your marketing pages that can be hosted anywhere and still work with JavaScript disabled. Building these capabilities yourself takes real work.<\/p>\n\n\n\n

React frameworks on this page solve problems like these by default, with no extra work from your side.<\/strong> They let you start very lean and then scale your app with your needs. Each React framework has a community, so finding answers to questions and upgrading tooling is easier. Frameworks also give structure to your code, helping you and others retain context and skills between different projects. Conversely, with a custom setup it\u2019s easier to get stuck on unsupported dependency versions, and you\u2019ll essentially end up creating your own framework\u2014albeit one with no community or upgrade path (and if it\u2019s anything like the ones we\u2019ve made in the past, more haphazardly designed).<\/p>\n\n\n\n

If your app has unusual constraints not served well by these frameworks, or you prefer to solve these problems yourself, you can roll your own custom setup with React. Grab react<\/code> and react-dom<\/code> from npm, set up your custom build process with a bundler like Vite<\/a> or Parcel<\/a>, and add other tools as you need them for routing, static generation or server-side rendering, and more.<\/p>\n<\/blockquote>\n\n\n\n

Production-grade React frameworks <\/a><\/h2>\n\n\n\n

These frameworks support all the features you need to deploy and scale your app in production and are working towards supporting our full-stack architecture vision<\/a>. All of the frameworks we recommend are open source with active communities for support, and can be deployed to your own server or a hosting provider. If you\u2019re a framework author interested in being included on this list, please let us know<\/a>.<\/p>\n\n\n\n

Next.js<\/p>\n\n\n\n

Remix\u00a0<\/p>\n\n\n\n

Gatsby<\/p>\n\n\n\n

Expo (for native apps)\u00a0<\/p>\n\n\n\n

Bleeding-edge React frameworks<\/p>\n\n\n\n

Next.js (App Router)<\/p>\n\n\n\n

<\/p>\n\n\n\n

\u53c2\uff1ahttps:\/\/react.dev\/learn\/start-a-new-react-project<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

If you want to build a new app or a new website fully w…<\/p>\n","protected":false},"author":1,"featured_media":1019,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[57],"tags":[56],"yoast_head":"\nReact frameworks - \u7801\u5148\u751f\u7684\u535a\u5ba2<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/react-frameworks\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React frameworks - \u7801\u5148\u751f\u7684\u535a\u5ba2\" \/>\n<meta property=\"og:description\" content=\"If you want to build a new app or a new website fully w...\" \/>\n<meta property=\"og:url\" content=\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/react-frameworks\/\" \/>\n<meta property=\"og:site_name\" content=\"\u7801\u5148\u751f\u7684\u535a\u5ba2\" \/>\n<meta property=\"article:published_time\" content=\"2024-07-27T18:36:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-27T18:36:16+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/codermr.com\/wp-content\/uploads\/2023\/07\/react-logo.png\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"675\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"\u7801\u5148\u751f\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/mrcode2021\" \/>\n<meta name=\"twitter:site\" content=\"@mrcode2021\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u7801\u5148\u751f\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/react-frameworks\/#article\",\"isPartOf\":{\"@id\":\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/react-frameworks\/\"},\"author\":{\"name\":\"\u7801\u5148\u751f\",\"@id\":\"http:\/\/codermr.com\/#\/schema\/person\/39016e15c79e4f02d1ed3a64688619bf\"},\"headline\":\"React frameworks\",\"datePublished\":\"2024-07-27T18:36:15+00:00\",\"dateModified\":\"2024-07-27T18:36:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/react-frameworks\/\"},\"wordCount\":689,\"commentCount\":0,\"publisher\":{\"@id\":\"http:\/\/codermr.com\/#\/schema\/person\/39016e15c79e4f02d1ed3a64688619bf\"},\"keywords\":[\"react\"],\"articleSection\":[\"\u524d\u7aef\u6280\u672f\"],\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/react-frameworks\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/react-frameworks\/\",\"url\":\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/react-frameworks\/\",\"name\":\"React frameworks - \u7801\u5148\u751f\u7684\u535a\u5ba2\",\"isPartOf\":{\"@id\":\"http:\/\/codermr.com\/#website\"},\"datePublished\":\"2024-07-27T18:36:15+00:00\",\"dateModified\":\"2024-07-27T18:36:16+00:00\",\"breadcrumb\":{\"@id\":\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/react-frameworks\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/react-frameworks\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/react-frameworks\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"http:\/\/codermr.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React frameworks\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/codermr.com\/#website\",\"url\":\"http:\/\/codermr.com\/\",\"name\":\"\u7801\u5148\u751f\u7684\u535a\u5ba2\",\"description\":\"\u6b22 \u8fce \u4e0b \u8f7d \u6211 \u5f00 \u53d1 \u7684 \u5404 \u7aef \u8f6f \u4ef6 \u548c APP\",\"publisher\":{\"@id\":\"http:\/\/codermr.com\/#\/schema\/person\/39016e15c79e4f02d1ed3a64688619bf\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/codermr.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"zh-Hans\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"http:\/\/codermr.com\/#\/schema\/person\/39016e15c79e4f02d1ed3a64688619bf\",\"name\":\"\u7801\u5148\u751f\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"http:\/\/codermr.com\/#\/schema\/person\/image\/\",\"url\":\"http:\/\/codermr.com\/wp-content\/uploads\/2023\/02\/wukong.jpg\",\"contentUrl\":\"http:\/\/codermr.com\/wp-content\/uploads\/2023\/02\/wukong.jpg\",\"width\":400,\"height\":400,\"caption\":\"\u7801\u5148\u751f\"},\"logo\":{\"@id\":\"http:\/\/codermr.com\/#\/schema\/person\/image\/\"},\"sameAs\":[\"http:\/\/codermr.com\",\"https:\/\/twitter.com\/https:\/\/twitter.com\/mrcode2021\"],\"url\":\"http:\/\/codermr.com\/index.php\/author\/coderma\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React frameworks - \u7801\u5148\u751f\u7684\u535a\u5ba2","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/codermr.com\/index.php\/2024\/07\/28\/react-frameworks\/","og_locale":"zh_CN","og_type":"article","og_title":"React frameworks - \u7801\u5148\u751f\u7684\u535a\u5ba2","og_description":"If you want to build a new app or a new website fully w...","og_url":"http:\/\/codermr.com\/index.php\/2024\/07\/28\/react-frameworks\/","og_site_name":"\u7801\u5148\u751f\u7684\u535a\u5ba2","article_published_time":"2024-07-27T18:36:15+00:00","article_modified_time":"2024-07-27T18:36:16+00:00","og_image":[{"width":900,"height":675,"url":"http:\/\/codermr.com\/wp-content\/uploads\/2023\/07\/react-logo.png","type":"image\/png"}],"author":"\u7801\u5148\u751f","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/mrcode2021","twitter_site":"@mrcode2021","twitter_misc":{"\u4f5c\u8005":"\u7801\u5148\u751f","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"4 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/codermr.com\/index.php\/2024\/07\/28\/react-frameworks\/#article","isPartOf":{"@id":"http:\/\/codermr.com\/index.php\/2024\/07\/28\/react-frameworks\/"},"author":{"name":"\u7801\u5148\u751f","@id":"http:\/\/codermr.com\/#\/schema\/person\/39016e15c79e4f02d1ed3a64688619bf"},"headline":"React frameworks","datePublished":"2024-07-27T18:36:15+00:00","dateModified":"2024-07-27T18:36:16+00:00","mainEntityOfPage":{"@id":"http:\/\/codermr.com\/index.php\/2024\/07\/28\/react-frameworks\/"},"wordCount":689,"commentCount":0,"publisher":{"@id":"http:\/\/codermr.com\/#\/schema\/person\/39016e15c79e4f02d1ed3a64688619bf"},"keywords":["react"],"articleSection":["\u524d\u7aef\u6280\u672f"],"inLanguage":"zh-Hans","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["http:\/\/codermr.com\/index.php\/2024\/07\/28\/react-frameworks\/#respond"]}]},{"@type":"WebPage","@id":"http:\/\/codermr.com\/index.php\/2024\/07\/28\/react-frameworks\/","url":"http:\/\/codermr.com\/index.php\/2024\/07\/28\/react-frameworks\/","name":"React frameworks - \u7801\u5148\u751f\u7684\u535a\u5ba2","isPartOf":{"@id":"http:\/\/codermr.com\/#website"},"datePublished":"2024-07-27T18:36:15+00:00","dateModified":"2024-07-27T18:36:16+00:00","breadcrumb":{"@id":"http:\/\/codermr.com\/index.php\/2024\/07\/28\/react-frameworks\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["http:\/\/codermr.com\/index.php\/2024\/07\/28\/react-frameworks\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/codermr.com\/index.php\/2024\/07\/28\/react-frameworks\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"http:\/\/codermr.com\/"},{"@type":"ListItem","position":2,"name":"React frameworks"}]},{"@type":"WebSite","@id":"http:\/\/codermr.com\/#website","url":"http:\/\/codermr.com\/","name":"\u7801\u5148\u751f\u7684\u535a\u5ba2","description":"\u6b22 \u8fce \u4e0b \u8f7d \u6211 \u5f00 \u53d1 \u7684 \u5404 \u7aef \u8f6f \u4ef6 \u548c APP","publisher":{"@id":"http:\/\/codermr.com\/#\/schema\/person\/39016e15c79e4f02d1ed3a64688619bf"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/codermr.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"zh-Hans"},{"@type":["Person","Organization"],"@id":"http:\/\/codermr.com\/#\/schema\/person\/39016e15c79e4f02d1ed3a64688619bf","name":"\u7801\u5148\u751f","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"http:\/\/codermr.com\/#\/schema\/person\/image\/","url":"http:\/\/codermr.com\/wp-content\/uploads\/2023\/02\/wukong.jpg","contentUrl":"http:\/\/codermr.com\/wp-content\/uploads\/2023\/02\/wukong.jpg","width":400,"height":400,"caption":"\u7801\u5148\u751f"},"logo":{"@id":"http:\/\/codermr.com\/#\/schema\/person\/image\/"},"sameAs":["http:\/\/codermr.com","https:\/\/twitter.com\/https:\/\/twitter.com\/mrcode2021"],"url":"http:\/\/codermr.com\/index.php\/author\/coderma\/"}]}},"_links":{"self":[{"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/posts\/1222"}],"collection":[{"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/comments?post=1222"}],"version-history":[{"count":1,"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/posts\/1222\/revisions"}],"predecessor-version":[{"id":1223,"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/posts\/1222\/revisions\/1223"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/media\/1019"}],"wp:attachment":[{"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/media?parent=1222"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/categories?post=1222"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/tags?post=1222"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}