Målet med workshoppen her er at du skal få praktisk kjennskap til "legoklossene" vi har sett på underveis i kvelden. For dere som har tidligere bygget enkle react-applikasjoner med f.eks "create-react-app" er det lett å ikke helt sette pris på hva som faktisk foregår i det du har kjørt "npm start" eller "npm run build".
I denne workshoppen skal går vi gjennom dette, steg for steg. Vi starter enkelt, og ønsker å sette opp en basic react app med typescript, som benytter seg av webpack og babel for transpilering og bygg.
Merk at hovedpoenget her ikke er å bli først ferdig, men å roe ned og prøve å forstå hvorfor hvert steg i worlshopen gjøres, og hva de ulike delene gjør. Bruk lenkene godt og fordyp deg om det er noe du ikke forstår.
- Sett opp en package.json med
npm init -y - Installer React, React DOM med kommandoen
npm install --save react react-dom - Installer Typescript med
npm install --save-dev typescript. Nå som vi har fått på plass typescript er det en god i de å dra med seg typedeklerasjoner for pakkene vi benytter for react koden vår, kjørnpm i --save-dev @types/react @types/react-dom. Legg merke til--save-dev. Om dette er ukjent for deg ville jeg tatt meg tiden til å se raskt på hvordan NPM strukturerer avhengigheter. - Set opp
webpack.config.jspå rot - Sett opp en basic
tsconfig.jsonog legg den på rotnivå av repo. For nå holder det med
{
"compilerOptions": {
"target": "es5",
"allowJs": true,
"jsx": "react",
"moduleResolution": "node",
"outDir": "./dist",
"strict": true,
"esModuleInterop": true
},
"include": ["src/**/*"]
}- Installer
webpackmednpm install --save-dev webpack webpack-cli webpack-dev-server - Set opp
webpack.config.jspå rot
const path = require("path");
module.exports = {
entry: "./src/index.tsx",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
},
resolve: {
extensions: [".tsx", ".ts", ".js"],
},
};- Installer Babel og aktuelle presets
npm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react @babel/preset-typescript - Set opp en
.babelrcfil
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript"
]
}
La oss ta en fot i bakken og lese oss raskt opp på hva disse preset'ene faktisk inneholder og gjør. Les doc'en før du går videre!
- La oss integrere
webpackogbabel! Oppdaterwebpack.config.jstil å inkludere følgende
// ...
module.exports = {
// ...
module: {
rules: [
{
test: /\.(ts|tsx)$/,
exclude: /node_modules/,
use: "babel-loader",
},
],
},
};- Sett opp
./src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Code Academy - React</title>
</head>
<body>
<div id="root"></div>
</body>
</html>- For å få webpack til å spille på lag med html-filen over trenger vi en ny plugin - html-webpack-plugin! Les deg opp på hva den gjør her.
- Installer den
npm install --save-dev html-webpack-plugin - Oppdater
webpack.config.jsmed den nye plugin'en, og pek den på filen vi opprettet over.
// ...
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
// ...
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html",
}),
],
};- La oss opprette en enkel react-komponent -
./src/index.tsx
import React, { useState } from "react";
import ReactDOM from "react-dom/client";
const App: React.FC = () => {
const [counter, setCounter] = useState(0);
return (
<div>
<h2>Hei, verden! 😎</h2>
<button onClick={() => setCounter(counter + 1)}>Klikk?</button>
<p>Du har klikket på meg {counter} ganger🥵</p>
</div>
);
};
const rootElement = document.getElementById("root");
if (!rootElement) {
throw new Error("root not found");
}
const root = ReactDOM.createRoot(rootElement);
root.render(<App />);- Nå er alle småstegene underveis på plass, la oss oppdatere vår
package.jsontil å dra nytte av oppsettet vårt! Legg til følgende:
"scripts": {
"start": "webpack serve --open",
"build": "webpack --mode production"
}- Start opp appen med
npm start. Dette skal forhåpentligvis starte opp applikasjonen og åpne den opp i nettleseren din. - Legg merke til at webpack vil lytte på endringer på filene dine og serve disse på nytt. Hot reload!