[Front End] Creating your blog pages

Blog 페이지 작성

 

프로젝트안의 src 폴더안에 pages란 폴더를 생성한후 다음과 같은 pages를 생성합니다.

HomePage.js

AboutPage.js

ArticlesListPage.js

ArticlePage.js

NotFoundPage.js

 

HomePage.js

const HomePage = () => {
    return (
        <h1>This is the home page!</h1>
    )
}

export default HomePage;

 

AboutPage.js

const AboutPage = () => {
    return (
        <h1>This is the about page!</h1>
    )
}

export default AboutPage;

ArticlesListPage.js

const AriclesListPage = () => {
    return (
        <h1>This is the articles list page!</h1>
    )
}

export default AriclesListPage;

ArticlePage.js

const AriclePage = () => {
    return (
        <h1>This is the article page!</h1>
    )
}

export default AriclePage;

 

App.js

import './App.css';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
import AriclesListPage from './pages/ArticlesListPage';
import AriclePage from './pages/ArticlePage';

function App() {
  return (
    <div className="App">
      <h1>My Awesome Blog</h1>
      <div id="page-body">
        Welcome to my blog!
        <HomePage />
        <AboutPage />
        <AriclesListPage />
        <AriclePage />
      </div>
    </div>
  );
}

export default App;

 

결과 화면은 다음과 같습니다.