에이스테마

#1 React single-page WordPress REST API theme tutorial

  • profile_image
    점잖은격류 203.♡.44.38
    • 1건
    • 68회
    • 16-12-08 00:04

  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유

https://lamosty.com/2015/09/07/react-single-page-wordpress-rest-api-theme-tutorial/


어 - 오, 그런 윙윙 거리는 제목입니다. 내가 알지 압니다.. 하지만 사실입니다. React, WP REST API 및 기타 최첨단 프론트 엔드 기술로 구동되는 간단한 단일 페이지 WordPress 테마를 만드는 일련의 기사를 게시 할 예정입니다. 튜토리얼은 주로 자바 스크립트에 중점을 두고 디자인, 접근성 및 유연성을 측면에서 강조합니다. 새로운 기술과 사물을 많이 포함 할 것이므로 새로운 것을 배우지 않을까 걱정하지 마십시오. 

Tutorial navigation

 

  1. React 단일 페이지 WordPress REST API 주제 자습서 
  2. React WP 테마 : 구조, 노드 패키지 및 Webpack
  3. React WP 테마 : Smart vs Dumb components + React Router
  4. React WP 테마 : 바보 같은 구성 요소 만들기

 

Final result

아직 블로그가 코딩되어 있지 않아 온라인 데모가 없습니다. 부트 스트랩 블로그 디자인을 기반으로 한 단일 페이지 테마가 될 것입니다. 디자인 공간에서 많은 시간을 소비하고 대신 JS 부분에 집중하기를 원하지 않기 때문입니다. 메인 네비게이션은 정적 메뉴 항목으로 구성됩니다 : home, about, articles. 홈 페이지에는 마지막 10 개의 기사가 페이지 매김없이 나열됩니다. 다른 페이지 ( '기사'제외)는 WordPress 관리자의 대응 항목과 일치하는 단순한 페이지 일뿐입니다. 블로그는별로 역동적이지 않을 것입니다. 사이드 바는 없지만 간단하게 유지하려고합니다. 우리는 나중에 그 일을 할 수도 있습니다.


"Lexi"GitHub 레포에서 진행 상황을 볼 수 있습니다.

Strong and weak parts

블로그는 단일 페이지이므로 초고속으로 처리됩니다. 서버 측에서 WP REST API를 사용하여 Ajax 요청으로 백그라운드에 컨텐츠가 로드됩니다.


가장 약한 부분은 그것이 역동적이지 않고 보편적이지 않을 것이라는 것입니다 (동형). 애플리케이션을 사전 구성하여이 문제를 해결할 수도 있지만 현재는 서버와 클라이언트의 모든 것을 렌더링하지 않을 것입니다.


이 기사의 뒷부분에서 사용 된 기술에 대해 자세히 설명합니다.

What you’ll learn

특히 PHP / jQuery에서 온 경우가 많습니다. 우리는 React / Flux 열차에 뛰어 올라 모든 것을 볼 것입니다. 자습서를 마친 후에는 이러한 기술을 사용하여 자신 만의 WordPress 테마 또는 플러그인을 만들 수 있습니다. 어쨌든, 새로운 기술과 기술을 배우는 것이 좋습니다. 몇 년 후에 따라 잡을 수 있으며 처음 사용하는 방법을 알게 될 것입니다.

A bit about technologies/tools we’ll be using

React

쉬운 방법으로 사용자 인터페이스를 구현하는 JavaScript 라이브러리. HTML과 같은 언어 (JSX)로 선언적으로 정의하고 데이터를 제공하며 나머지는 React가 처리합니다. 다른 기사에서 React에 대해 더 많이 작성했습니다.


Redux

WordPress 테마의 상태 (또는 데이터)를 관리하기위한 JavaScript 라이브러리. 이것은 느슨하게 페이스 북의 단일 페이지 응용 프로그램 Flux 아키텍처를 따르지만 여러면에서 다릅니다. 예를 들어 여러 저장소가있는 대신 Redux에는 저장소가 하나만 있습니다. 데이터를 조작하는 이경 소켓에서이 저장소를 만듭니다. Redux는 완전히 유니버설입니다.


React-Router

AngularJS와 달리 React에는 라우팅 기능이 내장되어 있지 않습니다. 자체적으로 프로그래밍해야한다면 페이지 전환을 관리하고 메모리 및 URL 입력란 (HTML5 기록 API 사용)에서 현재 URL을 기억해야합니다. 다행히 일부 좋은 사람들은 React-based 웹 애플 리케이션을위한 모든 기능을 갖춘 라우팅 라이브러리 인 React-Router를 만들었습니다.


Webpack

Grunt 또는 Gulp을 아는 경우 Webpack은 (r) 진화입니다. 가장 큰 차이점은 Webpack이 그 어느 것보다 훨씬 빠릅니다. 모듈을 청크로 분할하여 변경된 모듈 만 컴파일합니다. Sass에서 사이트의 스타일을 지정하고 Bootstrap과 같은 많은 종속성이있는 경우 Webpack은 처음 실행 (느리게) 할 때 모든 것을 컴파일하지만 다음 실행에서는 변경된 파일 (또는 파일의 일부)만 컴파일합니다. 정말 빠릅니다.


