README
PARA CRIAR UM MÓDULO DE COMPONENTES REACT SIMPLES, FORAM UTILIZADOS OS PASSOS ABAIXO:
INICIAR A CONFIGURAÇÃO DO NPM NO DIRETÓRIO DO MÓDULO COM O COMANDO:
npm init
INSTALAR COMO DEPENDÊNCIAS DE DEV OS MÓDULOS @babel/cli E @babel/core COM O COMANDO (O OBJETIVO É CONVERTER NOSSO CÓDIGO PARA ECMA SCRIPT 5 -ES5- PARA AUMENTAR A COMPATIBILIDADE COM OS DIVERSOS BROWSERS):
npm install @babel/cli @babel/core --save-dev
INSTALAR COMO DEPENDÊNCIA DE DEV OS MÓDULOS DE PRESET DO BABEL (@babel/preset-env e @babel/preset-react) PARA AJUDAR A CONVERTER NOSSO CÓDIGO PARA ES5 (preset-env) E DIRECIONAR A CONVERSÃO DO REACT EM JAVASCRIPT (preset-react). USE O COMANDO ABAIXO PARA ISSO:
npm install @babel/preset-env @babel/preset-react --save-dev
CRIE UM ARQUIVO DE CONFIGURAÇÃO DO BABEL (ARQUIVO COM O NOME .babelrc), INFORMANDO OS PRESETS QUE SERÃO USADOS. ABAIXO ESTÁ A CONFIGURAÇÃO QUE DEVERÁ SER COLOCADA NO ARQUIVO:
{ "presets": ["@babel/preset-react", "@babel/preset-env"] }
CRIE OS COMPONENTES QUE ESTARÃO DISPONÍVEIS NO MÓDULO. ABAIXO SEGUE O CONTEÚDO PARA UM COMPONENTE QUE PODE SER USADO COMO TESTE:
import React, { Component } from 'react'; export default class HelloWorldComponent extends Component { render () { return ( <div>OLÁ JOVENS</div> ) } }
VAMOS ADICIONAR OS MÓDULOS CORE DA BIBLIOTECA REACT (react e react-dom) COMO peerDependencies (DEPENDÊNCIAS DESSE MÓDULO QUE SERÃO INSTALADAS PELO PROJETO QUE USÁ-LO). PARA ISSO DEFINA UMA SEÇÃO DE peerDependencies DENTRO DO ARQUIVO package.json COMO O CÓDIGO DE EXEMPLO ABAIXO:
"peerDependencies": { "react": "^16.6.1", "react-dom": "^16.6.3" }
ALÉM DE ADICIONAR OS MÓDULOS DO PASSO ANTERIOR COMO peerDependencies, VAMOS ADICIONÁ-LOS COMO devDependencies JÁ QUE OS USAREMOS DURANTE O DESENVOLVIMENTO DOS COMPONENTES. PARA ISSO INSTALE OS MÓDULOS COM O COMANDO ABAIXO:
npm install react react-dom --save-dev
PARA CONVERTER O CÓDIGO DOS COMPONENTES PARA ES5 USAMOS A LINHA DE COMANDO ABAIXO NO DIRETÓRIO RAÍZ DO PROJETO:
.\node_modules\.bin\babel src --out-file index.js
PARA SIMPLIFICAR O PASSO ACIMA, VAMOS INCLUIR O COMANDO ANTERIOR COMO UM SCRIPT DE BUILD DO NOSSO PROJETO, PARA ISSO INCLUA A LINHA ABAIXO NA SEÇÃO "scripts" DO ARQUIVO package.json:
"build": "./node_modules/.bin/babel src --out-file index.js"
COM O PASSO ACIMA FEITO, OS COMPONENTES PODERÃO SER TRANSPILADOS (CONVERTIDOS DE REACT PARA ES5) PARA PUBLICAÇÃO COM O SEGUINTE COMANDO:
npm build
PUBLICAÇÃO NO REGISTRY NPM (https://www.npmjs.com/):
- ADICIONE NA RAÍZ DO PROJETO UM ARQUIVO readme.md COM UMA DESCRIÇÃO DO MÓDULO CRIADO QUE SERÁ VISUALIZADO POR QUEM UTILIZAR O MÓDULO.
- ASSUMINDO QUE O PUBLICADOR JÁ POSSUI AS CREDENCIAIS COM PERMISSÃO DE PUBLICAÇÃO NO REGISTRY NPM. EXECUTE O COMANDO ABAIXO:
npm login
- INSIRA AS INFORMAÇÕES DA CREDENCIAL DE PUBLICAÇÃO QUANDO SOLICITADO.
- UMA VEZ QUE O PUBLICADOR ESTEJA AUTENTICADO, DEVERÁ USAR O COMANDO ABAIXO PARA DE FATO, PUBLICAR O MÓDULO CRIADO:
npm publish
INSTALAÇÃO EM PROJETOS:
INSTALAÇÃO LOCAL:
AGORA COM O MÓDULO PRONTO, SUA INSTALAÇÃO PODERÁ SER REALIZADA LOCALMENTE PARA OUTROS PROJETOS. DENTRO DO DIRETÓRIO RAÍZ DO PROJETO EM QUE FOR USAR ESSE MÓDULO, USE O COMANDO ABAIXO:npm install <caminho para o diretório raíz do módulo criado>
INSTALAÇÃO VIA NPM:
CASO O MÓDULO ESTEJA PUBLICADO NO REGISTRY DO NPM (https://www.npmjs.com/), PODERÁ SER INSTALADO NO PROJETO COM O COMANDO ABAIXO:npm install <nome do módulo>