simple-react-label-component-tests-cra v0.2.0

simple-component-library

A library of React components created using create-react-app.

Installation

Run the following command: npm install simple-component-library

1.Criando um novo projeto usando create-react-app: create-react-app simple-component-library

2. Delete todos arquivos dentro da pasta src/. e depois crie um novo arquivo App.js com algum código inicial: Image for post Exemplo pasta src/
3. Crie uma nova pasta src/lib e coloque seus componentes React dentro dele. src/lib vai servir como a pasta raiz do módulo publicado no npm. Aqui está o código para um componente exemplo: // src/lib/components/TextInput.js import React from "react"; import "./TextInput.css"; const TextInput = ({ type = "text", label, placeholder, value, onChange, helpText }) => (
4. Instale o babel-cli usando o comando npm i babel-cli — save-dev e crie um aquivo .babelrc na raiz do seu projeto com o seguinte conteúdo: { "presets": "react-app" }
5. Altere o script build dentro do package,json com o seguinte conteúdo: "build": "rm -rf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files --ignore tests,spec.js,test.js,snapshots", O comando npm run build agora transpilará o código dentro do src/lib (ignorando os testes e snapshots) dentro da pasta dist.
6. Remova a linha “private”: true do package.json. Além disso remova o react-scripts, react e react-dom da dependencias, e coloque eles na devDependencies. Além disso você pode adicionar o react e react-dom como peerDependencies.
7. Preparando a publicação, adicione o seguinte linha de código no package.json: "main": "dist/index.js", "module": "dist/index.js", "files": "dist", "README.md" , "repository": { "type": "git", "url": "URL_OF_YOUR_REPOSITORY" } Image for post
8. Remova o texto default do arquivo README.md e crie um novo texto com alguma informação sobre a biblioteca.

simple-component-library

A library of React components created using create-react-app.

Installation

Run the following command: npm install simple-component-library

10. Publicando no npm! npm run publish É isso! Agora você pode instalar sua biblioteca com o comando npm install simple-component-library e usar isso em qualquer projeto criado usando o Create React App.