"use strict";(self.webpackChunkitblog_site=self.webpackChunkitblog_site||[]).push([[1974],{8453:(e,a,t)=>{t.d(a,{R:()=>o,x:()=>c});var r=t(6540);const s={},n=r.createContext(s);function o(e){const a=r.useContext(n);return r.useMemo(function(){return"function"==typeof e?e(a):{...a,...e}},[a,e])}function c(e){let a;return a=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),r.createElement(n.Provider,{value:a},e.children)}},9516:(e,a,t)=>{t.r(a),t.d(a,{assets:()=>i,contentTitle:()=>c,default:()=>p,frontMatter:()=>o,metadata:()=>r,toc:()=>l});const r=JSON.parse('{"id":"tutorial-basics/create-a-page","title":"Create a Page","description":"Add Markdown or React files to src/pages to create a standalone page:","source":"@site/docs/tutorial-basics/create-a-page.md","sourceDirName":"tutorial-basics","slug":"/tutorial-basics/create-a-page","permalink":"/docs/tutorial-basics/create-a-page","draft":false,"unlisted":false,"editUrl":"https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/docs/tutorial-basics/create-a-page.md","tags":[],"version":"current","sidebarPosition":1,"frontMatter":{"sidebar_position":1},"sidebar":"tutorialSidebar","previous":{"title":"Tutorial - Basics","permalink":"/docs/category/tutorial---basics"},"next":{"title":"Create a Document","permalink":"/docs/tutorial-basics/create-a-document"}}');var s=t(4848),n=t(8453);const o={sidebar_position:1},c="Create a Page",i={},l=[{value:"Create your first React Page",id:"create-your-first-react-page",level:2},{value:"Create your first Markdown Page",id:"create-your-first-markdown-page",level:2}];function d(e){const a={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,n.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(a.header,{children:(0,s.jsx)(a.h1,{id:"create-a-page",children:"Create a Page"})}),"\n",(0,s.jsxs)(a.p,{children:["Add ",(0,s.jsx)(a.strong,{children:"Markdown or React"})," files to ",(0,s.jsx)(a.code,{children:"src/pages"})," to create a ",(0,s.jsx)(a.strong,{children:"standalone page"}),":"]}),"\n",(0,s.jsxs)(a.ul,{children:["\n",(0,s.jsxs)(a.li,{children:[(0,s.jsx)(a.code,{children:"src/pages/index.js"})," \u2192 ",(0,s.jsx)(a.code,{children:"localhost:3000/"})]}),"\n",(0,s.jsxs)(a.li,{children:[(0,s.jsx)(a.code,{children:"src/pages/foo.md"})," \u2192 ",(0,s.jsx)(a.code,{children:"localhost:3000/foo"})]}),"\n",(0,s.jsxs)(a.li,{children:[(0,s.jsx)(a.code,{children:"src/pages/foo/bar.js"})," \u2192 ",(0,s.jsx)(a.code,{children:"localhost:3000/foo/bar"})]}),"\n"]}),"\n",(0,s.jsx)(a.h2,{id:"create-your-first-react-page",children:"Create your first React Page"}),"\n",(0,s.jsxs)(a.p,{children:["Create a file at ",(0,s.jsx)(a.code,{children:"src/pages/my-react-page.js"}),":"]}),"\n",(0,s.jsx)(a.pre,{children:(0,s.jsx)(a.code,{className:"language-jsx",metastring:'title="src/pages/my-react-page.js"',children:"import React from 'react';\nimport Layout from '@theme/Layout';\n\nexport default function MyReactPage() {\n  return (\n    <Layout>\n      <h1>My React page</h1>\n      <p>This is a React page</p>\n    </Layout>\n  );\n}\n"})}),"\n",(0,s.jsxs)(a.p,{children:["A new page is now available at ",(0,s.jsx)(a.a,{href:"http://localhost:3000/my-react-page",children:"http://localhost:3000/my-react-page"}),"."]}),"\n",(0,s.jsx)(a.h2,{id:"create-your-first-markdown-page",children:"Create your first Markdown Page"}),"\n",(0,s.jsxs)(a.p,{children:["Create a file at ",(0,s.jsx)(a.code,{children:"src/pages/my-markdown-page.md"}),":"]}),"\n",(0,s.jsx)(a.pre,{children:(0,s.jsx)(a.code,{className:"language-mdx",metastring:'title="src/pages/my-markdown-page.md"',children:"# My Markdown page\n\nThis is a Markdown page\n"})}),"\n",(0,s.jsxs)(a.p,{children:["A new page is now available at ",(0,s.jsx)(a.a,{href:"http://localhost:3000/my-markdown-page",children:"http://localhost:3000/my-markdown-page"}),"."]})]})}function p(e={}){const{wrapper:a}={...(0,n.R)(),...e.components};return a?(0,s.jsx)(a,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}}}]);