De auteur heeft Code.org geselecteerd om een donatie te ontvangen als onderdeel van het Write for DOnations-programma.
Introductie
Normaal gesproken zou je een nieuw project aanmaken met behulp van Create React App, maar het kan veel tijd kosten om meer dan 140 MB aan afhankelijkheden te installeren. Vite is een lichtgewicht tool die slechts 31 MB aan afhankelijkheden gebruikt, wat tijd bespaart bij het starten van een nieuw project. Vite maakt ook gebruik van de browser-native ES (ECMAScript) modules om naar JavaScript-bestanden te linken, waardoor het hele bundel niet opnieuw wordt gebouwd na elke bestandswijziging. Deze verschillen resulteren in een snellere ervaring bij het maken, bijwerken en bouwen van een React-applicatie met Vite.
Deze tutorial zal een nieuwe React-applicatie bouwen met behulp van de Vite-tool. Je zult een eenvoudige app maken met een nieuw component, CSS en een afbeeldingsbestand, en een geoptimaliseerde bundel voor implementatie voorbereiden.
Vereenvoudig het implementeren van React-applicaties met DigitalOcean App Platform. Implementeer React direct vanuit GitHub in enkele minuten.
Vereisten
Om deze tutorial te volgen, heb je het volgende nodig:
- Node.js versie 12.2.0 of hoger geïnstalleerd op je computer. Je kunt de nieuwste versie van Node.js installeren met onze tutorial over Hoe Node.js te installeren.
- Yarn package manager versie 1.22.0 of hoger geïnstalleerd op je computer. Je kunt Yarn installeren met Stap 1 in Hoe de Yarn Package Manager voor Node.js te installeren en te gebruiken.
- Bekendheid met HTML, CSS, en modern JavaScript. Het is ook handig om bekend te zijn met modern JS gebruikt in React.
- A foundational knowledge of React, which you can learn with the How To Code in React series.
- A mobile phone connected to the same Wifi network as your computer so you can preview your app from mobile.
Stap 1 — Het maken van een Vite Project
In deze stap maak je een nieuw React-project met behulp van de Vite-tool vanaf de commandoregel. Je zult de yarn package manager gebruiken om de scripts te installeren en uit te voeren.
Voer het volgende commando uit in je terminal om een nieuw Vite-project op te zetten:
- yarn create vite
Dit commando zal de Vite-executable uitvoeren vanuit de externe npm-repository. Het zal de benodigde tools configureren om een React lokale ontwikkelomgeving op te zetten. Ten slotte opent het een command-line menu voor projectinstellingen en taaltype.
Na het voltooien van het script wordt je gevraagd om een projectnaam in te voeren:
Outputyarn create v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "[email protected]" with binaries:
- create-vite
- cva
? Project name: » vite-project
Typ je projectnaam (deze tutorial zal digital-ocean-vite als voorbeeldnaam gebruiken):
- digital-ocean-vite
Na het invoeren van je projectnaam zal Vite je vragen om een framework te selecteren:
Output? Select a framework: » - Use arrow-keys. Return to submit.
Vanilla
Vue
> React
Preact
Lit
Svelte
Others
Vite stelt je in staat om verschillende soorten projecten op te zetten, niet alleen React. Momenteel ondersteunt het React, Preact, Vue, Lit, Svelte, en vanilla JavaScript-projecten.
Gebruik je toetsenbordpijltjestoetsen om React te selecteren.
Na het selecteren van het React-framework zal Vite je vragen om het taaltype te kiezen. Je kunt JavaScript of TypeScript gebruiken voor je project.
Gebruik je pijltoetsen om JavaScript te selecteren:
Output? Select a variant: » - Use arrow-keys. Return to submit.
> JavaScript
TypeScript
JavaScript + SWC
TypeScript + SWC
Nadat het framework is ingesteld, zie je een uitvoer waarin staat dat het project is opgezet. Vite zal je dan instrueren om afhankelijkheden te installeren met behulp van Yarn:
OutputDone:
Scaffolding project in path\to\digital-ocean-vite...
Done. Now run:
cd digital-ocean-vite
yarn
yarn dev
Done in 129.89s.
Navigeer naar je projectmap zoals aangegeven:
- cd digital-ocean-vite
Vervolgens gebruik je het yarn-commando om de afhankelijkheden van het project te installeren:
- yarn
Wanneer het klaar is, zal de installatie van de afhankelijkheden een uitvoer retourneren met de tijd die het kostte om de afhankelijkheden te installeren:
Outputsuccess Saved lockfile.
Done in 43.26s.
Je hebt nu een nieuw React-project opgezet met behulp van Vite en de vereiste pakketten voor React en Vite geïnstalleerd.
Vervolgens start je de ontwikkelingsserver om de applicatie te testen.
Stap 2 — Starten van de Ontwikkelingsserver
In deze stap start je de ontwikkelingsserver om te verifiëren dat alles werkt.
Vanuit de map digital-ocean-vite, gebruik je het volgende commando om de ontwikkelingsserver te starten:
- yarn run dev
Dit commando is een alias van het vite-commando. Het zal je project uitvoeren in de ontwikkelingsmodus.
Je ontvangt de volgende uitvoer:
OutputVITE v4.0.4 ready in 847 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h to show help
Vervolgens open je je browser en ga je naar http://localhost:5173/. Het standaard React-project zal draaien op poort 5173:
Als je deze app ziet draaien, heb je succesvol React geïnstalleerd met Vite. Hierna ga je je app bekijken vanaf je mobiele telefoon.
Stap 3 — Voorbeeld van je App vanaf Mobiele Telefoon
Vite exposeert standaard uw ontwikkelingsapplicatie niet aan uw netwerk. In deze stap zult u de app blootstellen aan uw lokale netwerk om deze vanaf uw mobiele telefoon te bekijken.
Om uw app uit te voeren in uw lokale netwerk, moet u eerst de huidige server stoppen. Gebruik in uw terminal CTRL+C om de momenteel draaiende ontwikkelingsserver te beëindigen.
Gebruik vervolgens het volgende commando om uw project uit te voeren:
- yarn run dev --host
De --host vlag vertelt Vite om uw app bloot te stellen aan het lokale netwerk.
U ontvangt deze uitvoer in uw terminal:
OutputVITE v4.0.4 ready in 747 ms
➜ Local: http://localhost:5173/
➜ Network: http://your_ip_address:5173/
➜ press h to show help
Dit is een lokaal IP-adres, uniek voor uw computernetwerk of router.
Open een browser op uw mobiele telefoon, typ vervolgens het bovenstaande IP-adres en poort in om de preview van uw Vite-applicatie vanaf uw mobiele telefoon te openen:
U heeft nu uw app uitgevoerd in de ontwikkelingsomgeving en geverifieerd dat deze werkt. In de volgende stap zult u de boilerplate-code verwijderen die bij Vite wordt geleverd.
Stap 4 — Verwijderen van de Standaard Boilerplate
In deze stap zult u de boilerplate-bestanden van het Vite-project uit de src/-directory verwijderen, zodat u een nieuwe applicatie kunt opzetten. U zult zich ook vertrouwd maken met de standaard projectstructuur van de huidige app.
Gebruik het volgende commando om de inhoud van uw src/-directory te bekijken:
- ls src/
De output zal alle beschikbare bestanden weergeven:
OutputApp.css
App.jsx
assets
index.css
main.jsx
Gebruik het rm-commando om een bestand of map te verwijderen. Gebruik de volgende commando’s om de standaardbestanden van het project te verwijderen:
- rm src/App.css
- rm src/App.jsx
- rm src/index.css
Verwijder de map assets met het volgende commando:
- rm -r src/assets
De -r-vlag staat voor een recursieve operatie, wat nodig is bij het verwijderen van een map met de bijbehorende inhoud.
Na het verwijderen van deze bestanden blijft alleen main.jsx over in de map src/. Voer het commando ls src/ opnieuw uit om de overgebleven bestanden te zien:
- ls src/
Nu bevat de map alleen het bestand main.jsx:
Outputmain.jsx
Omdat je alle andere bestanden hebt verwijderd, moet je nu een verwijzing in main.jsx naar een verwijderd CSS-bestand ook verwijderen.
Open main.jsx ter bewerking met het volgende commando:
- nano src/main.jsx
Verwijder de gemarkeerde regel om de verwijzing naar het CSS-bestand los te koppelen:
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import "./index.css"
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
Sla het main.jsx-bestand op en sluit het.
Maak een nieuw bestand met de naam App.jsx in de map src/ met het volgende commando:
- nano src/App.jsx
Voeg de volgende code toe aan het bestand App.jsx:
export default function App() {
return (
<>
<div>Hello World</div>
</>
);
}
Deze code creëert een nieuwe functionele React-component genaamd App. Het export default-voorvoegsel vertelt JavaScript om deze functie als standaardexport te gebruiken. Het functielichaam bevat een <div> met de tekst Hello World.
Sla het App.jsx-bestand op en sluit het.
Gebruik het volgende commando om de ontwikkelingsserver opnieuw te starten:
- yarn run dev --host
Nu, open of vernieuw http://localhost:3000 in je browser om toegang te krijgen tot een lege pagina waarop de tekst Hallo Wereld wordt weergegeven:
In deze stap heb je enkele standaardbestanden uit het Vite-project verwijderd. Vervolgens ga je een basisapplicatie bouwen met nieuwe componenten, CSS-bestanden en afbeeldingsbestanden.
Stap 5 — Het maken van een basisapplicatie
In deze stap ga je componenten maken, CSS-bestanden toevoegen en koppelingen maken naar afbeeldingen door een basisapplicatie te creëren. Begin met het afsluiten van de ontwikkelingsserver.
In het volgende onderdeel ga je een nieuwe component maken voor je React-applicatie.
Het maken van een component
Het toevoegen van een nieuwe component voegt modulariteit toe aan je project. Voeg alle componenten toe aan de map components om alles georganiseerd te houden.
Gebruik de volgende opdracht om een nieuwe map genaamd components te maken binnen src/:
- mkdir src/components
Maak vervolgens een nieuw bestand met de naam Welcome.jsx in de map src/components/ met de opdracht:
- nano src/components/Welcome.jsx
Voeg de volgende code toe aan het bestand Welcome.jsx:
export default function Welcome() {
return (
<>
<div className="wrapper">
<h1>Welcome To My App</h1>
<p>This is going to be the coolest app in the world!</p>
</div>
</>
);
}
De bovenstaande code zal een nieuwe functionele React-component genaamd Welcome aanmaken. Het voorvoegsel export default vertelt JavaScript om deze functie als standaard export te gebruiken.
De div-tag met een class-naam van wrapper stelt je in staat om dit gedeelte te targeten in de CSS. De h1– en p-tags zullen de boodschap op het scherm weergeven.
Sla het bestand op en sluit het.
Vervolgens zul je deze nieuwe component refereren in je bestand App.jsx.
Open App.jsx met de volgende opdracht:
- nano src/App.jsx
Update de inhoud van App.jsx met de gemarkeerde code:
import Welcome from "./components/Welcome"
export default function App() {
return (
<>
<Welcome />
</>
)
}
Deze regel code zal Welcome.jsx importeren in de app en de nieuwe component linken aan de functie-body. Wanneer klaar, sla het bestand op en sluit het.
In de volgende subsectie zul je een afbeelding aan je app toevoegen.
Het Toevoegen van een Afbeelding
Het toevoegen van afbeeldingen in React is een veelvoorkomend gebruik in app-ontwikkeling.
Maak een nieuwe map genaamd img aan onder de src/-map met de volgende opdracht:
- mkdir src/img
Navigeer naar je src/img-map met deze opdracht:
- cd src/img
Je zult deze afbeelding van Sammy downloaden naar src/img.
Download de afbeelding met wget:
- wget https://html.sammy-codes.com/images/small-profile.jpeg
Hernoem de afbeelding met de volgende opdracht:
- mv small-profile.jpeg sammy.jpeg
Deze opdracht hernoemt het afbeeldingsbestand van small-profile.jpeg naar sammy.jpeg, wat later gemakkelijker te verwijzen zal zijn.
Keer terug naar je hoofdmap met deze opdracht:
- cd ../../
Vervolgens ga je het bestand Welcome.jsx bijwerken om naar deze afbeelding te linken. Open het bestand:
- nano src/components/Welcome.jsx
Update je Welcome.jsx-bestand door de gemarkeerde regels toe te voegen:
import Sammy from "../img/sammy.jpeg"
export default function Welcome() {
return (
<>
<div className="wrapper">
<h1>Welcome To My App</h1>
<p>This is going to be the coolest app in the world!</p>
<img src={Sammy} alt="Sammy Image" width={200} height={200} />
</div>
</>
)
}
De eerste regel zal de afbeelding importeren in React als een module.
De andere regel binnen de functie body zal een nieuwe <img>-tag maken en de src-attribuut koppelen aan het zojuist geïmporteerde afbeeldingscomponent. De width– en height-props zullen de overeenkomstige afbeeldingsattributen instellen op 200 pixels.
Sla het Welcome.jsx-bestand op en sluit het.
Vervolgens voeg je CSS toe aan je project.
CSS toevoegen
In deze subsectie voeg je een aangepast CSS-bestand toe aan je project om je app te stylen.
Maak een nieuwe map genaamd css onder de src/-map met de volgende opdracht:
- mkdir src/css
Maak nu een nieuw CSS-bestand genaamd main.css in src/css:
- nano src/css/main.css
Voeg de volgende code toe aan het main.css-bestand:
body {
display: grid;
place-items: center;
background-color: #b4a7d6;
font-family: Arial, Helvetica, sans-serif;
}
.wrapper {
background-color: #fff9e6;
padding: 20px;
border-radius: 10px;
}
h1 {
color: #8873be;
}
In de bovenstaande CSS stel je een gridweergave in en plaats je items in het midden voor het body. Je stelt ook een lettertypefamilie en achtergrondkleur in.
De klasse .wrapper zal de wrapper div selecteren in uw bestand Welcome.jsx. Stijlen voor deze klasse zullen het volgende doen:
- Stel een achtergrondkleur in.
- Voeg padding van 20 pixels toe.
- Voeg afgeronde hoeken van 10 pixels toe.
De selector h1 zal het tag in HTML targeten, waarbij de kleur wordt ingesteld op een tint paars.
Wanneer u klaar bent, slaat u het bestand main.css op en sluit u het.
Vervolgens zult u het nieuwe CSS-bestand refereren vanuit het component Welcome.jsx. Open het bestand Welcome.jsx:
- nano src/components/Welcome.jsx
Werk de inhoud van het bestand bij met de gemarkeerde regel:
import Sammy from "../img/sammy.jpeg"
import "../css/main.css"
export default function Welcome() {
return (
<>
<div className="wrapper">
<h1>Welcome To My App</h1>
<p>This is going to be the coolest app in the world!</p>
<img src={Sammy} alt="Sammy Image" width={200} height={200} />
</div>
</>
)
}
Deze regel zal het CSS-bestand importeren als een module in uw component. Mogelijk moet u de regel bijwerken met het juiste bestandspad voor uw projectmap.
Wanneer u klaar bent, slaat u het bestand Welcome.jsx op en sluit u het.
In de volgende subsectie zult u de titelbalk van uw app wijzigen.
De app-titelbalk wijzigen
Standaard toont de Vite-app de tekst Vite + React in de titelbalk van het browservenster. In deze stap zult u dit wijzigen naar een beschrijvende titel.
Open index.html in uw hoofdmap:
- nano index.html
Werk de <title>-tag bij met de gemarkeerde tekst:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Cool App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
Deze tekst vervangt de standaard titelbalk van de Vite App met je aangepaste app-titel.
Sla het index.html bestand op en sluit het.
Als je de ontwikkelingsserver opnieuw moet starten, voer dan dit commando uit:
- yarn run dev --host
Na al deze wijzigingen, ga naar http://localhost:5173 om je app te bekijken. Je zult een nieuwe versie van je app zien.
Je kunt de ontwikkelingsserver sluiten wanneer je klaar bent om verder te gaan met bouwen.
Je hebt nu een afbeelding toegevoegd, stijlen veranderd, en een gepolijste UI gemaakt. In de volgende en laatste stap, zul je een geoptimaliseerd app-bundel bouwen voor implementatie.
Stap 6 — Bouwen voor Productie
In deze stap zul je een geoptimaliseerd app-bundel bouwen dat klaar is om naar een server te implementeren. Om een build te maken, voer het volgende commando uit in de terminal:
- yarn run build
Dit commando creëert een nieuwe dist map met geminificeerde bronbestanden die je naar je server kunt implementeren voor productie.
Je zult een output ontvangen vergelijkbaar met dit:
Outputvite v4.0.4 building for production...
✓ 34 modules transformed.
dist/index.html 0.45 kB
dist/assets/sammy-9cb83ad5.jpeg 6.74 kB
dist/assets/index-d1c95597.css 0.19 kB │ gzip: 0.16 kB
dist/assets/index-e0751083.js 143.19 kB │ gzip: 46.04 kB
✨ Done in 1.63s.
Je kunt nu de inhoud van de map dist implementeren op een online server. Als je een Apache– of Nginx-server hebt, kun je de inhoud handmatig uploaden. Je kunt ook een app-platform gebruiken om het bouwscript uit te voeren en automatisch de bouwbestanden te genereren. Om je React-app te implementeren naar DigitalOcean’s App Platform, volg onze tutorial over Hoe je een React-toepassing implementeert naar DigitalOcean App Platform.
Conclusie
In deze tutorial heb je een nieuwe React-app gemaakt met behulp van de Vite-tool. Je hebt een frisse React-app gescaffold met de yarn create vite opdracht. Na het verwijderen van de boilerplate-code heb je je componenten gemaakt door een aangepaste afbeelding toe te voegen, een CSS-bestand en de titelbalk te wijzigen. Ten slotte heb je een geoptimaliseerd bundel gemaakt met behulp van de yarn run build opdracht, klaar om te implementeren.
Nu je een React-app hebt gebouwd met Vite, kijk wat je nog meer kunt doen met React in de Hoe te coderen in React.js-serie en ontdek andere React-tutorials.
Source:
https://www.digitalocean.com/community/tutorials/how-to-set-up-a-react-project-with-vite