Aloita uusi React-projekti

Jos haluat rakentaa uuden sovelluksen tai verkkosivuston täysin Reactilla, suosittelemme valitsemaan yhden React-ohjelmistokehyksistä, jotka ovat suosittuja yhteisössä. Ohjelmistokehykset tarjoavat ominaisuuksia, joita useimmat sovellukset ja sivustot lopulta tarvitsevat, mukaan lukien reititys, tietojen haku ja HTML:n luominen.

Huomaa

Sinun täytyy asentaa Node.js paikallista kehitystä varten. Voit myös valita käyttää Node.js:ää tuotannossa, mutta sinun ei tarvitse. Monet React-ohjelmistokehykset tukevat vientiä staattiseksi HTML/CSS/JS-kansioksi.

Tuotantokäyttöön soveltuvat React-ohjelmistokehykset

Next.js

Next.js on full-stack React-ohjelmistokehys. Se on monipuolinen ja antaa sinun luoda React-sovelluksia mistä tahansa koosta—lähes staattisesta blogista monimutkaiseen dynaamiseen sovellukseen. Luodaksesi uuden Next.js-projektin, aja terminaalissa:

Terminal
npx create-next-app

Jos olet uusi Next.js:ään, tutustu Next.js tutoriaaliin.

Next.js:ää ylläpitää Vercel. Voit julkaista Next.js-sovelluksen mihin tahansa Node.js- tai serverless-ympäristöön, tai omalla palvelimellasi. Täysin staattiset Next.js-sovellukset voidaan julkaista missö tahansa staattisessa hosting-ympäristössä.

Remix

Remix on full-stack React ohjelmistokehys sisäkkäisellä reitityksellä. Se antaa sinun jakaa sovelluksesi osiin, jotka voivat ladata dataa rinnakkain ja päivittää käyttäjän toimien mukaan. Luodaksesi uuden Remix-projektin, aja terminaalissa:

Terminal
npx create-remix

Jos olet uusi Remixiin, tutustu Remixin blogi -tutoriaaliin (lyhyt) ja sovellus -tutoriaaliin (pitkä).

Remixiä ylläpitää Shopify. Kun luot Remix-projektin, sinun täytyy valita julkaisuympäristösi. Voit julkaista Remix-sovelluksen mihin tahansa Node.js- tai serverless-ympäristöön käyttämällä tai kirjoittamalla adapterin.

Gatsby

Gatsby on React ohjelmistokehys nopeille CMS-taustaisille verkkosivustoille. Sen rikas liitännäisjärjestelmä ja GraphQL-tietokerros yksinkertaistavat sisällön, API:en ja palveluiden integroimista yhteen verkkosivustoon. Luodaksesi uuden Gatsby-projektin, aja terminaalissa:

Terminal
npx create-gatsby

Jos olet uusi Gatsbyyn, tutustu Gatsby tutoriaaliin.

Gatsbya ylläpitää Netlify. Voit julkaista täysin staattisen Gatsby-sivuston mihin tahansa staattiseen hosting-ympäristöön. Jos valitset palvelinpuolen ominaisuuksia, varmista, että hosting-palveluntarjoajasi tukee niitä Gatsbylle.

Expo (natiivisovelluksille)

Expo on React ohjelmistokehys, joka antaa sinun luoda universaaleja Android-, iOS- ja web-sovelluksia, joissa on täysin native-käyttöliittymät. Se tarjoaa SDK:n React Native:lle, joka tekee natiivi-osien käytöstä helpompaa. Luodaksesi uuden Expo-projektin, aja terminaalissa:

Terminal
npx create-expo-app

Jos olet uusi Expoon, tutustu Expo tutoriaaliin.

Expoa ylläpitää Expo (yritys). Sovellusten rakentaminen Expon kanssa on ilmaista, ja voit lähettää ne Google Play- ja Apple App Store -kauppoihin ilman rajoituksia. Expo tarjoaa myös valinnaisia maksullisia pilvipalveluita.

Syväsukellus

Voinko käyttää Reactia ilman ohjelmistokehystä?

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.

Kehityksen reunalla olevat React ohjelmistokehykset

Kuten olemme tutkineet miten Reactia voidaan parantaa, olemme huomanneet, että Reactin integroiminen tiiviimmin ohjelmistokehysten kanssa (erityisesti reitityksen, bundlauksen ja palvelinteknologioiden kanssa) on suurin mahdollisuutemme auttaa Reactin käyttäjiä rakentamaan parempia sovelluksia. Next.js-tiimi on suostunut yhteistyöhön kanssamme tutkimalla, kehittämällä, integroimalla ja testaamalla ohjelmistokehysten kanssa yhteensopivia Reactin kehityksen reunalla olevia ominaisuuksia, kuten Reactin palvelinkomponentit.

Nämä ominaisuudet ovat lähempänä tuotantokäyttöä joka päivä, ja olemme keskustelleet muiden bundler- ja ohjelmistokehyskehittäjien kanssa niiden integroimisesta. Toivomme, että vuoden tai kahden kuluttua kaikilla tällä sivulla luetelluilla ohjelmistokehyksillä on täysi tuki näille ominaisuuksille. (Jos olet ohjelmistokehyskehittäjä, joka on kiinnostunut yhteistyöstä kanssamme näiden ominaisuuksien kokeilemiseksi, kerro meille!)

Next.js (App Router)

Next.js’s App Router on Next.js:n API:en uudelleensuunnittelu, joka tähtää React-tiimin full-stack arkkitehtuurin visioon. Se antaa sinun hakea dataa asynkronisissa komponenteissa, jotka suoritetaan palvelimella tai jopa rakennusaikana.

Next.js:ää ylläpitää Vercel. Voit julkaista Next.js-sovelluksen mihin tahansa Node.js- tai serverless-ympäristöön, tai omalla palvelimellasi. Next.js tukee myös staattista vientiä, joka ei vaadi palvelinta.

Sudenkuoppa

Next.js:n App Router on tällä hetkellä beta-vaiheessa eikä sitä vielä suositella tuotantokäyttöön (maaliskuussa 2023). Kokeillaksesi sitä olemassa olevassa Next.js-projektissa, seuraa tätä ohjeistusta.

Syväsukellus

Mitkä ominaisuudet kuvaavat React-tiimin full-stack arkkitehtuurin visiota?

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ä.