• 목록
• 답변
• 글쓰기
• 게시판 리스트 옵션
  • 수정
  • 삭제

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

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 % 또는 그 반대 또는 무엇)
  
• 위젯
  
• 그리고 내가 잊어 버린 다른 것들
  

Bootstrap

Conclusion

Useful resources and inspiration

• https://github.com/alexciarlillo/react-wp
• https://github.com/royboy789/angular-react-wordpress-theme
• https://1fix.io/angularjs-wp-rest-api/