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.
npm init -ynpm install --save react react-domnpm install --save-dev typescript- typescript (npm)
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ør
npm i --save-dev @types/react @types/react-dom- @types/react (npm)
- @types/react-dom (npm)
Legg merke til --save-dev. Om dette er ukjent for deg ville jeg tatt meg tiden til å se raskt på hvordan NPM strukturerer avhengigheter.
{
"compilerOptions": {
"target": "es6",
"allowJs": true,
"jsx": "react",
"module": "nodenext",
"moduleResolution": "nodenext",
"outDir": "./dist",
"strict": true,
"esModuleInterop": true
},
"include": ["src/**/*"]
}npm install --save-dev webpack webpack-cli webpack-dev-server- Webpack
- webpack (npm)
- webpack documentation
- Webpack CLI
- Webpack Dev Server
const path = require("path");
module.exports = {
mode: "development",
entry: "./src/index.tsx",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
},
resolve: {
extensions: [".tsx", ".ts", ".js"],
},
};npm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react @babel/preset-typescript- Babel/core
- Babel-loader
- Babel/preset-env
- Babel/preset-react
- Babel/preset-typescript
{
"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 webpack og babel! Oppdater webpack.config.js til å inkludere følgende
// ...
module.exports = {
// ...
module: {
rules: [
{
test: /\.(ts|tsx)$/,
exclude: /node_modules/,
use: "babel-loader",
},
],
},
};<!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 med:
npm install --save-dev html-webpack-plugin- HtmlWebpackPlugin documentation
- html-webpack-plugin (npm)
Oppdater webpack.config.js med 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.json til å 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!