Fra nettet til telefonen

Du kan React fra nettet — det er hele forutsetningen for dette kurset. Den gode nyheten: komponenttenkningen overlever. Den like ærlige nyheten: alt rundt komponentene er annerledes. Denne leksjonen kartlegger hva som er likt — og hva som byttes ut.

Komponenttenkningen overlever

En React-komponent er en funksjon som returnerer markup, med props inn og state som tegner skjermen på nytt. Det gjelder også i React Native: samme modell, samme krøllparenteser, samme useState. Det som byttes ut, er hva som står i returen — telefonen har ikke nettleserens elementer.

1// Nettet (HTML)                // Telefonen (React Native)2<div class="kort">               <View style={stiler.kort}>3  <h1>Møte kl. 9</h1>              <Text style={stiler.tittel}>Møte kl. 9</Text>4  <p>Ta med notatbok.</p>          <Text>Ta med notatbok.</Text>5</div>                            </View>

Teksten må bo i Text

Grunnboksen heter View, og tekst heter Text — og det er en hard regel: all tekst skal ligge inni en `<Text>`. Skriver du tekst rett under en <View>, får du en feil, ikke en linje. Det er den vanligste første-feilen i React Native, så vi tar den med en gang:

1// Feil: tekst rett i View — krasjer2<View style={stiler.kort}>Møte kl. 9</View>3 4// Riktig: teksten ligger i sin egen <Text>5<View style={stiler.kort}>6  <Text>Møte kl. 9</Text>7</View>

Stiler som JavaScript-objekter

Det finnes ingen CSS-fil og ingen class="…". Stiler lager du med StyleSheet.create — vanlige JavaScript-objekter — og henger på komponenten med style-proppen:

1import { StyleSheet } from "react-native";2 3const stiler = StyleSheet.create({4  kort: { padding: 16, backgroundColor: "#fffaf2" },5  tittel: { fontSize: 20, fontWeight: "600" },6});7 8// Bruken: <View style={stiler.kort}> … </View>

Og kaskaden? Finnes ikke. En stil gjelder bare komponenten den henger på — ingen regler arver nedover, ingen selectorer konkurrerer om samme element. Det høres ut som et tap; i praksis fjerner det hele sjangeren av «hvor kommer denne fargen fra?»-feil.