ds-walkthrough v1.0.2

PARA CRIAR UM MÓDULO DE COMPONENTES REACT SIMPLES, FORAM UTILIZADOS OS PASSOS ABAIXO:

1. INICIAR A CONFIGURAÇÃO DO NPM NO DIRETÓRIO DO MÓDULO COM O COMANDO:

   npm init

2. 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

3. 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

4. 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"]
   }

5. 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>
           )
   
       }
   
   }

6. 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"
   }

7. 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

8. 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

9. 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"

10. 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

11. PUBLICAÇÃO NO REGISTRY NPM (https://www.npmjs.com/):

    1. 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.
    2. ASSUMINDO QUE O PUBLICADOR JÁ POSSUI AS CREDENCIAIS COM PERMISSÃO DE PUBLICAÇÃO NO REGISTRY NPM. EXECUTE O COMANDO ABAIXO:

    npm login

    3. INSIRA AS INFORMAÇÕES DA CREDENCIAL DE PUBLICAÇÃO QUANDO SOLICITADO.
    4. UMA VEZ QUE O PUBLICADOR ESTEJA AUTENTICADO, DEVERÁ USAR O COMANDO ABAIXO PARA DE FATO, PUBLICAR O MÓDULO CRIADO:

    npm publish

12. INSTALAÇÃO EM PROJETOS:

    1. 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>
       ````

    2. 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>
       ````