게다가 Webpack은 소위 "로더"를 지원합니다. 그것들은 파일을 컴파일 / 사전 처리하는 방법을 알려주는 Webpack 플러그인입니다. 이런 식으로, Webpack이 당신이 좋아하는 언어를 지원하지 않는다면, 새로운 로더를 작성하거나이 사람들 중 일부에게 그것을 던지기 만하면됩니다. 그러나 실제로는 대부분의 로더가 이미 프로그래밍되어 있습니다 (Sass, JSX 등).


ES6 or ECMAScript 2015

ES6 또는 ECMAScript 2015는 오랫동안 기다려 왔던 자바 스크립트 언어의 반복이며 새로운 기능과 시원한 문법을 제공합니다.

 

  • 모듈 관리 (가져 오기 / 내보내기)
  • 상속, 생성자, 메서드 및 속성이있는 클래스 구문
  • 블록 가시성을 가진 새로운 변수를 만들기위한 let 키워드 (전역 변수보다 낫다)
  • arrow functions with lexical this (더 이상 'var that = this'트릭을 할 필요가 없다.)
  • 그리고 훨씬 더

 

이 모든 것이 훌륭하지만 대부분의 ES6은 아직 브라우저 사이에서 광범위하게 지원되지 않습니다. 바벨 JS가 등장합니다. ES6 JS를 표준 ES5로 변환하는 JavaScript 컴파일러입니다. 바벨은 React와 JSX를 즉시 지원합니다! 가장 좋은 점은 Babel을 Webpack과 함께 로더로 사용하여 컴파일 속도가 빨라진다는 점입니다.


WP REST API

내 블로그와 웹 모두에서 WP REST API에 대해 많이 쓰여졌으므로 여기에서 반복하지 않을 것입니다.


나는 여기에서 약간 불평해야한다. WP REST API를 처음 사용했을 때, 나는 그 가능성에 대해 정말로 흥분했습니다. 그러나이 싱글 페이지 WP 테마로 작업을 시작했을 때 많은 중요한 기능이 부족하다는 것을 알게되었습니다. 다음과 같은 API 엔드 포인트가 없습니다.


 

  • 사이트 메뉴 탐색 (예 : 기본 메뉴의 항목을 가져올 방법 없음)
  • site permalink 구조 (기사에 대한 링크는 무엇입니까? / % year % / % month % 또는 그 반대 또는 무엇)
  • 위젯
  • 그리고 내가 잊어 버린 다른 것들
위의 기능이 없으면 표준 동적 단일 페이지 WP 테마를 실제로 만들 수 없습니다.

반면에 WP REST API는 오픈 소스이므로 불평하는 대신 기여해야합니다. 불쌍해!


 

Bootstrap

 

부트 스트랩은 멋지고 UX 친화적 인 웹 페이지를 만들기위한 가장 유명한 프론트 엔드 프레임 워크입니다. 그들은 제 4 판을 발표하고 있습니다. 그래서 바로 들어가 보겠습니다. 이 프로젝트는 최첨단 웹 기술을 사용합니다.

 

Conclusion

 

나는 우리가 웹에서, 특히 WordPress 생태계에서 혁명의 위기에 처해 있다고 생각한다. 사람들이 단일 페이지 응용 프로그램 (예 : Facebook)의 멋진 UX에 익숙해지면 모든 웹 사이트의 비슷한 경험을 요구할 것입니다. 당신은 SPA가 SEO 친화적이지 않고 많은 콘텐츠가있는 사이트에는 좋지 않다고 말할 수도 있지만 동의해야합니다. Google은 이미 SPA를 크롤링하므로 사전 구성 또는 서버 렌더링을 통해 SPA를 약간만 지원하면됩니다.

게다가, 이제는 React / AngularJS와 함께 WP REST API를 배우고 사용하기에 가장 좋은시기라고 생각합니다. 아직 많은 사람들이 사용하고있는 것은 아니지만 꽤 성숙한 기술이되고 있습니다. WordPress에 마침내 WP REST API가 코어에 포함되면 준비가 완료됩니다.

 

Useful resources and inspiration

이 기사에서 제공되는 링크 외에도 다음과 같은 흥미로운 것들이 있습니다.

React / AngularJS WP 테마 :

 


 

유니버설 (동형) WP 테마 방법 :

 


 

 

 

[이 게시물은 최고관리자님에 의해 2021-05-28 01:50:07 ace-wz-banner 스킨에서 복사 됨]

댓글1

  • profile_image
    최고관리자
    • 59.♡.221.30

꾸며 청춘을 반짝이는 이것이다. 그림자는 굳세게 너의 사는가 피고, 뭇 것은 위하여서.

댓글
자동등록방지 숫자를 순서대로 입력하세요.
이름
비번
© All Rights Reserved by 에이스 테마 (ace-theme.com)