Aloita uusi React-projekti

Voit käyttää Reactia ilman ohjelmistokehystä—tämä on tapa käyttää Reactia osana sivuasi. Kuitenkin, jos rakennat uutta sovellusta tai sivustoa täysin Reactilla, suosittelemme käyttämään ohjelmistokehystä.

Tässä miksi.

Vaikka et tarvitsisi reititystä tai tiedonhakua aluksi, sinun täytyy todennäköisesti lisätä joitain kirjastoja niitä varten. Kun JavaScript-bundle kasvaa jokaisen uuden ominaisuuden myötä, saatat joutua selvittämään, miten jakaa koodi jokaiselle reitille erikseen. Kun tiedonhakutarpeesi monimutkaistuvat, saatat kohdata palvelin-asiakas-verkkojen vesiputouksia, jotka saavat sovelluksesi tuntumaan hyvin hitaalta. Kun yleisöösi kuuluu enemmän käyttäjiä, joilla on huonoja verkkoyhteyksiä ja heikkoja laitteita, saatat joutua luomaan HTML:ää komponenteistasi näyttääksesi sisältöä aikaisin—joko palvelimella tai rakennusaikana. Koodisi muuttaminen siten, että osa siitä suoritetaan palvelimella tai rakennusaikana, voi olla hyvin hankalaa.

Nämä ongelmat eivät koske vain Reactia. Tämän takia Sveltellä on SvelteKit, Vuella on Nuxt, ja niin edelleen. Ratkaistaksesi nämä ongelmat itse, sinun täytyy integroida bundlerisi reitittimesi ja tietojen hakukirjastosi kanssa. Alkuperäisen asennuksen saaminen toimimaan ei ole vaikeaa, mutta on paljon hienovaraisuuksia, jotka liittyvät sovelluksen nopeaan lataamiseen, vaikka se kasvaisi ajan myötä. Haluat lähettää mahdollisimman vähän sovelluskoodia, mutta tehdä se yhdellä asiakas-palvelin-kierroksella, rinnakkain minkä tahansa sivun vaatiman datan kanssa. Haluat todennäköisesti, että sivu on interaktiivinen ennen kuin JavaScript-koodisi edes suoritetaan, jotta tuet progressiivista parannusta. Saatat haluta luoda kansio täysin staattisista HTML-tiedostoista markkinointisivuillesi, jotka voidaan julkaista missä tahansa ja toimia JavaScriptin ollessa poissa käytöstä. Näiden kykyjen rakentaminen itse vaatii todellista työtä.

React ohjelmistokehykset tällä sivulla ratkaisevat tämän kaltaisia ongelmia oletuksena, ilman ylimääräistä työtä puoleltasi. Ne antavat sinun aloittaa hyvin kevyesti ja sitten skaalata sovelluksesi tarpeidesi mukaan. Jokaisella React-ohjelmistokehyksellä on yhteisö, joten vastausten löytäminen kysymyksiin ja työkalujen päivittäminen on helpompaa. Ohjelmistokehykset myös antavat rakennetta koodillesi, auttaen sinua ja muita säilyttämään kontekstin ja taidot eri projektien välillä. Toisaalta, omalla asennuksella on helpompaa jäädä tukemattomien riippuvuuksien versioiden vangiksi, ja lopulta päädyt luomaan oman ohjelmistokehyksen—sellaisen, jolla ei ole yhteisöä tai päivityspolkua (ja jos se on mitä tahansa, mitä me olemme tehneet aiemmin, se on hutiloidusti suunniteltu).

Jos et ole vielä vakuuttunut, tai sovelluksellasi on epätavallisia rajoitteita, joita nämä ohjelmistokehykset eivät palvele hyvin ja haluat luoda oman mukautetun asennuksen, emme voi estää sinua—anna palaa! Nappaa react ja react-dom npm:stä, asenna mukautettu rakennusprosessisi bundlerilla kuten Vite tai Parcel, ja lisää muita työkaluja tarpeen mukaan reititykseen, staattiseen generointiin tai palvelinpuolen renderöintiin, ja niin edelleen.

Next.js:n App Router bundler toteuttaa täysin virallisen Reactin palvelinkomponenttien määrittelyn. Tämä antaa sinun sekoittaa rakennusajan, vain-palvelimella-toimivat ja interaktiiviset komponentit yhteen React-puuhun.

Esimerkiksi, voit kirjotitaa vain-palvelimella-toimivan React-komponentin async-funktiona, joka lukee tietokannasta tai tiedostosta. Sitten voit välittää dataa alas siitä interaktiivisille komponenteillesi:

// Tämä komponentti suoritetaan *vain* palvelimella (tai rakennuksen aikana).
async function Talks({ confId }) {.
  // 1. Jos olet palvelimella, voit jutella data-tasosi kanssa. API endpointtia ei vaadita.
  const talks = await db.Talks.findAll({ confId });

  // 2. Lisää renderöintilogiikkaa miten paljon tahansa. Se ei tee JavaScript bundlestasi yhtään suurempaa.
  const videos = talks.map(talk => talk.video);

  // 3. Välitä data alas komponenteillesi, jotka suoritetaan selaimessa.
  return <SearchableVideoList videos={videos} />;
}

Next.js:n App Router integroituu myös datan hakemiseen Suspensen kanssa. Tämän avulla voit määritellä lataustilan (kuten tilapäisen luurangon) eri osille käyttöliittymääsi suoraan React-puussasi:

```js
<Suspense fallback={<TalksLoading />}>
  <Talks confId={conf.id} />
</Suspense>

Palvelinkomponentit sekä SUspense ovat React -ominaisuuksia eivätkä Next.js -ominaisuuksia. Kuitenkin, niiden ottaminen käyttöön ohjelmistokehyksen tasolla vaatii sitoutumista ja ei-triviaalia toteutustyötä. Tällä hetkellä, Next.js App Router on täydellisin toteutus. React-tiimi työskentelee bundler-kehittäjien kanssa tehdäkseen näiden ominaisuuksien toteuttamisesta helpompaa seuraavan sukupolven ohjelmistokehyksissä.