Sådan opretter du en React-komponent og offentliggør den på NPM

Lad os antage, at dette er et billede om React og NPM

Jeg tænkte på at lave en slags katarsis inden jeg startede denne historie, men lad os gå til løsningen. Katarsis er ikke nødvendig mere, fordi Redux-alternativet uden kompleksitet allerede er skabt: D

Pttsss! Glem ikke at læse den nye artikel om React Conditional Rendering (1 min. Læst)

Opdatering til 2018: For alle andre, der oplever fejl, som Webpack klager over jsx-syntaxen med Unexpected token, så tjek venligst denne Chris 'kommentar

Hvis du vil oprette en React-komponent og offentliggøre den i NPM, skal du gøre to ting:

  • Opret komponenten
  • Opret et projekt, hvor du tester din komponent

Oprettelse af komponenten

Lad os antage, at vores komponent kaldes react-fancy-komponent

Opret manuelt derefter disse filer manuelt:

.babelrc

webpack.config.js

package.json (glem ikke at ændre navnet i denne fil)

Lad os fortsætte med at køre ting:

npm-link bruges til at dev-teste vores komponent i vores testprojekt, mens vi udvikler det.

Opret derefter din komponent i /src/index.js

Lad os prøve med dette eksempel. Opret denne fil:

src / index.js

Færdig! Vores smarte komponent er færdig!

Opretter vores testprojekt

Lad os nu oprette et virkelig grundlæggende projekt til at teste vores smarte komponent.

Lad os derefter ændre vores src / App.js-fil, der tilføjer importen og komponentbrugen. Så du skal tilføje disse 2 linjer:

import fancy fra 'react-fancy-component';

Din src / App.js skal se sådan ud:

Og så, endelig, kør npm start og se, hvilken smuk dekorativ komponent du lige har oprettet! Du har det, mand!

Det skal se sådan ud

Faaancy mand

Lad os som sidste trin offentliggøre vores komponent.

Gå som første trin til din komponentmappe (react-fancy-komponent) og tilføj alle data, som du skal tilføje i pakken.json-filen, som navn, version, beskrivelse og forfatter.

Lad os så konfigurere npm til komponentmappen i komponentmappen til at offentliggøre din komponent (husk, at du har brug for en konto på http://npmjs.com/. Bare rolig, det er gratis… i øjeblikket ...).

Hvad du skal gøre, er at køre npm login og placere dit brugernavn, adgangskode og offentlig e-mail.

Kør derefter npm publicering og ... DET ER ALT!

Tjek denne mand: https://www.npmjs.com/package/react-fancy-component

Så fancy!

Fancy maaaaan!

Og magien? Hvor er magien?

Magien er på to linjer i hele projektet. Begge linjer er i webpack.config.json-filen.

  • libraryTarget: 'commonjs2': Denne linje siger “Hej, vores output skal være et eksporterbart modul!”. Tjek mere info i den officielle dokumentation.
  • eksterne: {'react': 'commonjs react'}: Denne linje siger "Hej, lad os bruge den React-afhængighed, der bruger den, der bruger mig!". Vær forsigtig med version-inkompatibiliteter.

Hvad med udviklingstiden?

Du skal køre npm start i to forskellige terminaler. Én terminal i komponentmappen og en anden i testprojektmappen.

Webpack kompilerer din komponent igen, hver gang du foretager en ændring i en hvilken som helst fil (i din komponent), og automatisk registrerer Webpack, vi har i vores testprojekt, ændringen og rekompilerer vores testprojekt. Du vil se dine ændringer i din browser.

Hvad med musikken?

Her den Fancy Man: