WordPress 개발자로서 React를 알아야합니까?

코어 포인트

WordPress 새로운 편집자 Gutenberg는 Facebook 오픈 소스 UI 라이브러리 인 React를 기반으로합니다. 그러나 사용자 정의 블록을 만들 계획이 없다면 Gutenberg를 사용하기 위해 React를 배울 필요가 없습니다.

React는 개발자가 대화 형 사용자 인터페이스를 구축 할 수있는 강력하고 재사용 가능한 라이브러리입니다. 가상 돔은 렌더링을 최적화하고 애플리케이션 성능을 향상시켜 웹 사이트를보다 역동적이고 반응이 좋게 만들어 사용자 경험을 향상시킵니다.

WordPress 개발자에게는 React를 학습하는 것이 필요하지 않지만 귀중한 기술이 될 수 있습니다. React의 숙련도는 고급 구텐베르크 개념을 더 잘 이해하고 시장 경쟁력을 향상시키는 데 도움이 될 수 있습니다.
이 기사는 원래 Torque Magazine에서 출판되었으며 허가를 받아 여기에서 재생산됩니다.
• WordPress 버전 5.0은 새로운 컨텐츠 편집 시스템 Gutenberg를 사용하여 WordPress 기사 편집기를 구동합니다. Gutenberg는 "블록 기반"편집기입니다. 컨텐츠를 만들 때 모든 컨텐츠가 블록입니다. 하나의 단락, 하나의 제목 및 두 개의 단락이있는 기사가있는 경우 4 개의 블록입니다.
Gutenberg에는 단락, 제목, 최신 기사, 그림, 인용 등의 기본 "Core"블록 세트가 제공됩니다. Gutenberg를 사용하여 컨텐츠를 작성하는 경우 사이트에 설치 한 WordPress 플러그인에서 제공하는이 블록 또는 사용자 정의 블록을 사용할 수 있습니다.
• Gutenberg는 JavaScript 구동 인터페이스입니다. 특히 Facebook의 오픈 소스 사용자 인터페이스 라이브러리 "React"를 사용하여 구축되었습니다. 이 기사에서는 JavaScript를 사용하여 Gutenberg 편집기에서 사용할 수있는 사용자 정의 블록을 만드는 내용 중 일부에 대해 설명합니다. 블록을 만들기 위해 JavaScript를 사용할 필요는 없습니다. ACF (Advanced Custom Fields)는 최근 PHP를 사용하여 커스텀 블록을 만드는 데 매우 유용한 시스템을 발표했습니다.
반응은 무엇입니까?

프론트 엔드 개발에서 가장 낮은 성능 작업은 DOM을 읽고 쓰는 것입니다. 브라우저에서 DOM을 참조하고 업데이트하는 것은 매우 어렵습니다. React는 반응 형 프로그래밍 모델 및 가상 DOM 추상화를 구현하여 더 나은 시스템을 제공합니다.

예를 들어 예를 들어, DOM과 직접 상호 작용하지 않고 (예 : jQuery.html () 또는 jQuery.Val ())을 사용하여 DOM의 가상 표현을 만듭니다. 우리는 그것을 가상 Dom 또는 vdom이라고 부릅니다. vdom은 DOM 구조를 나타내는 JavaScript 객체입니다. 반응 코드가 RECT의 변경 사항을 전달할 때마다 vdom은 다시 계산합니다. 그 후, 반응은 변화 전후에 DOM의 차이를 계산합니다. 그런 다음 반응 (ActDom 또는 React Native)은 변경 해야하는 DOM의 일부만 업데이트합니다. 그것이 중요하지 않은 방법. Gutenberg에서 React를 사용하는 방법은 무엇입니까? React는 재사용 가능한 구성 요소를 생성하기위한 라이브러리입니다. 재사용 가능하므로 인터페이스를 구성 요소와 결합 할 수 있습니다. Facebook에서 만든 오픈 소스 프로젝트입니다.

모든 것이 블록입니다. 텍스트, 이미지, 갤러리, 위젯, 짧은 코드 및 사용자 정의 HTML 스 니펫 (플러그인 또는 기타). 하나의 인터페이스 : 블록 인터페이스를 마스터하면 모든 것을 수행하는 방법을 알고 있습니다. —— Gutenberg 매뉴얼

블록은 Gutenberg의 기본 단위입니다. 우리는 콘텐츠를 하나 이상의 블록과 결합합니다.

