component---src-pages-articles-js-9b2a8f2005602f790654.js.map

{"version":3,"sources":["webpack:///./content/articles/first.md","webpack:///./content/articles/fifth copy.md","webpack:///./content/articles/second copy.md","webpack:///./content/articles/fourth.md","webpack:///./content/articles sync ^\\.\\/.*\\.md$","webpack:///./src/pages/articles.js","webpack:///./content/articles/fifth copy 2.md","webpack:///./content/articles/second.md","webpack:///./content/articles/third.md","webpack:///./content/articles/fifth.md"],"names":["map","webpackContext","req","id","webpackContextResolve","__webpack_require__","o","e","Error","code","keys","Object","resolve","module","exports","converter","showdown","Converter","tables","simplifiedAutoLink","strikethrough","tasklists","ghCodeBlocks","parseImgDimensions","simpleLineBreaks","openLinksInNewWindow","emoji","Box","styled","div","withConfig","displayName","componentId","ArticleCard","props","darkMode","Tag","span","Article","require","_ref3","node","frontMatter","markdownContent","collapsed","isExpanded","setIsExpanded","useState","React","createElement","Fragment","Link","to","key","expanded","style","marginBottom","color","padding","name","date","author","readTime","Array","isArray","tags","marginTop","tag","replace","background","excerpt","fontSize","className","dangerouslySetInnerHTML","__html","Articles","_ref","_data$allFile","data","toggleDarkMode","pageContext","Layout","Sidebar","active","perspective","maxWidth","margin","position","gridTemplateColumns","display","undefined","allFile","edges","_ref2","index","articleContent","content","parsed","JSON","parse","parts","default","split","length","frontMatterLines","trim","forEach","line","values","s","value","join","startsWith","endsWith","slice","v","makeHtml","error","console","parseMarkdown","stringify","DarkMode"],"mappings":"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","file":"component---src-pages-articles-js-9b2a8f2005602f790654.js","sourcesContent":["export 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)\";","export 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)\";","export 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)\";","export 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)\";","var map = {\n\t\"./fifth copy 2.md\": \"jep+\",\n\t\"./fifth copy.md\": \"2d4l\",\n\t\"./fifth.md\": \"wOhZ\",\n\t\"./first.md\": \"1wXr\",\n\t\"./fourth.md\": \"TfUS\",\n\t\"./second copy.md\": \"BrBJ\",\n\t\"./second.md\": \"mN2o\",\n\t\"./third.md\": \"naJN\"\n};\n\n\nfunction webpackContext(req) {\n\tvar id = webpackContextResolve(req);\n\treturn __webpack_require__(id);\n}\nfunction webpackContextResolve(req) {\n\tif(!__webpack_require__.o(map, req)) {\n\t\tvar e = new Error(\"Cannot find module '\" + req + \"'\");\n\t\te.code = 'MODULE_NOT_FOUND';\n\t\tthrow e;\n\t}\n\treturn map[req];\n}\nwebpackContext.keys = function webpackContextKeys() {\n\treturn Object.keys(map);\n};\nwebpackContext.resolve = webpackContextResolve;\nmodule.exports = webpackContext;\nwebpackContext.id = \"cLba\";","import React, { useState } from \"react\";\r\nimport styled from \"styled-components\";\r\nimport { Sidebar, DarkMode } from \"../components\";\r\nimport { graphql, Link } from \"gatsby\";\r\nimport Layout from \"../components/layout\";\r\nimport showdown from \"showdown\";\r\n\r\nconst converter = new showdown.Converter({\r\n  tables: true,\r\n  simplifiedAutoLink: true,\r\n  strikethrough: true,\r\n  tasklists: true,\r\n  ghCodeBlocks: true,\r\n  parseImgDimensions: true,\r\n  simpleLineBreaks: true,\r\n  openLinksInNewWindow: true,\r\n  emoji: true,\r\n});\r\n\r\nconst Box = styled.div`\r\n  font-size: 1.18em;\r\n  font-family: \"Montserrat\", sans-serif;\r\n  padding-right: 1em;\r\n  line-height: 165%;\r\n`;\r\n\r\nconst ArticleCard = styled.div`\r\n  // Code block styling\r\n  pre {\r\n    background: ${(props) => (props.darkMode ? \"#1a1a1a\" : \"#f5f5f5\")};\r\n    padding: 1.2em;\r\n    border-radius: 8px;\r\n    overflow-x: auto;\r\n    margin: 1em 0;\r\n    border: 1px solid ${(props) => (props.darkMode ? \"#333\" : \"#e1e1e1\")};\r\n     \r\n      max-width: 100%; /* Prevent it from exceeding the container width */\r\n      white-space: pre-wrap; /* Allow wrapping for long lines */\r\n  }\r\n\r\n  // Inline code styling (backticks)\r\n  code {\r\n    font-family: \"Fira Code\", Consolas, Monaco, \"Andale Mono\", monospace;\r\n    background: ${(props) => (props.darkMode ? \"#2d2d2d\" : \"#f0f0f0\")};\r\n    color: ${(props) => (props.darkMode ? \"#e6e6e6\" : \"#333\")};\r\n    padding: 0.2em 0.4em;\r\n    border-radius: 4px;\r\n    font-size: 0.9em;\r\n    border: 1px solid ${(props) => (props.darkMode ? \"#404040\" : \"#ddd\")};\r\n  }\r\n\r\n  // Adjust code inside pre blocks\r\n  pre code {\r\n    background: none;\r\n    padding: 0;\r\n    border: none;\r\n    font-size: 0.95em;\r\n    line-height: 1.5;\r\n    display: block;\r\n  }\r\n\r\n  // Language label for code blocks\r\n  pre:before {\r\n    content: attr(data-language);\r\n    display: block;\r\n    background: ${(props) => (props.darkMode ? \"#333\" : \"#e1e1e1\")};\r\n    color: ${(props) => (props.darkMode ? \"#ccc\" : \"#666\")};\r\n    font-size: 0.8em;\r\n    padding: 0.2em 0.6em;\r\n    border-radius: 4px;\r\n    margin-bottom: 0.8em;\r\n    width: fit-content;\r\n  }\r\n\r\n  background: ${(props) => (props.darkMode ? \"rgb(17 24 39/1)\" : \"#ffffff\")};\r\n  color: white;\r\n  border-radius: 8px;\r\n  box-shadow: rgb(46, 64, 83) 0px 0.25em 0.3em;\r\n  margin-bottom: 1.5rem;\r\n\r\n  p {\r\n    margin-bottom: 1em;\r\n    line-height: 1.7;\r\n  }\r\n\r\n  ul,\r\n  ol {\r\n    margin-left: 1.5em;\r\n    margin-bottom: 1em;\r\n  }\r\n\r\n  // Links\r\n  a {\r\n    color: ${(props) => (props.darkMode ? \"#6CCBFE\" : \"#0066cc\")};\r\n    text-decoration: none;\r\n\r\n    &:hover {\r\n      text-decoration: underline;\r\n    }\r\n  }\r\n\r\n  // Blockquotes\r\n  blockquote {\r\n    border-left: 3px solid ${(props) => (props.darkMode ? \"#666\" : \"#ddd\")};\r\n    margin: 1em 0;\r\n    padding-left: 1em;\r\n    color: ${(props) => (props.darkMode ? \"#ccc\" : \"#666\")};\r\n    font-style: italic;\r\n  }\r\n\r\n  // Images\r\n  img {\r\n    max-width: 100%;\r\n    height: auto;\r\n    border-radius: 4px;\r\n    margin: 1em 0;\r\n  }\r\n\r\n  // Tables\r\n  table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n    margin: 1em 0;\r\n  }\r\n\r\n  th,\r\n  td {\r\n    padding: 0.5em;\r\n    border: 1px solid ${(props) => (props.darkMode ? \"#444\" : \"#ddd\")};\r\n    text-align: left;\r\n  }\r\n\r\n  th {\r\n    background: ${(props) => (props.darkMode ? \"#333\" : \"#f5f5f5\")};\r\n  }\r\n`;\r\n\r\nconst ArticleContent = styled.div`\r\n  color: ${(props) => (props.darkMode ? \"#fff\" : \"#333\")};\r\n\r\n  h1,\r\n  h2,\r\n  h3 {\r\n    margin-top: 1.5em;\r\n    margin-bottom: 0.5em;\r\n  }\r\n\r\n  pre {\r\n    background: ${(props) => (props.darkMode ? \"#333\" : \"#f5f5f5\")};\r\n    padding: 1em;\r\n    border-radius: 4px;\r\n    overflow-x: auto;\r\n  }\r\n\r\n  code {\r\n    font-family: monospace;\r\n  }\r\n`;\r\n\r\nconst Tag = styled.span`\r\n  background: ${(props) => (props.darkMode ? \"black\" : \"#eee\")};\r\n  color: ${(props) => (props.darkMode ? \"white\" : \"#333\")};\r\n  padding: 0.2rem 0.5rem;\r\n  border-radius: 4px;\r\n  margin-right: 0.5rem;\r\n  font-size: 0.8em;\r\n`;\r\n\r\nconst getArticle = (name) => {\r\n  return require(\"../../content/articles/\" + name + \".md\");\r\n};\r\n\r\nconst articles = {\r\n  first: require(\"../../content/articles/first.md\"),\r\n  second: require(\"../../content/articles/second.md\"),\r\n  second: require(\"../../content/articles/second.md\"),\r\n  second: require(\"../../content/articles/second.md\"),\r\n};\r\n\r\nconst Articles = ({ data, darkMode, toggleDarkMode, pageContext }) => {\r\n  const parseMarkdown = (content) => {\r\n    try {\r\n      const parsed = JSON.parse(content);\r\n      const parts = parsed && parsed.default ? parsed.default.split(\"---\") : [];\r\n\r\n      if (parts.length >= 3) {\r\n        const frontMatterLines = parts[1].trim().split(\"\\n\");\r\n        const frontMatter = {};\r\n\r\n        frontMatterLines.forEach((line) => {\r\n          const [key, ...values] = line.split(\":\").map((s) => s.trim());\r\n          if (key) {\r\n            let value = values.join(\":\").trim();\r\n            value = value.replace(/^[\"'](.*)[\"']$/, \"$1\");\r\n            if (value.startsWith(\"[\") && value.endsWith(\"]\")) {\r\n              value = value\r\n                .slice(1, -1)\r\n                .split(\",\")\r\n                .map((v) => v.trim());\r\n            }\r\n            frontMatter[key] = value;\r\n          }\r\n        });\r\n        const markdownContent = converter.makeHtml(parts[2].trim());\r\n        return { frontMatter, markdownContent };\r\n      }\r\n      return { frontMatter: {}, markdownContent: content };\r\n    } catch (error) {\r\n      console.error(\"Error parsing markdown:\", error);\r\n      return { frontMatter: {}, markdownContent: content };\r\n    }\r\n  };\r\n\r\n  return (\r\n    <Layout darkMode={true}>\r\n      <Sidebar active={\"articles\"} darkMode={true} />\r\n      <div\r\n        className=\"grid align-center\"\r\n        style={{\r\n          perspective: \"100rem\",\r\n          maxWidth: \"93%\",\r\n          margin: \"auto\",\r\n          position: \"relative\",\r\n          gridTemplateColumns: \"1fr\",\r\n        }}\r\n      >\r\n        <h1>Article</h1>\r\n        <div\r\n         className=\"articles-container\"\r\n          style={{\r\n            display: \"grid\",\r\n            gridTemplateColumns:\r\n              pageContext && pageContext.name !== undefined ? \"1fr\" : \"1fr 1fr\",\r\n          }}\r\n        >\r\n          \r\n          {data?.allFile?.edges.map(({ node }, index) => {\r\n            if (\r\n              pageContext &&\r\n              pageContext.name &&\r\n              node.name !== pageContext.name\r\n            )\r\n              return false;\r\n            const articleContent = getArticle(node.name);\r\n            const { frontMatter, markdownContent } = parseMarkdown(\r\n              JSON.stringify(articleContent)\r\n            );\r\n\r\n            return (\r\n             \r\n                <Box>\r\n                  <Article\r\n                    node={node}\r\n                    collapsed={pageContext && pageContext.name !== undefined}\r\n                    frontMatter={frontMatter}\r\n                    markdownContent={markdownContent}\r\n                  />\r\n                </Box>\r\n             \r\n            );\r\n          })}\r\n        </div>\r\n      </div>\r\n      <DarkMode toggleDarkMode={toggleDarkMode} darkMode={darkMode} />\r\n    </Layout>\r\n  );\r\n};\r\n\r\nconst Article = ({ node, frontMatter, markdownContent, collapsed }) => {\r\n  const darkMode = true;\r\n  const [isExpanded, setIsExpanded] = useState(!collapsed);\r\n\r\n  return (\r\n    <>\r\n      {collapsed && <Link to=\"/articles\">Back</Link>}\r\n      <ArticleCard key={node.id} darkMode={darkMode} expanded={isExpanded}>\r\n        <div\r\n          style={{\r\n            marginBottom: \"1rem\",\r\n            color: darkMode ? \"#999\" : \"#666\",\r\n            padding: \"1em 1em 0em 1em\",\r\n          }}\r\n        >\r\n          <h2>{node.name}</h2>\r\n          {frontMatter.date && <span>📅 {frontMatter.date} • </span>}\r\n          {frontMatter.author && <span>✍️ {frontMatter.author} • </span>}\r\n          {frontMatter.readTime && <span>⏱️ {frontMatter.readTime}</span>}\r\n\r\n          {Array.isArray(frontMatter.tags) && (\r\n            <div style={{ marginTop: \"1rem\", marginBottom: \"1rem\" }}>\r\n              {frontMatter.tags.map((tag) => (\r\n                <Tag key={tag} darkMode={darkMode}>\r\n                  {tag.replace(/\"/g, \"\")}\r\n                </Tag>\r\n              ))}\r\n            </div>\r\n          )}\r\n        </div>\r\n\r\n        <div\r\n          style={{\r\n            background: collapsed? 'rgb(42 46 53 / 1)': \"linear-gradient(90deg, rgba(42, 46, 53, 1), rgba(60, 64, 74, 1), rgba(42, 46, 53, 1))\",\r\n            padding: \"0em 1em 1em 1em\",\r\n          }}\r\n        >\r\n          {frontMatter.excerpt && (\r\n            <p\r\n              style={{\r\n                fontSize: \"1.1em\",\r\n                color: darkMode ? \"#ccc\" : \"#666\",\r\n                marginBottom: \"1.5rem\",\r\n              }}\r\n            >\r\n              {frontMatter.excerpt}\r\n            </p>\r\n          )}\r\n\r\n          <div className=\"content-preview\">\r\n            {collapsed && (\r\n              <div\r\n                dangerouslySetInnerHTML={{\r\n                  __html: markdownContent,\r\n                }}\r\n              />\r\n            )}\r\n          </div>\r\n\r\n          {!collapsed ? (\r\n            <Link to={\"/articles/\" + node.name}>Read more</Link>\r\n          ) : null}\r\n        </div>\r\n      </ArticleCard>\r\n    </>\r\n  );\r\n};\r\nexport const query = graphql`\r\n  query {\r\n    allFile(\r\n      filter: {\r\n        sourceInstanceName: { eq: \"articles\" }\r\n        extension: { regex: \"/(md|mdx)/\" }\r\n      }\r\n    ) {\r\n      edges {\r\n        node {\r\n          id\r\n          name\r\n          relativePath\r\n          internal {\r\n            content\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport default Articles;\r\n","export 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)\";","export 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)\";","export 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)\";","export 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)\";"],"sourceRoot":""}