component---src-pages-articles-js-73ace78ca1533d43a0cf.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{"/eHF":function(e,n,r){"use strict";function a(e,n){var r={};for(var a in e)n.indexOf(a)>=0||Object.prototype.hasOwnProperty.call(e,a)&&(r[a]=e[a]);return r}function t(e,n){var r=n.distance,a=n.left,t=n.right,o=n.up,i=n.down,c=n.top,l=n.bottom,d=n.big,p=n.mirror,u=n.opposite,f=(r?r.toString():0)+((a?1:0)|(t?2:0)|(c||i?4:0)|(l||o?8:0)|(p?16:0)|(u?32:0)|(e?64:0)|(d?128:0));if(m.hasOwnProperty(f))return m[f];var g=a||t||o||i||c||l,b=void 0,h=void 0;if(g){if(!p!=!(e&&u)){var v=[t,a,l,c,i,o];a=v[0],t=v[1],c=v[2],l=v[3],o=v[4],i=v[5]}var y=r||(d?"2000px":"100%");b=a?"-"+y:t?y:"0",h=i||c?"-"+y:o||l?y:"0"}return m[f]=(0,s.animation)((e?"to":"from")+" {opacity: 0;"+(g?" transform: translate3d("+b+", "+h+", 0);":"")+"}\n     "+(e?"from":"to")+" {opacity: 1;transform: none;} "),m[f]}function o(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:s.defaults,n=arguments.length>1&&void 0!==arguments[1]&&arguments[1],r=e.children,o=(e.out,e.forever),i=e.timeout,c=e.duration,l=void 0===c?s.defaults.duration:c,p=e.delay,m=void 0===p?s.defaults.delay:p,u=e.count,f=void 0===u?s.defaults.count:u,g=a(e,["children","out","forever","timeout","duration","delay","count"]),b={make:t,duration:void 0===i?l:i,delay:m,forever:o,count:f,style:{animationFillMode:"both"},reverse:g.left};return n?(0,d.default)(g,b,b,r):b}Object.defineProperty(n,"__esModule",{value:!0});var i,c=r("17x9"),s=r("ar19"),l=r("eH+L"),d=(i=l)&&i.__esModule?i:{default:i},p={out:c.bool,left:c.bool,right:c.bool,top:c.bool,bottom:c.bool,big:c.bool,mirror:c.bool,opposite:c.bool,duration:c.number,timeout:c.number,distance:c.string,delay:c.number,count:c.number,forever:c.bool},m={};o.propTypes=p,n.default=o,e.exports=n.default},"1wXr":function(e,n,r){"use strict";r.r(n),n.default='---\r\ntitle: "Building Modern Web Applications with React"\r\nslug: "building-modern-web-apps"\r\ndate: "2024-11-29"\r\nauthor: "Aayush"\r\ntags: ["React", "JavaScript", "Web Development"]\r\nexcerpt: "Learn how to create scalable and maintainable web applications using React and modern JavaScript practices."\r\nreadTime: "5 min read"\r\n---\r\n\r\nimport { CodeBlock } from \'../components/CodeBlock\'\r\n\r\n# Building Modern Web Applications with React\r\n\r\nModern web development has evolved significantly over the years. React has emerged as one of the most popular libraries for building user interfaces.\r\n\r\n## Getting Started\r\n\r\nFirst, let\'s create a new React application:\r\n\r\n\r\n`npx create-react-app my-modern-app`\r\ncd my-modern-app\r\nnpm start\r\n\r\n\r\n# JavaScript Code Example\r\n\r\nHere\'s a JavaScript code block:\r\n\r\n```javascript\r\nconst calculateSum = (arr) => {\r\n  return arr.reduce((sum, num) => sum + num, 0);\r\n};\r\n\r\nconst numbers = [1, 2, 3, 4, 5];\r\nconsole.log(calculateSum(numbers)); // Output: 15\r\n```\r\n## Key Concepts\r\n\r\n### 1. Component Structure\r\n\r\nReact components should be:\r\n- Small and focused\r\n- Reusable\r\n- Easy to test\r\n\r\n### 2. State Management\r\n\r\nModern React apps have several options for state management:\r\n- useState for local state\r\n- Context API for shared state\r\n- Redux for complex state\r\n\r\n## Code Examples\r\n\r\nHere\'s a simple functional component:\r\n\r\n<CodeBlock language="jsx">\r\nfunction Welcome({ name }) {\r\n  return (\r\n    <div>\r\n      <h1>Hello, {name}</h1>\r\n      <p>Welcome to our app!</p>\r\n    </div>\r\n  );\r\n}\r\n</CodeBlock>\r\n\r\n## Best Practices\r\n\r\n1. Use functional components with hooks\r\n2. Implement proper error boundaries\r\n3. Follow the DRY principle\r\n\r\n## Summary\r\n\r\nBy following these patterns and practices, you can build maintainable and scalable React applications.\r\n\r\n## Further Reading\r\n- [React Documentation](https://reactjs.org)\r\n- [Modern JavaScript Features](https://javascript.info)'},"2d4l":function(e,n,r){"use strict";r.r(n),n.default='---\r\ntitle: "Building Modern Web Applications with React"\r\nslug: "building-modern-web-apps"\r\ndate: "2024-11-29"\r\nauthor: "Aayush"\r\ntags: ["React", "JavaScript", "Web Development"]\r\nexcerpt: "Learn how to create scalable and maintainable web applications using React and modern JavaScript practices."\r\nreadTime: "5 min read"\r\n---\r\n\r\nimport { CodeBlock } from \'../components/CodeBlock\'\r\n\r\n# Building Modern Web Applications with React\r\n\r\nModern web development has evolved significantly over the years. React has emerged as one of the most popular libraries for building user interfaces.\r\n\r\n## Getting Started\r\n\r\nFirst, let\'s create a new React application:\r\n\r\n\r\n`npx create-react-app my-modern-app`\r\ncd my-modern-app\r\nnpm start\r\n\r\n\r\n# JavaScript Code Example\r\n\r\nHere\'s a JavaScript code block:\r\n\r\n```javascript\r\nconst calculateSum = (arr) => {\r\n  return arr.reduce((sum, num) => sum + num, 0);\r\n};\r\n\r\nconst numbers = [1, 2, 3, 4, 5];\r\nconsole.log(calculateSum(numbers)); // Output: 15\r\n```\r\n## Key Concepts\r\n\r\n### 1. Component Structure\r\n\r\nReact components should be:\r\n- Small and focused\r\n- Reusable\r\n- Easy to test\r\n\r\n### 2. State Management\r\n\r\nModern React apps have several options for state management:\r\n- useState for local state\r\n- Context API for shared state\r\n- Redux for complex state\r\n\r\n## Code Examples\r\n\r\nHere\'s a simple functional component:\r\n\r\n<CodeBlock language="jsx">\r\nfunction Welcome({ name }) {\r\n  return (\r\n    <div>\r\n      <h1>Hello, {name}</h1>\r\n      <p>Welcome to our app!</p>\r\n    </div>\r\n  );\r\n}\r\n</CodeBlock>\r\n\r\n## Best Practices\r\n\r\n1. Use functional components with hooks\r\n2. Implement proper error boundaries\r\n3. Follow the DRY principle\r\n\r\n## Summary\r\n\r\nBy following these patterns and practices, you can build maintainable and scalable React applications.\r\n\r\n## Further Reading\r\n- [React Documentation](https://reactjs.org)\r\n- [Modern JavaScript Features](https://javascript.info)'},BrBJ:function(e,n,r){"use strict";r.r(n),n.default='---\r\ntitle: "Building Modern Web Applications with React"\r\nslug: "building-modern-web-apps"\r\ndate: "2024-11-29"\r\nauthor: "Aayush"\r\ntags: ["React", "JavaScript", "Web Development"]\r\nexcerpt: "Learn how to create scalable and maintainable web applications using React and modern JavaScript practices."\r\nreadTime: "5 min read"\r\n---\r\n\r\n## Summary\r\n\r\nBy following these patterns and practices, you can build maintainable and scalable React applications.\r\n\r\n## Further Reading\r\n- [React Documentation](https://reactjs.org)\r\n- [Modern JavaScript Features](https://javascript.info)'},TfUS:function(e,n,r){"use strict";r.r(n),n.default='---\r\ntitle: "Building Modern Web Applications with React"\r\nslug: "building-modern-web-apps"\r\ndate: "2024-11-29"\r\nauthor: "Aayush"\r\ntags: ["React", "JavaScript", "Web Development"]\r\nexcerpt: "Learn how to create scalable and maintainable web applications using React and modern JavaScript practices."\r\nreadTime: "5 min read"\r\n---\r\n\r\nimport { CodeBlock } from \'../components/CodeBlock\'\r\n\r\n# Building Modern Web Applications with React\r\n\r\nModern web development has evolved significantly over the years. React has emerged as one of the most popular libraries for building user interfaces.\r\n\r\n## Getting Started\r\n\r\nFirst, let\'s create a new React application:\r\n\r\n\r\n`npx create-react-app my-modern-app`\r\ncd my-modern-app\r\nnpm start\r\n\r\n\r\n# JavaScript Code Example\r\n\r\nHere\'s a JavaScript code block:\r\n\r\n```javascript\r\nconst calculateSum = (arr) => {\r\n  return arr.reduce((sum, num) => sum + num, 0);\r\n};\r\n\r\nconst numbers = [1, 2, 3, 4, 5];\r\nconsole.log(calculateSum(numbers)); // Output: 15\r\n```\r\n## Key Concepts\r\n\r\n### 1. Component Structure\r\n\r\nReact components should be:\r\n- Small and focused\r\n- Reusable\r\n- Easy to test\r\n\r\n### 2. State Management\r\n\r\nModern React apps have several options for state management:\r\n- useState for local state\r\n- Context API for shared state\r\n- Redux for complex state\r\n\r\n## Code Examples\r\n\r\nHere\'s a simple functional component:\r\n\r\n<CodeBlock language="jsx">\r\nfunction Welcome({ name }) {\r\n  return (\r\n    <div>\r\n      <h1>Hello, {name}</h1>\r\n      <p>Welcome to our app!</p>\r\n    </div>\r\n  );\r\n}\r\n</CodeBlock>\r\n\r\n## Best Practices\r\n\r\n1. Use functional components with hooks\r\n2. Implement proper error boundaries\r\n3. Follow the DRY principle\r\n\r\n## Summary\r\n\r\nBy following these patterns and practices, you can build maintainable and scalable React applications.\r\n\r\n## Further Reading\r\n- [React Documentation](https://reactjs.org)\r\n- [Modern JavaScript Features](https://javascript.info)'},cLba:function(e,n,r){var a={"./fifth copy 2.md":"jep+","./fifth copy.md":"2d4l","./fifth.md":"wOhZ","./first.md":"1wXr","./fourth.md":"TfUS","./second copy.md":"BrBJ","./second.md":"mN2o","./third.md":"naJN"};function t(e){var n=o(e);return r(n)}function o(e){if(!r.o(a,e)){var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}return a[e]}t.keys=function(){return Object.keys(a)},t.resolve=o,e.exports=t,t.id="cLba"},hk7L:function(e,n,r){"use strict";r.r(n);var a=r("q1tI"),t=r.n(a),o=r("vOnD"),i=r("/eHF"),c=r.n(i),s=r("Kvkj"),l=r("Wbzz"),d=r("Bl7J"),p=r("M55E");const m=new(r.n(p).a.Converter)({tables:!0,simplifiedAutoLink:!0,strikethrough:!0,tasklists:!0,ghCodeBlocks:!0,parseImgDimensions:!0,simpleLineBreaks:!0,openLinksInNewWindow:!0,emoji:!0}),u=o.a.div.withConfig({displayName:"articles__Box",componentId:"sc-6gpu1z-0"})(['font-size:1.18em;font-family:"Montserrat",sans-serif;padding-right:1em;line-height:165%;']),f=o.a.div.withConfig({displayName:"articles__ArticleCard",componentId:"sc-6gpu1z-1"})(["pre{background:",";padding:1.2em;border-radius:8px;overflow-x:auto;margin:1em 0;border:1px solid ",';}code{font-family:"Fira Code",Consolas,Monaco,"Andale Mono",monospace;background:',";color:",";padding:0.2em 0.4em;border-radius:4px;font-size:0.9em;border:1px solid ",";}pre code{background:none;padding:0;border:none;font-size:0.95em;line-height:1.5;display:block;}pre:before{content:attr(data-language);display:block;background:",";color:",";font-size:0.8em;padding:0.2em 0.6em;border-radius:4px;margin-bottom:0.8em;width:fit-content;}background:",";color:white;border-radius:8px;box-shadow:rgb(46,64,83) 0px 0.25em 0.3em;margin-bottom:1.5rem;p{margin-bottom:1em;line-height:1.7;}ul,ol{margin-left:1.5em;margin-bottom:1em;}a{color:",";text-decoration:none;&:hover{text-decoration:underline;}}blockquote{border-left:3px solid ",";margin:1em 0;padding-left:1em;color:",";font-style:italic;}img{max-width:100%;height:auto;border-radius:4px;margin:1em 0;}table{width:100%;border-collapse:collapse;margin:1em 0;}th,td{padding:0.5em;border:1px solid ",";text-align:left;}th{background:",";}"],e=>e.darkMode?"#1a1a1a":"#f5f5f5",e=>e.darkMode?"#333":"#e1e1e1",e=>e.darkMode?"#2d2d2d":"#f0f0f0",e=>e.darkMode?"#e6e6e6":"#333",e=>e.darkMode?"#404040":"#ddd",e=>e.darkMode?"#333":"#e1e1e1",e=>e.darkMode?"#ccc":"#666",e=>e.darkMode?"rgb(17 24 39/1)":"#ffffff",e=>e.darkMode?"#6CCBFE":"#0066cc",e=>e.darkMode?"#666":"#ddd",e=>e.darkMode?"#ccc":"#666",e=>e.darkMode?"#444":"#ddd",e=>e.darkMode?"#333":"#f5f5f5"),g=(o.a.div.withConfig({displayName:"articles__ArticleContent",componentId:"sc-6gpu1z-2"})(["color:",";h1,h2,h3{margin-top:1.5em;margin-bottom:0.5em;}pre{background:",";padding:1em;border-radius:4px;overflow-x:auto;}code{font-family:monospace;}"],e=>e.darkMode?"#fff":"#333",e=>e.darkMode?"#333":"#f5f5f5"),o.a.span.withConfig({displayName:"articles__Tag",componentId:"sc-6gpu1z-3"})(["background:",";color:",";padding:0.2rem 0.5rem;border-radius:4px;margin-right:0.5rem;font-size:0.8em;"],e=>e.darkMode?"black":"#eee",e=>e.darkMode?"white":"#333")),b=(r("1wXr"),r("mN2o"),r("mN2o"),r("mN2o"),e=>{let{node:n,frontMatter:r,markdownContent:o,collapsed:i}=e;const{0:c,1:s}=Object(a.useState)(!i);return t.a.createElement(t.a.Fragment,null,i&&t.a.createElement(l.Link,{to:"/articles"},"Back"),t.a.createElement(f,{key:n.id,darkMode:!0,expanded:c},t.a.createElement("div",{style:{marginBottom:"1rem",color:"#999",padding:"1em 1em 0em 1em"}},t.a.createElement("h2",null,n.name),r.date&&t.a.createElement("span",null,"📅 ",r.date," • "),r.author&&t.a.createElement("span",null,"✍️ ",r.author," • "),r.readTime&&t.a.createElement("span",null,"⏱️ ",r.readTime),Array.isArray(r.tags)&&t.a.createElement("div",{style:{marginTop:"1rem",marginBottom:"1rem"}},r.tags.map(e=>t.a.createElement(g,{key:e,darkMode:!0},e.replace(/"/g,""))))),t.a.createElement("div",{style:{background:i?"rgb(42 46 53 / 1)":"linear-gradient(90deg, rgba(42, 46, 53, 1), rgba(60, 64, 74, 1), rgba(42, 46, 53, 1))",padding:"0em 1em 1em 1em"}},r.excerpt&&t.a.createElement("p",{style:{fontSize:"1.1em",color:"#ccc",marginBottom:"1.5rem"}},r.excerpt),t.a.createElement("div",{className:"content-preview"},i&&t.a.createElement("div",{dangerouslySetInnerHTML:{__html:o}})),i?null:t.a.createElement(l.Link,{to:"/articles/"+n.name},"Read more"))))});n.default=e=>{var n;let{data:a,darkMode:o,toggleDarkMode:i,pageContext:l}=e;return t.a.createElement(d.a,{darkMode:!0},t.a.createElement(s.f,{active:"articles",darkMode:!0}),t.a.createElement("div",{className:"grid align-center",style:{perspective:"100rem",maxWidth:"93%",margin:"auto",position:"relative",gridTemplateColumns:"1fr"}},t.a.createElement("h1",null,"Article"),t.a.createElement("div",{style:{display:"grid",gridTemplateColumns:l&&void 0!==l.name?"1fr":"1fr 1fr"}},null==a||null===(n=a.allFile)||void 0===n?void 0:n.edges.map((e,n)=>{let{node:a}=e;if(l&&l.name&&a.name!==l.name)return!1;const o=(i=a.name,r("cLba")("./"+i+".md"));var i;const{frontMatter:s,markdownContent:d}=(e=>{try{const n=JSON.parse(e),r=n&&n.default?n.default.split("---"):[];if(r.length>=3){const e=r[1].trim().split("\n"),n={};e.forEach(e=>{const[r,...a]=e.split(":").map(e=>e.trim());if(r){let e=a.join(":").trim();e=e.replace(/^["'](.*)["']$/,"$1"),e.startsWith("[")&&e.endsWith("]")&&(e=e.slice(1,-1).split(",").map(e=>e.trim())),n[r]=e}});const a=m.makeHtml(r[2].trim());return{frontMatter:n,markdownContent:a}}return{frontMatter:{},markdownContent:e}}catch(n){return console.error("Error parsing markdown:",n),{frontMatter:{},markdownContent:e}}})(JSON.stringify(o));return t.a.createElement(c.a,{left:!0},t.a.createElement(u,null,t.a.createElement(b,{node:a,collapsed:l&&void 0!==l.name,frontMatter:s,markdownContent:d})))}))),t.a.createElement(s.a,{toggleDarkMode:i,darkMode:o}))}},"jep+":function(e,n,r){"use strict";r.r(n),n.default='---\r\ntitle: "Building Modern Web Applications with React"\r\nslug: "building-modern-web-apps"\r\ndate: "2024-11-29"\r\nauthor: "Aayush"\r\ntags: ["React", "JavaScript", "Web Development"]\r\nexcerpt: "Learn how to create scalable and maintainable web applications using React and modern JavaScript practices."\r\nreadTime: "5 min read"\r\n---\r\n\r\nimport { CodeBlock } from \'../components/CodeBlock\'\r\n\r\n# Building Modern Web Applications with React\r\n\r\nModern web development has evolved significantly over the years. React has emerged as one of the most popular libraries for building user interfaces.\r\n\r\n## Getting Started\r\n\r\nFirst, let\'s create a new React application:\r\n\r\n\r\n`npx create-react-app my-modern-app`\r\ncd my-modern-app\r\nnpm start\r\n\r\n\r\n# JavaScript Code Example\r\n\r\nHere\'s a JavaScript code block:\r\n\r\n```javascript\r\nconst calculateSum = (arr) => {\r\n  return arr.reduce((sum, num) => sum + num, 0);\r\n};\r\n\r\nconst numbers = [1, 2, 3, 4, 5];\r\nconsole.log(calculateSum(numbers)); // Output: 15\r\n```\r\n## Key Concepts\r\n\r\n### 1. Component Structure\r\n\r\nReact components should be:\r\n- Small and focused\r\n- Reusable\r\n- Easy to test\r\n\r\n### 2. State Management\r\n\r\nModern React apps have several options for state management:\r\n- useState for local state\r\n- Context API for shared state\r\n- Redux for complex state\r\n\r\n## Code Examples\r\n\r\nHere\'s a simple functional component:\r\n\r\n<CodeBlock language="jsx">\r\nfunction Welcome({ name }) {\r\n  return (\r\n    <div>\r\n      <h1>Hello, {name}</h1>\r\n      <p>Welcome to our app!</p>\r\n    </div>\r\n  );\r\n}\r\n</CodeBlock>\r\n\r\n## Best Practices\r\n\r\n1. Use functional components with hooks\r\n2. Implement proper error boundaries\r\n3. Follow the DRY principle\r\n\r\n## Summary\r\n\r\nBy following these patterns and practices, you can build maintainable and scalable React applications.\r\n\r\n## Further Reading\r\n- [React Documentation](https://reactjs.org)\r\n- [Modern JavaScript Features](https://javascript.info)'},mN2o:function(e,n,r){"use strict";r.r(n),n.default='---\r\ntitle: "Building Modern Web Applications with React"\r\nslug: "building-modern-web-apps"\r\ndate: "2024-11-29"\r\nauthor: "Aayush"\r\ntags: ["React", "JavaScript", "Web Development"]\r\nexcerpt: "Learn how to create scalable and maintainable web applications using React and modern JavaScript practices."\r\nreadTime: "5 min read"\r\n---\r\n\r\n## Summary\r\n\r\nBy following these patterns and practices, you can build maintainable and scalable React applications.\r\n\r\n## Further Reading\r\n- [React Documentation](https://reactjs.org)\r\n- [Modern JavaScript Features](https://javascript.info)'},naJN:function(e,n,r){"use strict";r.r(n),n.default='---\r\ntitle: "Building Modern Web Applications with React"\r\nslug: "building-modern-web-apps"\r\ndate: "2024-11-29"\r\nauthor: "Aayush"\r\ntags: ["React", "JavaScript", "Web Development"]\r\nexcerpt: "Learn how to create scalable and maintainable web applications using React and modern JavaScript practices."\r\nreadTime: "5 min read"\r\n---\r\n\r\nimport { CodeBlock } from \'../components/CodeBlock\'\r\n\r\n# Building Modern Web Applications with React\r\n\r\nModern web development has evolved significantly over the years. React has emerged as one of the most popular libraries for building user interfaces.\r\n\r\n## Getting Started\r\n\r\nFirst, let\'s create a new React application:\r\n\r\n\r\n`npx create-react-app my-modern-app`\r\ncd my-modern-app\r\nnpm start\r\n\r\n\r\n# JavaScript Code Example\r\n\r\nHere\'s a JavaScript code block:\r\n\r\n```javascript\r\nconst calculateSum = (arr) => {\r\n  return arr.reduce((sum, num) => sum + num, 0);\r\n};\r\n\r\nconst numbers = [1, 2, 3, 4, 5];\r\nconsole.log(calculateSum(numbers)); // Output: 15\r\n```\r\n## Key Concepts\r\n\r\n### 1. Component Structure\r\n\r\nReact components should be:\r\n- Small and focused\r\n- Reusable\r\n- Easy to test\r\n\r\n### 2. State Management\r\n\r\nModern React apps have several options for state management:\r\n- useState for local state\r\n- Context API for shared state\r\n- Redux for complex state\r\n\r\n## Code Examples\r\n\r\nHere\'s a simple functional component:\r\n\r\n<CodeBlock language="jsx">\r\nfunction Welcome({ name }) {\r\n  return (\r\n    <div>\r\n      <h1>Hello, {name}</h1>\r\n      <p>Welcome to our app!</p>\r\n    </div>\r\n  );\r\n}\r\n</CodeBlock>\r\n\r\n## Best Practices\r\n\r\n1. Use functional components with hooks\r\n2. Implement proper error boundaries\r\n3. Follow the DRY principle\r\n\r\n## Summary\r\n\r\nBy following these patterns and practices, you can build maintainable and scalable React applications.\r\n\r\n## Further Reading\r\n- [React Documentation](https://reactjs.org)\r\n- [Modern JavaScript Features](https://javascript.info)'},wOhZ:function(e,n,r){"use strict";r.r(n),n.default='---\r\ntitle: "Building Modern Web Applications with React"\r\nslug: "building-modern-web-apps"\r\ndate: "2024-11-29"\r\nauthor: "Aayush"\r\ntags: ["React", "JavaScript", "Web Development"]\r\nexcerpt: "Learn how to create scalable and maintainable web applications using React and modern JavaScript practices."\r\nreadTime: "5 min read"\r\n---\r\n\r\nimport { CodeBlock } from \'../components/CodeBlock\'\r\n\r\n# Building Modern Web Applications with React\r\n\r\nModern web development has evolved significantly over the years. React has emerged as one of the most popular libraries for building user interfaces.\r\n\r\n## Getting Started\r\n\r\nFirst, let\'s create a new React application:\r\n\r\n\r\n`npx create-react-app my-modern-app`\r\ncd my-modern-app\r\nnpm start\r\n\r\n\r\n# JavaScript Code Example\r\n\r\nHere\'s a JavaScript code block:\r\n\r\n```javascript\r\nconst calculateSum = (arr) => {\r\n  return arr.reduce((sum, num) => sum + num, 0);\r\n};\r\n\r\nconst numbers = [1, 2, 3, 4, 5];\r\nconsole.log(calculateSum(numbers)); // Output: 15\r\n```\r\n## Key Concepts\r\n\r\n### 1. Component Structure\r\n\r\nReact components should be:\r\n- Small and focused\r\n- Reusable\r\n- Easy to test\r\n\r\n### 2. State Management\r\n\r\nModern React apps have several options for state management:\r\n- useState for local state\r\n- Context API for shared state\r\n- Redux for complex state\r\n\r\n## Code Examples\r\n\r\nHere\'s a simple functional component:\r\n\r\n<CodeBlock language="jsx">\r\nfunction Welcome({ name }) {\r\n  return (\r\n    <div>\r\n      <h1>Hello, {name}</h1>\r\n      <p>Welcome to our app!</p>\r\n    </div>\r\n  );\r\n}\r\n</CodeBlock>\r\n\r\n## Best Practices\r\n\r\n1. Use functional components with hooks\r\n2. Implement proper error boundaries\r\n3. Follow the DRY principle\r\n\r\n## Summary\r\n\r\nBy following these patterns and practices, you can build maintainable and scalable React applications.\r\n\r\n## Further Reading\r\n- [React Documentation](https://reactjs.org)\r\n- [Modern JavaScript Features](https://javascript.info)'}}]);
//# sourceMappingURL=component---src-pages-articles-js-73ace78ca1533d43a0cf.js.map