반응 앱에 템플릿 다시 쓰기

2469 단어
멋진 도전입니다. 예를 들어 이 템플릿( live demo )과 같이 원하는 템플릿을 선택하고 이 템플릿을 사용하여 반응 앱을 만듭니다.



추신: 반응 결과를 보고 싶다면 아래로 스크롤하여 github 저장소를 찾으세요!

PS2: 이 튜토리얼은 여러분이 반응 사이트의 시작하기 튜토리얼을 따랐고 약간의 타이프 스크립트를 알고 있다고 가정합니다. 나는 여기에서 그다지 정확하지 않으며 반응 경험이 있는 몇 가지 단계를 해석해야 합니다.

탐색을 허용하려면(메뉴를 클릭하면 URL이 변경됨) react-router-dom을 사용할 수 있습니다. 여기서 가장 쉬운 단계는 라우터를 포함하는 이 템플릿으로 시작하는 것입니다(찾았습니다here ). 나는 그것을 typescript로 선택합니다.

npx create-react-app react-template --template react-router-dom-typescript
cd react-template
npm install
code . // this launches visual code studio


이제 다음을 수행해야 합니다.
  • 정리, 페이지/파일을 비우기
  • 이 템플릿은 부트스트랩을 사용합니다. 따라서 dist 폴더의 index.html 파일에 대한 모든 스타일 및 자바스크립트 링크를 복사합니다(이것은 반응이 코드를 적용하는 프로덕션 최종 페이지입니다). 따라서 <head>에서 css에 대한 링크를 추가하고 이 템플릿에서 js는 body 태그의 맨 아래에 로드되므로 거기에도 복사하면 됩니다.
  • 모든 자산(예: css, js, 미디어)을 dist 폴더에 복사합니다
  • .
  • 먼저 모든 템플릿 html을 HomePage.js 반환 함수에 복사하기만 하면 됩니다
  • .
  • class의 모든 항목을 className으로 바꿉니다(이는 React가 class를 처리할 수 없기 때문입니다. class는 javascript의 예약어이고 react는 JSX를 사용하므로 혼동될 수 있습니다)
  • typescript가 반환하는 모든 오류를 확인합니다. 태그에는 둘러싸는 태그가 있어야 합니다. 따라서 <br><br />가 되고 <img ...><img .../>가 됩니다.
  • <a href="blabla"> 태그를 <Link to="">
  • 로 교체
  • 추가: import {Link} from "react-router-dom" 맨 위에
  • 링크 태그는 새 경로를 참조합니다. 예를 들어 <Link to="/contact">는 URL을 localhost:3000/contact로 가져옵니다. 이 페이지는 아직 존재하지 않지만 나중에 추가할 수 있습니다.
  • 일부 섹션을 추출하고 이에 대한 새로운 반응 구성 요소를 만듭니다(예: VideoHeader
  • ).
  • VideoHeader에서 YouTube 비디오를 배경으로 전체 화면으로 표시할 수 있는 기능을 추가했습니다
  • .
  • 새 페이지를 만들고 메뉴를 조정합니다.
    ... 음, 아래에서 내 예를 볼 수 있습니다. 재미있게 보내세요!

  • 여기에서 github를 확인하십시오.
    https://github.com/wimdenherder/react-bootstrap-template

    좋은 웹페이지 즐겨찾기