#12 CRA to Our Boilerplate

본 정리는 인프런 John Ahn 따라하며 배우는 노드, 리액트 시리즈 - 기본 강의를 참고하였습니다.

• 전체 흐름도

  

src 하위 경로에 다음 폴더 및 파일 추가

• _actions 폴더 생성
• _reducers 폴더 생성
• components 폴더 생성
  • views 폴더 생성
    • LandingPage 폴더 생성 : 처음 페이지
      • LandingPage.js 파일 생성 후 다음 코드 입력

      • ES7 React 확장팩을 설치하면 rfce를 입력하여 기본 코드 자동완성 가능

        

          //**LandingPage
          import React from 'react'
                        
          function LandingPage(){
              return (
                  <div>
                      LandingPage
                  </div>
              )
          }
          export default LandingPage**
        

    • LoginPage 폴더 생성 : 로그인 페이지
      • LoginPage.js 파일 생성 후 다음 코드 입력

        import React from 'react'
                  
        function LoginPage() {
          return (
            <div>LoginPage</div>
          )
        }
                  
        export default LoginPage
      

    • RegisterPage 폴더 생성 : 회원가 입 페이지
      • RegisterPage.js 파일 생성 후 다음 코드 입력

        import React from 'react'
                  
        function RegisterPage() {
          return (
            <div>RegisterPage</div>
          )
        }
                  
        export default RegisterPage
      

    • NavBar 폴더 생성 : 네비게이션 바
      • NavBar.js 파일 생성 후 다음 코드 입력

        import React from 'react'
                  
        function NavBar() {
          return (
            <div>NavBar</div>
          )
        }
                  
        export default NavBar
      

    • Footer 폴더 생성 : 하단 정보
      • Footer.js 파일 생성 후 다음 코드 입력

        import React from 'react'
                  
        export default function Footer() {
          return (
            <div>Footer</div>
          )
        }
      

• utils 폴더 생성
• hoc 폴더 생성
• Config.js 파일 생성