정보실

웹학교

정보실

Reactjs 관광 사이트를 만들어 GatsbyJS를 배우십시오 -1

본문

GatsbyJS (대행사 사이트블로그 사이트)로 두 개의 시리즈를 만든 후 이 멋진 기술에 대해 자세히 알고 싶었습니다.


https://dev.to/nabendu82/learn-gatsbyjs-by-creating-a-tourism-site-1-mnm 


나는 John Smilga의 udemy에 관한 이 멋진 시리즈를 발견했으며 이 거대한 시리즈는 그의 과정에서 얻은 학습을 기반으로 합니다.


Hampi로 알려진 인도의 멋진 세계 문화 유산에 대한 사이트를 만들 것입니다.


hello-world 스타터 키트를 사용하여 터미널로 가서 gatsbyTourism이라는 새로운 gatsby 프로젝트를 만듭니다.


Gatsby Start 

개츠비 스타트


다음으로, 디렉토리로 변경하고 gatsby develop을 수행하여 localhost에서 프로젝트를 시작합니다.


gatsby develop 

개츠비 개발


Hello World를 시작하는 기본적인 Hello World 스타터를 시작합니다! http://localhost:8000/


Hello World 

Hello World


VSCode에서 코드를 열 것입니다. 여기, 우리는 Hello World! 브라우저에 표시되는 것은 src-> pages 내의 index.js입니다.

pages folder 

페이지 폴더


이제 우리가 페이지 폴더 안에 생성 한 모든 페이지는 브라우저에서 엔드 포인트가 됩니다. 여기서는 react 라우터와 같은 것을 구현할 필요가 없습니다.


프로젝트에 필요한 4 개의 페이지 (blog, contact, places, 404)를 작성합니다.


pages 

페이지


모든 유형의 React 구성 요소를 만들 수 있지만 일관성을 위해 현재 기능 구성 요소로 만듭니다.


index.js 및 404.js는 특수 페이지이며 홈 및 오류에 표시됩니다.


먼저 404.js를 만든 다음 존재하지 않는 페이지로 이동합니다.


Error Page 

오류 페이지


존재하지 않는 페이지로 이동하면 아래에 표시됩니다.


Preview page 

미리보기 페이지


Preview custom 404 페이지를 클릭하면 오류 페이지가 표시됩니다.


Error page 

오류 페이지


다음에 블로그 페이지를 만들겠습니다.


Blog page 

블로그 페이지


이제 http://localhost:8000/blog로 이동하면 블로그 페이지가 나타납니다.


blog page 

블로그 페이지


연락처와 장소 페이지도 비슷한 방식으로 작성합니다.

contact page 

연락 페이지


places page 

장소 페이지


이제 Navbar 및 Footer 구성 요소를 살펴 보겠습니다. 컴포넌트 폴더 안에 src 폴더 안에 넣습니다.


Navbar.js 

Navbar.js


Footer.js 

Footer.js


이제 이 두 구성 요소를 페이지에 표시하는 가장 일반적인 React 방법은 가져 와서 표시하는 것입니다. index.js를 아래와 같이 변경하겠습니다.

Showing Navbar and Footer 

Navbar 및 바닥 글 표시



홈 페이지에 표시됩니다.


Showing component 

구성 요소 표시


이제 다른 모든 페이지에 대해 이 작업을 수행 할 수 있지만 Gatsby는 더 쉬운 솔루션을 제공합니다. Layout 구성 요소가 있고 Navbar 및 Footer 구성 요소가 포함됩니다. 또한 어린이 소품을 Layout 구성 요소에 전달합니다. 페이지에서 Layout 구성 요소를 사용한 후에는 왜 우리가 그것을 사용하는지 분명하게 알 수 있습니다.


따라서 components 폴더 안에 Layout.js 파일을 만듭니다.


Layout.js 

Layout.js


다음으로 index.js 파일에서 사용하십시오. 아시다시피 Layout 구성 요소가 다른 모든 것을 감싸고 있음을 알았을 것입니다. Hello World! 지금. 이것은 자식입니다. 소품은 Layout 구성 요소에 전달되었습니다.


index.js 

index.js


따라서 우리의 홈페이지는 여전히 동일합니다.


Same Home Page 

동일한 홈페이지


이제 다른 모든 페이지에서 재사용 가능한 구성 요소 레이아웃을 사용할 수 있으며 Navbar 및 Footer 구성 요소가 표시됩니다.


blog.js 

blog.js


places.js 

places.js


contact.js 

contact.js


404.js 

404.js


다른 길로 가면 Navbar와 Footer가 나타납니다.


blog 

blog


이것으로 시리즈의 1 부를 완성했습니다. 새로운 것을 배우기를 바랍니다. 이 링크에서 동일한 코드를 찾을 수 있습니다.





페이지 정보

조회 205회 ]  작성일19-12-04 16:51

웹학교