Lean Reagera Projekt Med Paket

exempelkod finns på Github.

När jag först försökte Reagera för ett par år sedan var det en mardröm att sätta upp ett nytt projekt. Du hade antingen en hel dags jobb framför dig att göra det från grunden eller googlade på ett startpaket på Github. Att hitta rätt en kan naturligtvis kräva en full dag också, eftersom alla som var i att Reagera hade ett par olika versioner som ligger runt, allt för ofta med trasslat upp beroenden.

kom cli och allt förändrades över en natt. Jag var dock aldrig riktigt nöjd med att ha en ganska stor webpack config-fil som sitter där utan att egentligen vara säker på vad allt det gör. Dessutom, jag är ganska påstridig om att strukturera mitt projekt så jag fann mig själv strular runt en hel del på och byta namn på mappar och radera filer.

för några månader sedan version 1 av en ny bundler kallas Paket introducerades. Kan detta vara ett bra tillvägagångssätt för att inrätta ett nytt projekt från början?

Byggnadsställningar

Öppna terminalen och köra kommandon nedan. Jag använder Garn, men uppenbarligen npm fungerar lika bra om du vill följa med.

$ mkdir reagera-paket-demo
$ cd-reagera-paket-demo
$ garn init -y
$ garn lägg till react react-dom
$ garn lägg till -D-paket-bundler babel-preset-reagera babel-preset-env
$ mkdir src
$ touch src/index.html
$ touch src/index.js
$ touch .babelrc

Skifte bundler kan vara installerade världen över, men försöker bara det att jag föredrar att hålla det i projektet.

Config

Paket fras är “zero configuration”. Det är ganska mycket riktigt, men två saker måste göras.

Först av alla, öppna projektet i din textredigerare och lägg till dessa skript för att paketet.json-filen:

"skript": {
"dev": "paket ./src/index.html"
"bygga": "paket bygga ./src/index.html/"
},

Kör dev-skript kommer att lansera en dev-server som klockor koden för förändringar och uppdaterar webbläsaren, ganska mycket som Webpack s dev-server. Bygga manuset bygger appen för produktion.

Den andra lite i inställning är Babel som transpiles ES6 eller vad som helst för att vanliga gamla skolan JS. Bara att lägga dessa två inställningar .babelrc:

{
"presets": ["miljö", "reagerar"]
}

Hello World

Och nu för en liten bit av kod. Först av allt ett minimalt html-sidan …

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Reagera Paket Demo</title>
</head>
<kropp>
<div id="app"></div>
<script src="./index.js"></script>
</kropp>
< html>

… och sedan några rader Reagera:

importera Reagerar från "reagerar";
importera { göra } från "reagera-dom";
const App = () =>{
return (
<div>
<h1>Hej Paket</h1>
</div>

};
render(<App />, dokument.getElementById("app"));

Om du gå tillbaka till terminalen och skriv in $ garn köra dev projektet ska bygga. Bara öppna en flik i din webbläsare och navigera till localhost:1234. Jag tror inte att jag någonsin har använts som hamn innan …

Bonus: SASS

jag brukar använda SASS för styling och här Paketet lyser verkligen när det kommer till enkelhet! Självklart behöver du installera sass och lägga till lite styling:

$ garn add-D nod-sass
$ mkdir src/sass
$ tryck på src/sass/main.scss
$ tryck på src/main.css

För den demo vi ska hålla oss till några riktigt minimal styling. Denna bit av skräp som inte gör någon nytta SASS naturligtvis, men vad som helst. Personligen har jag hellre använda scss-syntax, vilket jag tycker är lättare att läsa än sass.

*
*::efter
,*::innan {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
}
body {
background-color: #ecf0f1;
färg: #d35400;
font-family: sans-serif;
font-size: 16px;
rad-höjd: 1,7 rem;
padding: 3rem;
}
h1 {
text-align: center;
margin-top: 5rem;
font-size: 6rem;
}

importera den sass fil i index.js

importera "./sass/main.scss"

Och det är det! Paketet kommer att inse att du har några sass/scss styling och hjälper gärna till att bygga det och spruta för dig.

Lean Reagera Projekt Med Paket