https://thirdbrain.vercel.app/_next/static/chunks/pages/prereq/package-man-9c5d6ff248101bba.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[865],{6637:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/prereq/package-man",function(){return n(7666)}])},7845:function(e,t,n){"use strict";var r=n(5893);t.Z={project:{link:"https://github.com/wenwkich/thirdbrain"},chat:{icon:function(){return(0,r.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"currentColor",children:(0,r.jsx)("path",{d:"M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"})})},link:"https://twitter.com/wenwkich"},docsRepositoryBase:"https://github.com/wenwkich/thirdbrain/blob/main",titleSuffix:" - thirdbrain",navigation:{next:!0,prev:!0},darkMode:!0,footer:{text:"MIT ".concat((new Date).getFullYear()," \xa9 Wendy Chan. ")},editLink:{text:"Edit this page on GitHub"},logo:(0,r.jsx)(r.Fragment,{children:(0,r.jsx)("span",{children:"Thirdbrain: Everything I Know on Web2/3 Dev & Sec with \u2764\ufe0f"})}),head:(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("meta",{name:"viewport",content:"width=device-width, initial-scale=1.0"}),(0,r.jsx)("meta",{name:"description",content:"This is my very exhaustive personal opinions, brain dump, study notes, guide, curated resources on web2/3 development"}),(0,r.jsx)("meta",{name:"twitter:card",content:"summary_large_image"}),(0,r.jsx)("meta",{name:"twitter:site",content:"@wenwkich"}),(0,r.jsx)("meta",{property:"og:title",content:"thirdbrain"}),(0,r.jsx)("meta",{property:"og:description",content:"Thirdbrain: A very exhaustive third brain (personal opinions, brain dump, study notes, guide, curated resources) on web2/3 development"}),(0,r.jsx)("meta",{name:"apple-mobile-web-app-title",content:"thirdbrain"})]}),sidebar:{defaultMenuCollapseLevel:0}}},7666:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return l.ZP}});var r,a=n(1799),i=n(9396),o=n(5893),d=n(2720),s=n(7845),c=(n(8658),n(1151)),l=(n(5675),n(6998)),m={filePath:"pages/prereq/package-man.mdx",route:"/prereq/package-man",frontMatter:{title:"Prerequisite"},pageMap:[{kind:"Meta",data:{index:"Welcome",prereq:"Prerequisite",frontend:"Frontend",contract:"Smart Contract",cryptography:"Cryptography","zero-knowledge":"Zero-Knowledge","distributed-system":"Distributed System","ethereum-core":"Ethereum Core"}},{kind:"Folder",name:"contract",route:"/contract",children:[{kind:"Meta",data:{"ethereum-concepts":"Ethereum Concepts",solidity:"Solidity","frameworks-and-tools":"Solidity Frameworks and Tools","solidity-patterns":"Solidity Patterns",libraries:"Solidity Libraries"}},{kind:"MdxPage",name:"ethereum-concepts",route:"/contract/ethereum-concepts",frontMatter:{title:"Ethereum Concepts"}},{kind:"MdxPage",name:"frameworks-and-tools",route:"/contract/frameworks-and-tools",frontMatter:{title:"Solidity Frameworks and Tools"}},{kind:"MdxPage",name:"libraries",route:"/contract/libraries",frontMatter:{title:"Solidity Libraries"}},{kind:"MdxPage",name:"solidity-patterns",route:"/contract/solidity-patterns",frontMatter:{title:"Solidity Patterns"}},{kind:"MdxPage",name:"solidity",route:"/contract/solidity",frontMatter:{title:"Solidity"}}]},{kind:"Folder",name:"cryptography",route:"/cryptography",children:[{kind:"Meta",data:{introduction:"Introduction",hash:"Hash Functions and HMAC","key-exchange":"Key Exchange and Diffie-Hellman","symmetric-cipher":"Symmetric Cipher","asymmetric-cipher-rsa":"Asymmetric Cipher and RSA","ecc-ecdsa":"Elliptic Curve Cipher And ECDSA"}},{kind:"MdxPage",name:"asymmetric-cipher-rsa",route:"/cryptography/asymmetric-cipher-rsa",frontMatter:{title:"Asymmetric Cipher and RSA"}},{kind:"MdxPage",name:"ecc-ecdsa",route:"/cryptography/ecc-ecdsa",frontMatter:{title:"Elliptic Curve Cipher And ECDSA"}},{kind:"MdxPage",name:"hash",route:"/cryptography/hash",frontMatter:{title:"Hash Functions and HMAC"}},{kind:"MdxPage",name:"introduction",route:"/cryptography/introduction",frontMatter:{title:"Introduction"}},{kind:"MdxPage",name:"key-exchange",route:"/cryptography/key-exchange",frontMatter:{title:"Key Exchange and Diffie-Hellman"}},{kind:"MdxPage",name:"symmetric-cipher",route:"/cryptography/symmetric-cipher",frontMatter:{title:"Symmetric Cipher"}}]},{kind:"Folder",name:"distributed-system",route:"/distributed-system",children:[{kind:"Meta",data:{introduction:"Introduction"}},{kind:"MdxPage",name:"introduction",route:"/distributed-system/introduction",frontMatter:{title:"Introduction"}}]},{kind:"Folder",name:"ethereum-core",route:"/ethereum-core",children:[{kind:"Meta",data:{introduction:"Introduction"}},{kind:"MdxPage",name:"introduction",route:"/ethereum-core/introduction",frontMatter:{title:"Introduction"}}]},{kind:"Folder",name:"frontend",route:"/frontend",children:[{kind:"Meta",data:{"get-started":"Frontend Get Started",bootstrap:"Bootstrap Your Web3 App",style:"Style","react-design-patterns":"React Design Patterns",hooks:"Hooks","state-management":"State Management","web3-libraries":"Web3 Libraries"}},{kind:"MdxPage",name:"bootstrap",route:"/frontend/bootstrap",frontMatter:{title:"Bootstrap Your Web3 App"}},{kind:"MdxPage",name:"get-started",route:"/frontend/get-started",frontMatter:{title:"Frontend Get Started"}},{kind:"MdxPage",name:"hooks",route:"/frontend/hooks",frontMatter:{title:"Hooks"}},{kind:"MdxPage",name:"react-design-patterns",route:"/frontend/react-design-patterns",frontMatter:{title:"React Design Patterns"}},{kind:"MdxPage",name:"state-management",route:"/frontend/state-management",frontMatter:{title:"State Management"}},{kind:"MdxPage",name:"style",route:"/frontend/style",frontMatter:{title:"CSS Style"}},{kind:"MdxPage",name:"web3-libraries",route:"/frontend/web3-libraries",frontMatter:{title:"Web3 Libraries"}}]},{kind:"MdxPage",name:"index",route:"/",frontMatter:{title:"Welcome"}},{kind:"Folder",name:"prereq",route:"/prereq",children:[{kind:"MdxPage",name:"JSON",route:"/prereq/JSON",frontMatter:{title:"JSON"}},{kind:"Meta",data:{"bash-command":"Bash Commands and Git Operations","package-man":"Package Management","text-editor":"Text Editor",JSON:"JSON"}},{kind:"MdxPage",name:"bash-command",route:"/prereq/bash-command",frontMatter:{title:"Bash Commands & Git"}}

