React

Kirjasto web- ja natiivikäyttöliittymille

Luo käyttöliittymiä komponenteista

Reactin avulla voit rakentaa käyttöliittymiä yksittäisistä palasista eli komponenteista. Luo omia React -komponentteja kuten Thumbnail, LikeButton, ja Video. Yhdistä ne sitten kokonaisiksi sivuiksi ja sovelluksiksi.

Video.js

function Video({ video }) {
return (
<div>
<Thumbnail video={video} />
<a href={video.url}>
<h3>{video.title}</h3>
<p>{video.description}</p>
</a>
<LikeButton video={video} />
</div>
);
}

Työskentelet sitten yksin tai tuhansien muiden kehittäjien kanssa, Reactin käyttäminen tuntuu samalta. Se on suunniteltu yhdistämään komponentteja, jotka yksittäiset ihmiset, tiimit ja organisaatiot ovat kirjoittaneet.

Kirjoita komponentteja koodilla ja merkintäkielellä

React komponentit ovat JavaScript funktioita. Halutako näyttää jotain sisältöä ehdollisesti? Käytä if ehtolausetta. Näytätkö listaa? Kokeile taulukon map() metodia. Reactin oppiminen on ohjelmoinnin oppimista.

VideoList.js

function VideoList({ videos, emptyHeading }) {
const count = videos.length;
let heading = emptyHeading;
if (count > 0) {
const noun = count > 1 ? videota' : 'video';
heading = count + ' ' + noun;
}
return (
<section>
<h2>{heading}</h2>
{videos.map(video =>
<Video key={video.id} video={video} />
)}
</section>
);
}

Tätä merkintäkieltä kutsutaan nimellä JSX. Se on JavaScript syntaksin lisäosa, jonka React teki suosituksi. JSX merkintäkoodin laittaminen lähelle renderöintilogiikkaa tekee React komponenteista helposti luotavia, ylläpidettäviä ja poistettavia.

Lisää interaktiivisuutta siellä, missä sitä tarvitset

React komponentit vastaanottavat tietoa ja palauttavat mitä ruudulla pitäisi näkyä. Voit välittää niille uutta dataa vastauksena vuorovaikutukseen, kuten jos käyttäjä kirjoittaa jotain kenttään. React päivittää ruudun sitten vastaamaan uutta dataa.

SearchableVideoList.js

import { useState } from 'react';

function SearchableVideoList({ videos }) {
const [searchText, setSearchText] = useState('');
const foundVideos = filterVideos(videos, searchText);
return (
<>
<SearchInput
value={searchText}
onChange={newText => setSearchText(newText)} />
<VideoList
videos={foundVideos}
emptyHeading={`No matches for “${searchText}”`} />
</>
);
}

Sinun ei tarvitse rakentaa koko sivua Reactilla. Voit lisätä Reactin olemassa olevaan HTML sivuun, ja renderöidä interaktiivisia React komponentteja missä tahansa sivulla.

Hyppää full-stackkiin ohjelmistokehyksellä

React on kirjasto. Sen avulla voit laittaa komponentteja yhteen, mutta se ei määrittele miten teet reitittämistä tai tiedonhakua. Rakentaaksesi kokonaisen sovelluksen Reactilla, suosittelemme full-stack React ohjelmistokehyksiä kuten Next.js tai Remix.

confs/[slug].js

import { db } from './database.js';
import { Suspense } from 'react';

async function ConferencePage({ slug }) {
const conf = await db.Confs.find({ slug });
return (
<ConferenceLayout conf={conf}>
<Suspense fallback={<TalksLoading />}>
<Talks confId={conf.id} />
</Suspense>
</ConferenceLayout>
);
}

async function Talks({ confId }) {
const talks = await db.Talks.findAll({ confId });
const videos = talks.map(talk => talk.video);
return <SearchableVideoList videos={videos} />;
}

React on myös arkkitehtuuri. Ohjelmistokehykset, jotka sen toteuttavat antavat sinun hakea dataa asynkronisissa komponenteissa, jotka suoritetaan palvelimella tai jopa build -prosessin aikana. Lue dataa tiedostosta tai tietokannasta ja välitä se interaktiivisille komponenteille.

Käytä parasta jokaisella alustalla

Ihmiset rakastavat rakentaa web- ja natiivisovelluksia eri syistä. Reactin avulla voit rakentaa sekä web- että natiivisovelluksia käyttäen samoja taitoja. Se nojautuu kunkin alustan vahvuuksiin tehden käyttöliittymmistäsi oikealta tuntuvat kaikilla alustoilla.

example.com

Pysy aidosti verkossa

Ihmiset odottavat verkkosivujen latautuvan nopeasti. Palvelimella, Reactin avulla voit aloittaa HTML koodin lataamisen sinä aikana kun vielä haet dataa, asteittain täyttäen puuttuvan sisällön ennen kuin yhtään JavaScriptia on ladattu. Asiakaspuolella, React käyttää standardoituja Web API:a pitääkseen käyttöliittymän vastaanottavaisena keskellä renderöintiä.

4:43 PM

Kehitä aidosti alustalle

Ihmiset odottavat natiivisovellusten näyttävän ja tuntuvan niiden alustalta. React Native ja Expo antavat sinun rakentaa sovelluksia Reactilla Androidille, iOS:lle, ja muille. Ne näyttävät ja tuntuvat aidolta, koska niiden UI:t ovat täysin natiiveja. Ne eivät ole web-view elementtejä, komponenttisi renderöi oikeita alustan tarjoamia Android ja iOS ruutuja.

Reactin avulla, sinä voit olla sekä web- että natiivikehittäjä. Tiimisi voi toimittaa monille alustoille ilman käyttäjäkokemuksen heikentämistä. Organisaatiosi voi yhdistää alustasiilot ja muodostaa tiimejä, jotka omistavat ominaisuudet päästä-päähän.

Päivitä kun tulevaisuus on valmis

React lähestyy muutoksia huolella. Jokainen React commit testataan bisneskriittisillä pinnoilla, yli miljardin käyttäjän kesken. Yli 100 000 React komponenttia Metalla auttavat vahvistamaan jokaista muutosstrategiaa.

React-tiimi on aina tutkimassa miten kehittää Reactia. Joissain tutkimuksissa voi kestää vuosia ennen kuin tuloksia näkyy. Reactilla on korkea kynnys ottaa tutkimusideoita tuotantoon. Vain todistetut lähestymistavat tulevat osaksi Reactia.

Liity miljoonien yhteisöön

Et ole yksin. Kaksi miljoonaa kehittäjää ympäri maailmaa vierailevat Reactin dokumentaatiossa joka kuukausi. React on jotain, missä ihmiset ja tiimit ovat samaa mieltä keskenään.

People singing karaoke at React Conf
Sunil Pai speaking at React India
A hallway conversation between two people at React Conf
A hallway conversation at React India
Elizabet Oliveira speaking at React Conf
People taking a group selfie at React India
Nat Alison speaking at React Conf
Organizers greeting attendees at React India

Tämän takia React on enemmän kuin kirjasto, arkkitehtuuri, tai edes ekosysteemi. React on yhteisö. Se on paikka, jossa voit kysyä apua, löytää mahdollisuuksia, tavata uusia ystäviä. Tapaat sekä kehittäjiä että designereita, aloittelijoita ja asiantuntijoita, tutkijoita ja artisteja, opettajia ja opiskelijoita. Taustamme saattavat olla erilaisia, mutta React antaa meidän kaikkien rakentaa käyttöliittymiä yhdessä.

Tervetuloa React yhteisöön

Aloitetaan