{"id":19654797,"url":"https://github.com/react-brasil/criando-sua-biblioteca-react","last_synced_at":"2025-04-28T17:32:25.169Z","repository":{"id":53742547,"uuid":"236468173","full_name":"react-brasil/criando-sua-biblioteca-react","owner":"react-brasil","description":"Aprenda como criar sua primeira biblioteca para React","archived":false,"fork":false,"pushed_at":"2021-03-16T15:25:17.000Z","size":534,"stargazers_count":73,"open_issues_count":4,"forks_count":12,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-04-05T10:11:17.813Z","etag":null,"topics":["biblioteca","componente","npm","portuguese-brazilian","react","tutorial"],"latest_commit_sha":null,"homepage":"https://andrelmlins.gitbook.io/criando-sua-biblioteca-react/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/react-brasil.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-01-27T10:40:44.000Z","updated_at":"2025-03-29T02:56:45.000Z","dependencies_parsed_at":"2022-08-28T09:10:11.462Z","dependency_job_id":null,"html_url":"https://github.com/react-brasil/criando-sua-biblioteca-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-brasil%2Fcriando-sua-biblioteca-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-brasil%2Fcriando-sua-biblioteca-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-brasil%2Fcriando-sua-biblioteca-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-brasil%2Fcriando-sua-biblioteca-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-brasil","download_url":"https://codeload.github.com/react-brasil/criando-sua-biblioteca-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251355624,"owners_count":21576386,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["biblioteca","componente","npm","portuguese-brazilian","react","tutorial"],"created_at":"2024-11-11T15:18:26.608Z","updated_at":"2025-04-28T17:32:24.859Z","avatar_url":"https://github.com/react-brasil.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Criando sua biblioteca React](logo.png)](https://andrelmlins.gitbook.io/criando-sua-biblioteca-react/)\n\nNo dia a dia utilizamos várias bibliotecas para React ou Javascript com o objetivo de facilitar nosso trabalho. Bibliotecas de componentes, datas, rotas, gerenciamento de estados, entre outras, são comuns na criação de aplicações. Mas você já parou para pensar em tudo que necessita para criar bibliotecas?\n\nSe você chegou até aqui é porque tem interesse em aprender como desenvolver essas bibliotecas. Existem algumas ferramentas, CLIs e scripts, que facilitam e automatizam esse processo, você pode encontrar mais sobre essas ferramentas [aqui](BIBLIOTECAS.md). Mas aqui vamos entender de forma manual como configurar e desenvolver uma biblioteca.\n\nA biblioteca que iremos criar será um componente que estiliza uma mensagem de erro em requisições dentro de uma aplicação. Ele terá como propriedade um código de erro e uma descrição. Ao seguir esse tutorial já pode mudar as referências de nome para sua biblioteca.\n\n## Primeiro vamos criar as pastas e inicializar um projeto através do yarn\n\nNosso primeiro passo é iniciar um projeto através do yarn e criar algumas pastas, você pode mudar o nome da pasta para o de sua biblioteca.\n\n```bash\nmkdir react-error-screen\ncd react-error-screen\nmkdir src\nmkdir public\nyarn init\n```\n\n## Agora vamos instalar o react e sua base de bibliotecas\n\nO objetivo aqui é desenvolver biblioteca para React, então vamos instalar sua base de bibliotecas.\n\n```bash\nyarn add -D react react-dom prop-types\n```\n\n## Já podemos iniciar nosso componente que se tornará uma biblioteca\n\nNessa fase iremos de fato criar a nossa biblioteca react.\n\n### Crie o arquivo `src/ErrorComponent.js` e coloque o seguinte código\n\n```jsx\nimport React from \"react\";\nimport PropTypes from \"prop-types\";\n\nconst ErrorComponent = ({ error, description }) =\u003e (\n  \u003cdiv style={styles.root}\u003e\n    \u003ch2 style={styles.error}\u003e{error}\u003c/h2\u003e\n    \u003ch4 style={styles.description}\u003e{description}\u003c/h4\u003e\n  \u003c/div\u003e\n);\n\nconst styles = {\n  root: {\n    display: \"flex\",\n    width: \"100%\",\n    height: \"100%\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    flexDirection: \"column\",\n    padding: \"0% 30%\",\n    boxSizing: \"border-box\",\n    backgroundColor: \"#EAEAEA\",\n    textAlign: \"center\",\n    fontFamily: \"arial\"\n  },\n  error: { fontSize: 100, fontWeight: 700, margin: 0 },\n  description: { fontSize: 40, fontWeight: 100, margin: 0 }\n};\n\nErrorComponent.propTypes = {\n  error: PropTypes.number,\n  description: PropTypes.string\n};\n\nexport default ErrorComponent;\n```\n\n### Crie o arquivo `src/index.js` e coloque o seguinte código\n\n```jsx\nexport { default } from \"./ErrorComponent\";\n```\n\n## Vamos agora criar uma área para visualizar o componente\n\nÉ muito importante podermos testar a nossa biblioteca e visualizar o resultado do nosso componente, vamos a seguir trabalhar nessa etapa.\n\n### Crie o arquivo `public/index.html`\n\nPara iniciarmos a aplicação através do webpack precisamos de um arquivo base de html, para isso iremos criar o arquivo\n`index.html` e colocar o seguinte conteúdo:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"utf-8\" /\u003e\n    \u003ctitle\u003eMinha Biblioteca\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"root\"\u003e\u003c/div\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Crie o arquivo `public/index.js`\n\nPrecisamos também criar nosso arquivo jsx de entrada, normalmente nas aplicações esse arquivo é a base da mesma, aqui só usaremos para testar como aplicação.\n\n```jsx\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport ErrorScreen from \"../src\";\n\nconst App = () =\u003e (\n  \u003cErrorScreen error={503} description=\"Ocorreu um problema no servidor\" /\u003e\n);\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById(\"root\"));\n```\n\n## Está na hora de criarmos as configurações\n\nSe tudo deu certo até aqui, agora vamos colocar as configurações iniciais. Iremos configurar o Babel para transpilar nossa biblioteca para js e o Webpack para podermos iniciar uma aplicação e verificar como ficou nossa biblioteca.\n\n### Configurando o Babel\n\nO [Babel](https://babeljs.io/) é um famoso transpilador javascript, que nos possibilitará converter nossa aplicação react em javascript puro através de alguns presets. Vamos primeiro instalar as dependências necessárias.\n\n```bash\nyarn add -D @babel/core @babel/cli @babel/preset-env @babel/preset-react cross-env\n```\n\nApós isso vamos criar o arquivo `.babelrc` e colocar a seguinte configuração:\n\n```json\n{\n  \"presets\": [\"@babel/preset-env\", \"@babel/preset-react\"]\n}\n```\n\n### Configurando o Webpack\n\nO [Webpack](https://webpack.js.org/) é um empacotador de módulo JavaScript de código aberto, vamos utilizar o mesmo junto com alguns plugins para iniciar uma aplicação e assim podermos testar nossa biblioteca. Vamos primeiro instalar as dependências necessárias.\n\n```bash\nyarn add -D webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader\n```\n\nAgora vamos criar o arquivo `webpack.config.js`, que é o arquivo de configuração do webpack. E colocar o seguinte conteúdo:\n\n```js\nconst HtmlWebpackPlugin = require(\"html-webpack-plugin\");\nconst path = require(\"path\");\n\nconst APP_PATH = \"./public\";\n\nconst config = {\n  mode: \"development\",\n  entry: path.resolve(__dirname, APP_PATH),\n  output: {\n    path: path.resolve(__dirname, \"build\"),\n    filename: \"bundle.js\",\n    library: \"default\",\n    libraryTarget: \"umd\"\n  },\n\n  resolve: { extensions: [\".js\", \".json\"] },\n\n  module: {\n    rules: [\n      { test: /\\.(js)x?$/, loader: \"babel-loader\", exclude: /node_modules/ }\n    ]\n  },\n\n  plugins: [\n    new HtmlWebpackPlugin({\n      inject: true,\n      template: path.join(APP_PATH, \"index.html\")\n    })\n  ]\n};\n\nmodule.exports = () =\u003e config;\n```\n\n## Já estamos chegando ao fim, vamos agora criar nossos scripts e ajustar o package.json\n\nPara criar os scripts, vá no arquivo `package.json` e insira o seguinte código:\n\n```json\n{\n  \"scripts\": {\n    \"start\": \"webpack serve --progress --inline --hot --port 8080\",\n    \"build\": \"cross-env NODE_ENV=production babel src --out-dir dist\"\n  }\n}\n```\n\nPerceba que no build todo o conteúdo será transpilado para uma pasta chamada dist, para que outra lib ao utilizar seu módulo consiga utilizar na raiz modifique as propriedades `main` e `module`.\n\n```json\n{\n  \"main\": \"dist/index.js\",\n  \"module\": \"dist/index.js\"\n}\n```\n\nAlém disso nosso projeto tem várias configurações que não serão necessárias no pacote final da nossa biblioteca. Para diminuir o tamanho do pacote e só colocar o essencial, utilize a propriedade `files` para isso, fazendo da seguinte maneira.\n\n```json\n{\n  \"files\": [\"dist\", \"README.md\"]\n}\n```\n\n## Agora sim, vamos ver o componente da nossa biblioteca\n\nRode o comando abaixo na raiz do projeto.\n\n```bash\nyarn start\n```\n\nAcesse `http://localhost:8080/` e verá seu componente.\n\n[comment]: \u003c\u003e (Colocar exemplo de uma aplicação)\n\n## Vamos agora testar a transpilação\n\nRode o comando abaixo na raiz do projeto.\n\n```bash\nyarn build\n```\n\nNo diretório `dist` que está na raiz do seu projeto, você verá seu componente transpilado.\n\n## Hora de publicar\n\nVocê já deve ta muito feliz por ver seu componente funcionando e querendo usar em seu projeto. Então vamos agora publicar esse componente, e essa é a etapa mais simples. Rode o seguinte comando:\n\n```bash\nnpm login\nnpm publish\n```\n\nÉ possível que o componente já exista com esse nome, caso isso aconteça mude o nome do seu componente no arquivo `package.json`. Lembre que é possível colocar um escopo, utilizando a seguinte nomenclatura:\n\n```\n@[ESCOPO]/[NOME_PROJETO]\n```\n\n## Estrutura de Arquivos\n\nCaso tenha dúvida sobre a estrutura de arquivos geradas após o tutorial, acesse esse [link](ESTRUTURA.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-brasil%2Fcriando-sua-biblioteca-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-brasil%2Fcriando-sua-biblioteca-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-brasil%2Fcriando-sua-biblioteca-react/lists"}