구성 요소는 원자력 반응 장치이며, 구성 요소를 사용하여 React Applications를 결합합니다. Gutenberg는 각 블록이 하나 이상의 구성 요소로 구성되도록 React를 사용하여 작성됩니다.

이 시리즈에서 이것을 더 소개 할 것이라는 점에 주목하는 것이 중요하지만 Gutenberg는 React 위에 얇은 추상화 층을 추가했습니다. Gutenberg 코드에서는 React.createElement 대신 WP.CreateElement를 사용합니다. 동일한 방식으로 작동하지만 React의 API가 변경되면 WordPress는 이러한 변경 사항을 지원할시기를 결정하고 뒤로 호환 가능한 래퍼를 제공하거나 지원하지 않기로 결정할 수 있습니다.

이것은 미래를위한 좋은 계획이지만 지금은 반응입니다.

Gutenberg를 사용하여 개발에 대한 반응을 알아야합니까?

그래서 이것은 중요한 질문을 제기합니다. 반응을 배워야합니까? 불필요한. 자신만의 블록을 만들고 싶지 않다면이 문제는 없습니다. 코어 또는 플러그인에서 제공 한 블록 만 사용하려면 고유 한 블록 유형을 만들 필요가 없습니다.

필요하지 않습니다. 그러나 ... <..> JavaScript에 대해 너무 많이 배울 필요없이 기본 블록을 만들 수 있습니다. 공식 Gutenberg 예제에서 단순화 된이 기본 예제 블록을 확인하십시오.

최신 일 수있는 유일한 것은 wp.createElement (이 예에서는 변수 "el")를 사용하여 HTML을 생성하는 것입니다. 이것은 유형 "P"의 HTML 요소를 만드는 멋진 방법입니다. 이 시리즈의 다음 게시물에서 이것을 다룰 것입니다.

WordPress는 RECT보다 추상화 계층을 가지고 있으므로 실제로 알아야 할 것은 wp.createelement, html 생성 및 setattribute (), 블록 속성을 업데이트하기위한 일부 함수 만 있으면됩니다.

Gutenberg 매뉴얼의 Create Blocks 섹션을 읽은 다음 WordCamp Miami 2018 Gutenberg 워크숍의 샘플 리포지토리와 샘플 코드를보십시오. 이 모든 코드는 React를 탐색하지 않고 사용할 수 있습니다.

<...> 필요한 경우 ...

간단한 블록을 만들면 단 하나 또는 두 개의 컨트롤 만 만들면 앞에서 언급 한 두 가지 개념을 넘어서 React의 내용을 이해할 필요가 없습니다. 그러나보다 복잡한 블록을 만들려면 Gutenberg와 다른 React 앱간에 구성 요소를 공유하십시오 (예 : 플러그인의 WP-Admin 설정 화면 또는 모바일 앱).

React는 놀리는 매우 흥미로운 도서관이며 Mastering React는 시장에 적합한 기술입니다. 더 중요한 것은 React를 배우면 상태 관리, 단위 테스트 등보다 고급 Gutenberg 개념을보다 쉽게 ​​이해할 수 있습니다.

WordPress 및 Gutenberg에 대한 반응을 배우는 방법

이것은 Gutenberg의 React Development에 관한 일련의 기사의 시작입니다. 다음에 나는 React 기본 사항과 Gutenberg 블록에 적용하는 방법을 다룰 것입니다. 거기에서 우리는 동적 블록을 만들고 상태 관리 및 테스트를 살펴 봅니다.

내 웹 사이트에서, 나는 당신이 유용하다고 생각하는 Gutenberg 개발자 연설을 나열합니다. 이 시리즈에서는 React 개념을 설명 할 것이지만 JavaScript를 파고 React를 파고 싶다면 Wes Bos와 Zac Gordon은 React 및 JavaScript에 대한 훌륭한 과정을 제공하여 시작합니다.

반응 및 WordPress 개발에 대한 자주 묻는 질문 (FAQ) WordPress 개발에 React를 사용하면 어떤 이점이 있습니까?

React는 개발자가 대화 형 사용자 인터페이스를 구축 할 수있는 강력한 JavaScript 라이브러리입니다. 컴포넌트 기반 아키텍처를 통해 코드 재사용을 통해 개발이 더 빠르고 효율적입니다. 또한 React의 가상 돔은 렌더링을 최적화하고 응용 프로그램 성능을 향상시킵니다. WordPress 개발에 사용될 때 웹 사이트를보다 역동적이고 반응을 보이게하여 사용자 경험을 향상시킬 수 있습니다.

WordPress와 반응을 통합하는 방법은 무엇입니까?

반응은 WordPress REST API를 통해 WordPress와 통합 될 수 있습니다. 이를 통해 WordPress 사이트에서 데이터를 가져 와서 React 응용 프로그램에서 사용할 수 있습니다. WordPress 테마 또는 플러그인에서 사용자 정의 엔드 포인트를 작성한 다음 HTTP 요청을 사용하여 React 응용 프로그램에서 데이터를 검색하거나 보내십시오.

헤드리스 워드 프레스 CMS 란 무엇이며 반응과 어떤 관련이 있습니까?

Headless WordPress CMS는 프론트 엔드 (사용자 상호 작용의 일부)가 백엔드 (컨텐츠 관리의 일부)와 분리되는 WordPress 설정입니다. 이를 통해 개발자는 React를 포함하여 원하는 기술을 사용하여 프론트 엔드를 구축 할 수 있습니다. 이 설정은 프론트 엔드를 별도로 관리하고 백엔드와 독립적으로 최적화 할 수 있으므로 유연성과 성능 향상을 제공 할 수 있습니다.

기존 WordPress 테마와 반응을 사용할 수 있습니까?

예, 기존 WordPress 테마와 반응을 사용할 수 있습니다. 그러나 REACT 구성 요소를 통합하기 위해 테마 코드를 수정해야하므로 WordPress 및 React에 대한 이해가 필요합니다. 또는 Headless WordPress 테마와 같은 React 용으로 특별히 설계된 테마를 사용할 수 있습니다.

정면은 무엇이며 WordPress 및 React와 어떤 관련이 있습니까?

Frontity는 React를 사용하여 WordPress 테마를 구축하기위한 무료 및 오픈 소스 프레임 워크입니다. WordPress를 단순화하고 연결을 반응하여 많은 복잡한 구성을 처리하는 방법을 제공합니다. Frontity는 또한 서버 측 렌더링에 대한 React 테마를 최적화하여 성능과 SEO를 향상시킵니다.

WordPress와의 React를 사용하는 단점은 무엇입니까?

REACT는 WordPress 웹 사이트의 상호 작용과 사용자 경험을 크게 향상시킬 수 있지만 학습 곡선은 전통적인 WordPress 개발보다 가파른 것입니다. 또한 다른 호스팅 설정, 특히 헤드리스 워드 프레스 사이트의 경우 복잡성을 더할 수 있습니다.

워드 프레스 개발자가되기 위해 반응을 알아야합니까?

반응을 이해하는 것이 워드 프레스 개발자가되기 위해 필요한 요구 사항은 아니지만 귀중한 기술이 될 수 있습니다. WordPress가 계속 발전함에 따라 React를 사용하여 점점 더 많은 부분이 구축됩니다. React에 대해 배우면 WordPress 개발자로서 더 많은 기회를 열 수 있습니다.

WordPress 개발을 위해 React를 배우는 방법은 무엇입니까?

온라인 자습서, 과정 및 문서를 포함하여 React를 배울 수있는 많은 리소스가 있습니다. WordPress 개발에 특별히 반응을 적용하려면 WordPress와의 통합에 대한 공식 WordPress REST API 문서 또는 자습서를 탐색 할 수 있습니다.

WordPress와 함께 다른 JavaScript 라이브러리 또는 프레임 워크를 사용할 수 있습니까?

예, React는 일반적으로 WordPress와 함께 사용되지만 특히 Gutenberg 편집기가 도입 된 후에는 원하는 JavaScript 라이브러리 또는 프레임 워크를 사용할 수 있습니다. 여기에는 vue.js, Angular 및 기타 많은 프레임 워크가 포함됩니다.

React와 WordPress의 미래는 무엇입니까?

React와 WordPress의 미래는 유망 해 보입니다. REACT로 구축 된 Gutenberg 편집자의 도입과 헤드리스 워드 프레스 설정의 인기가 높아짐에 따라 WordPress 개발에서 React의 사용이 계속 증가 할 것입니다.

위 내용은 WordPress 개발자로서 React를 알아야합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!