1,{kind:"MdxPage",name:"package-man",route:"/prereq/package-man",frontMatter:{title:"Prerequisite"}},{kind:"MdxPage",name:"text-editor",route:"/prereq/text-editor",frontMatter:{title:"Text Editor"}}]},{kind:"Folder",name:"zero-knowledge",route:"/zero-knowledge",children:[{kind:"Meta",data:{introduction:"Introduction"}},{kind:"MdxPage",name:"introduction",route:"/zero-knowledge/introduction",frontMatter:{title:"Introduction"}}]}],headings:[{type:"heading",depth:1,children:[{type:"text",value:"Package Management",position:{start:{line:2,column:3,offset:3},end:{line:2,column:21,offset:21}}}],position:{start:{line:2,column:1,offset:1},end:{line:2,column:21,offset:21}},value:"Package Management"},{type:"heading",depth:2,children:[{type:"text",value:"Alternative to ",position:{start:{line:10,column:4,offset:361},end:{line:10,column:19,offset:376}}},{type:"inlineCode",value:"npm",position:{start:{line:10,column:19,offset:376},end:{line:10,column:24,offset:381}}}],position:{start:{line:10,column:1,offset:358},end:{line:10,column:24,offset:381}},value:"Alternative to npm"}],timestamp:1668524089e3};globalThis.__nextra_internal__={pageMap:m.pageMap,route:m.route};function p(e){var t=Object.assign({h1:"h1",p:"p",a:"a",h2:"h2",code:"code",ul:"ul",li:"li"},(0,c.ah)(),e.components);return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.h1,{children:"Package Management"}),"\n",(0,o.jsxs)(t.p,{children:["No matter you want to get started on smart contract development or frontend\ndevelopment, You should probably start on installation of Node.js & NPM (both\nfrontend and smart contract frameworks rely on Node.js and npm). As I use Mac,\nit's convenient for me to install and manage the version using\n",(0,o.jsx)(t.a,{href:"https://github.com/nvm-sh/nvm",children:"nvm"}),"."]}),"\n",(0,o.jsxs)(t.h2,{id:"alternative-to-npm",children:["Alternative to ",(0,o.jsx)(t.code,{children:"npm"})]}),"\n",(0,o.jsxs)(t.p,{children:["If you're still using ",(0,o.jsx)(t.code,{children:"npm"}),", I would suggest to use ",(0,o.jsx)(t.a,{href:"https://yarnpkg.com/",children:"yarn"}),"\nas it's much faster to add a package & especially when you need to install the\npackage after cloning other's code (since it's parallel). After you install\n",(0,o.jsx)(t.code,{children:"npm"}),", you use ",(0,o.jsx)(t.code,{children:"npm install --global yarn"})," command to install ",(0,o.jsx)(t.code,{children:"yarn"}),"."]}),"\n",(0,o.jsx)(t.p,{children:"Then you just have to use:"}),"\n",(0,o.jsxs)(t.ul,{children:["\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:"yarn"})," to replace ",(0,o.jsx)(t.code,{children:"npm install"})]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:"yarn add <package-name>"})," to replace ",(0,o.jsx)(t.code,{children:"npm install <package-name>"})]}),"\n",(0,o.jsxs)(t.li,{children:[(0,o.jsx)(t.code,{children:"yarn create react-app"})," to replace ",(0,o.jsx)(t.code,{children:"npm create-react-app"})]}),"\n",(0,o.jsxs)(t.li,{children:["but something like ",(0,o.jsx)(t.code,{children:"npx"})," is not replaceable"]}),"\n"]}),"\n",(0,o.jsxs)(t.p,{children:["You'll also need to learn how to write the ",(0,o.jsx)(t.code,{children:"scripts"})," section in ",(0,o.jsx)(t.code,{children:"package.json"}),",\nsee ",(0,o.jsx)(t.a,{href:"https://docs.npmjs.com/cli/v8/using-npm/scripts",children:"official doc"}),"."]})]})}function h(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=Object.assign({},(0,c.ah)(),e.components),n=t.wrapper;return n?(0,o.jsx)(n,(0,i.Z)((0,a.Z)({},e),{children:(0,o.jsx)(p,(0,a.Z)({},e))})):p(e)}m.title="Prerequisite";(r=globalThis).__nextra_pageContext__||(r.__nextra_pageContext__=Object.create(null)),globalThis.__nextra_pageContext__["/prereq/package-man"]={Content:function(e){return(0,o.jsx)(d.mK.Provider,{value:e,children:(0,o.jsx)(h,{})})},pageOpts:m,themeConfig:s.Z}}},function(e){e.O(0,[392,774,888,179],(function(){return t=6637,e(e.s=t);var t}));var t=e.O();_N_E=t}]);