Byrjaðu á nýju React verkefni
Ef þig langar að smíða nýtt forrit eða vefsíðu algjörlega með React þá mælum við með að velja einn af þeim römmum (e. framework) sem byggja á React og eru vinsæl í React samfélaginu. Þessi forritasöfn veita þér aðgang að sérkennum sem flest forrit og vefsíður þurfa á endanum, til dæmis beiningu, tól til að sækja og vinna með gögn, og verkfæri til að útbúa HTML.
React forritasöfn sem hægt er að reiða sig á í rekstri
Next.js
Next.js er svokallað heilstafla (e. full-stack) React rammi. Það er fjölhæft og gerir þér kleift að smíða React forrit af hvaða stærð sem er—frá kyrrlegri pistlasíðu yfir í flókið kviklegt forrit. Keyrðu eftirfarandi skipun til að skapa nýtt Next.js verkefni frá grunni:
Skoðaðu Next.js inngangsleiðbeiningar ef þú hefur ekki notað Next.js áður.
Vercel sér um þróun og viðhald á Next.js. Þú getur getur keyrt Next.js vef á Node.js vefþjóni, miðlaralausri hýsingu, eða jafnvel á þínum eigin netþjóni. Kyrrlega Next.js vefi má keyra á hvað kyrrlegri (e. static) hýsingu sem er.
Remix
Remix er heilstafla React rammi með faldaðri beiningu. Það gerir þér kleift að skipta vefnum þínum í faldaða hluta sem geta svo hlaðið gögnum samhliða og endurglætt samskiptasvar við aðgerðum notenda. Keyrðu eftirfarandi skipun til að skapa nýtt Remix verkefni:
Skoðaðu þenann stutta kynningarpistil og þennan lengri pistil ef þú hefur ekki áður notað Remix.
Shopify sér um þróun og viðhald á Remix. Þegar þú býrð til Remix verkefni þarftu að velja þér hvers lags netþjón þú vilt keyra á. Þú getur keyrt Remix vef á hvaða Node.js eða miðlaralausri hýsingu sem er með því að nota eða skrifa millistykki.
Gatsby
Gatsby er React rammi fyrir hraðskreiðar síður sem byggja á gögnum úr CMS (e. content management system) kerfi. Eitt höfuðmarkmið þess er að einfalda sameiningu efnis, forritaskila, og vefþjónustum í eina vefsíðu. Keyrðu eftirfarandi skipun til að skapa Gatsby verkefni:
Kíktu á Gatsby kynninguna ef þú hefur ekki prófað Gatsby áður.
Netlify sér um þróun og viðhald Gatsby rammans. Þú getur keyrt algjörlega kyrrlega Gatsby síðu á hvaða kyrrlegri hýsingu sem er. Ef þú kýst að nota sérkenni sem krefjast þess að þú notir vefjón þá skaltu ganga úr skugga um að hýsingaraðilinn þinn styðji þær fyrir Gatsby.
Expo (fyrir forrit á heimavangi)
Expo er React rammi sem gerir þér kleift að skapa alhliða forrit fyrir Android, iOS, og veraldarvefinn með viðmótum sem þykja sannarlega tilheyra umhverfinu. Það veitir þér aðgang að SDK (e. software development kit) fyrir React Native sem gerir allt sem snertir inningu á heimavangi mun einfaldara í notkun. Keyrðu eftirfarandi skipun að skapa nýtt Expo verkefni:
Skoðaðu Expo kynninguna ef þú hefur aldrei notað Expo áður.
Expo (fyrirtækið) sér um þróun og viðhald á Expo. Það er ókeypis að þróa forrit með Expo og þú getur sótt um að fá forritið þitt í Google og Apple forritaverslanirnar án takmarkana. Expo býður einnig upp á valkvæðar skýjaþjónustur gegn greiðslu.
Deep Dive
You can definitely use React without a framework—that’s how you’d use React for a part of your page. However, if you’re building a new app or a site fully with React, we recommend using a framework.
Here’s why.
Even if you don’t need routing or data fetching at first, you’ll 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—either 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.
These problems are not React-specific. This is why Svelte has SvelteKit, Vue has Nuxt, and so on. To solve these problems on your own, you’ll need to integrate your bundler with your router and with your data fetching library. It’s 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’ll want to send down the minimal amount of app code but do so in a single client–server roundtrip, in parallel with any data required for the page. You’ll 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.
React frameworks on this page solve problems like these by default, with no extra work from your side. 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’s easier to get stuck on unsupported dependency versions, and you’ll essentially end up creating your own framework—albeit one with no community or upgrade path (and if it’s anything like the ones we’ve made in the past, more haphazardly designed).
If you’re still not convinced, or your app has unusual constraints not served well by these frameworks and you’d like to roll your own custom setup, we can’t stop you—go for it! Grab react and react-dom from npm, set up your custom build process with a bundler like Vite or Parcel, and add other tools as you need them for routing, static generation or server-side rendering, and more.
Bleeding-edge React frameworks
As we’ve explored how to continue improving React, we realized that integrating React more closely with frameworks (specifically, with routing, bundling, and server technologies) is our biggest opportunity to help React users build better apps. The Next.js team has agreed to collaborate with us in researching, developing, integrating, and testing framework-agnostic bleeding-edge React features like React Server Components.
These features are getting closer to being production-ready every day, and we’ve been in talks with other bundler and framework developers about integrating them. Our hope is that in a year or two, all frameworks listed on this page will have full support for these features. (If you’re a framework author interested in partnering with us to experiment with these features, please let us know!)
Next.js (App Router)
Next.js’s App Router is a redesign of the Next.js APIs aiming to fulfill the React team’s full-stack architecture vision. It lets you fetch data in asynchronous components that run on the server or even during the build.
Next.js is maintained by Vercel. You can deploy a Next.js app to any Node.js or serverless hosting, or to your own server. Next.js also supports static export which doesn’t require a server.
Deep Dive
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.