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

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

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

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

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

개츠비 스타트

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

개츠비 개발

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

Hello World

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

페이지 폴더

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

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

페이지

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

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

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

오류 페이지

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

미리보기 페이지

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

오류 페이지

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

블로그 페이지

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

블로그 페이지

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

연락 페이지

장소 페이지

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

Navbar.js

Footer.js

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

Navbar 및 바닥 글 표시

홈 페이지에 표시됩니다.

구성 요소 표시

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

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

Layout.js

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

index.js

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

동일한 홈페이지

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

blog.js

places.js

contact.js

404.js

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

blog

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