Jak vytvořit komponentu React a publikovat ji na NPM

Předpokládejme, že se jedná o obrázek o React a NPM

Před zahájením tohoto příběhu jsem přemýšlel o provedení nějaké katarze, ale pojďme k řešením. Katarze již není nutná, protože již byla vytvořena alternativa Redux bez složitosti: D

Pttsss! Nezapomeňte si přečíst nový článek React Conditional Rendering (přečteno 1 min)

Aktualizace pro rok 2018: Pro kohokoli jiného, ​​kdo narazil na chyby, které si Webpack stěžoval na syntaxi jsx s neočekávaným tokenem, zkontrolujte prosím tento komentář od Chrisa

Pokud chcete vytvořit komponentu React a publikovat ji v NPM, musíte udělat dvě věci:

  • Vytvořte komponentu
  • Vytvořte projekt, ve kterém vyzkoušíte komponentu

Vytvoření komponenty

Předpokládejme, že naše komponenta se bude jmenovat reaktická-fantazijní-komponenta

Poté ručně vytvořte tyto soubory:

.abelrc

webpack.config.js

package.json (nezapomeňte změnit název v tomto souboru)

Pokračujme v běhu věcí:

Odkaz npm bude použit k dev-testování naší komponenty v našem testovacím projektu, zatímco ji vyvíjíme.

Poté vytvořte komponentu v souboru /src/index.js

Zkusme s tímto příkladem. Vytvořit tento soubor:

src / index.js

Hotovo! Naše luxusní komponenta je hotová!

Vytvoření našeho testovacího projektu

Nyní vytvořme skutečně základní projekt, který otestuje naši fantazijní komponentu.

Poté upravme náš soubor src / App.js přidáním importu a využití komponenty. Měli byste tedy přidat tyto 2 řádky:

import Fancy z 'reaktivní-fancy-komponenty';

Vaše src / App.js by mělo vypadat takto:

A pak konečně spusťte npm start a podívejte se, jakou nádhernou ozdobnou komponentu jste právě vytvořili! Máš to, chlape!

Mělo by to vypadat takto

Faaancy muž

Jako poslední krok uveřejněte naši komponentu.

Jako první krok přejděte do složky se složkami (reaktivita-komponenta) a přidejte všechna data, která byste měli přidat do souboru package.json, jako je jméno, verze, popis a autor.

Poté ve složce komponenty nakonfigurujeme npm tak, aby publikoval vaši komponentu (nezapomeňte, že potřebujete účet na adrese http://npmjs.com/. Nebojte se, je to zdarma ... prozatím…).

Co musíte udělat, je spustit npm přihlášení a vložte své uživatelské jméno, heslo a veřejný e-mail.

Pak spusťte npm publikovat a ... To je vše!

Podívejte se na to muže: https://www.npmjs.com/package/react-fancy-component

Soo fantazie!

Fajn maaaaan!

A magie? Kde je Kouzlo?

Kouzlo je v celém projektu ve dvou řádcích. Oba řádky jsou uvnitř souboru webpack.config.json.

  • libraryTarget: 'commonjs2': Tento řádek říká: „Ahoj, náš výstup by měl být exportovatelný modul!“. Další informace naleznete v oficiální dokumentaci.
  • externí: {'Reagovat': 'Commonjs Reagovat'}: Tento řádek říká: "Hej, pojďme použít závislost React, která používá toho, kdo mě používá!". Při nekompatibilitě verzí buďte opatrní.

A co doba vývoje?

Musíte spustit npm start ve dvou různých terminálech. Jeden terminál ve složce komponenty a druhý terminál ve složce test-project.

Webpack zkompiluje vaši komponentu pokaždé, když provedete změnu v libovolném souboru (ve vaší komponentě), a poté automaticky webpack, který máme v našem testovacím projektu, detekuje změnu a zkompiluje náš testovací projekt. Uvidíte své změny v prohlížeči.

A co hudba?

Zde Fancy Man: