ds-walkthrough

TESTE DE CRIAÇÃO DE COMPONENTES

Usage no npm install needed!

<script type="module">
  import dsWalkthrough from 'https://cdn.skypack.dev/ds-walkthrough';
</script>

README

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
    
    1. INSIRA AS INFORMAÇÕES DA CREDENCIAL DE PUBLICAÇÃO QUANDO SOLICITADO.
    2. 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>