WordPress 주제에 React를 포함하는 방법

If you like this post, please check out my Courses and Online Bootcamps at JavaScript for WordPress.

WordPress로 응답
WordPress 5.0 이후, React (또는 추상적) 는 현재WordPress와 함께 발표되고 있습니다.
WordPress는 전체 React와 ReactDOM 라이브러리를 가져와 wp.element 라는 전역 창 대상에 내보냅니다.
이는 대부분의 React 애플리케이션과 약간 다른 방식으로 작동합니다.

일반적인 React 프로그램에서, 우리는 React를 가져오지만,WordPress에서는 React를 가져오지 않습니다
일반적으로 React 응용 프로그램이나 프로젝트의 경우 React를 사용하는 각 파일의 맨 위에 React를 가져올 수 있습니다.주 색인 페이지에서 ReactDOM을 가져올 수도 있습니다.

// A Normal React App
import React from "react";
import ReactDOM from "react-dom";
import MyComponent from "./components/MyComponent";

ReactDOM.render(<MyComponent />, document.getElementById("root"));

WordPress에서는 전역wp.element 객체에서 사용할 수 있기 때문에 React 또는 React DOM을 가져오지 않습니다.
그래서 Word Press 프로젝트에React를 추가할 때 중요한 차이점은 파일에 가져오지 않았다는 것이다.
React를 정상적으로 사용하는 것과 WordPress 테마나 플러그인 사이의 또 다른 차이는 도구와 관련이 있습니다.

WP 스크립트를 사용하여 React 애플리케이션 생성
Create React Apps나 유사 키트를 사용하여 개발 서버를 실행하고 운영 코드를 생성하기 전에 React 애플리케이션을 구축한 경우
이 도구는 코드와 묶이지 않고 전역 창 대상wp.element에 React가 불러오기 때문에WordPress에 작동하지 않습니다.Create React Appliance는 팝업 없이 외부 소스에서 React를 로드하는 것을 지원하지 않기 때문에 이것이 반드시 도구의 최선은 아니다.
다행히도 WordPress팀은CreateReact 응용 프로그램에서 사용하는 wp-scripts 패키지를 바탕으로 react-scripts 패키지를 구축했다.
기본적으로 WP 스크립트에는 develop, lint, test 및build 명령이 포함됩니다.SASS를 컴파일하는 것과 같은 특별한 일을 하고 싶다면, 사용자 정의 웹 설정을 사용해서 확장할 수도 있다.
다음은 WP 스크립트를 설정하는 방법에 대해 설명하지만, 먼저 React를 프런트엔드에 로드하여 기본 주제를 설정하도록 하겠습니다.

주제가 뭐예요?
React가 로드되었는지 확인하려면 자체 JavaScript 파일의 종속 항목으로 wp-element만 추가하면 됩니다.
다음은 당신의 functions.php 서류입니다.

// Enqueue Theme JS w React Dependency
add_action( 'wp_enqueue_scripts', 'my_enqueue_theme_js' );
function my_enqueue_theme_js() {
  wp_enqueue_script(
    'my-theme-frontend',
    get_stylesheet_directory_uri() . '/build/index.js',
    ['wp-element'],
    time(), // Change this to null for production
    true
  );
}

유효하려면 /build/index.js에 있는 파일이 필요합니다.우리가 build 명령을 실행할 때, WP 스크립트는 우리를 위해 이것을 만들 것이다
현재 wp.element 는 테마의 앞부분에 불러옵니다.

WP 스크립트 설정 방법
WP 스크립트 설정은 1) 설치wp-scripts,2) 패키지에 스크립트를 추가합니다.json 파일.
패키지가 설정되지 않은 경우json 파일을 만들고 WordPress 주제의 루트 디렉토리에서 다음 명령을 실행합니다.

npm init

return 를 누르면 모든 알림을 볼 수 있고, 사용자 정의 정보를 추가할 수 있습니다.
소포를 받으면json 파일을 만든 후 다음 명령을 실행합니다.

npm install @wordpress/scripts --save-dev

이것은 WP 스크립트를 node 모듈에 다운로드하여 명령줄에서 사용할 수 있도록 합니다.
우리는 지금 이렇게 할 수 있다.

wp-scripts start

그러나, 더욱 통용되고 사용하기 쉽도록 WordPress 스크립트를 NPM 스크립트에 비추겠습니다.
너의 소포를 열어라.현재 설정"scripts"을 json 파일로 대체합니다.

{
  "name": "myreacttheme",
  "version": "1.0.0",
  "description": "My WordPress theme with React",
  "main": "src/index.js",
  "dependencies": {},
  "devDependencies": {
    "@wordpress/scripts": "^5.1.0"
  },
  "scripts": {
    "build": "wp-scripts build",
    "check-engines": "wp-scripts check-engines",
    "check-licenses": "wp-scripts check-licenses",
    "lint:css": "wp-scripts lint-style",
    "lint:js": "wp-scripts lint-js",
    "lint:pkg-json": "wp-scripts lint-pkg-json",
    "start": "wp-scripts start",
    "test:e2e": "wp-scripts test-e2e",
    "test:unit": "wp-scripts test-unit-js"
  },
  "author": "",
  "license": "1 GNU V2+, MIT"
}

이러한 명령이 모두 필요하지 않으면 start 및 build 명령으로 축소할 수 있습니다.그러나 다른 것도 유용할 수 있다.
이제 다음과 같은 기능을 실행할 수 있습니다.

npm start

WP 스크립트start 명령을 취소합니다.이것은 src/index.js 에서 가져온 파일을 찾고, 파일이 바뀔 때 build/index.js 로 구축합니다.build 명령은 같은 동작을 실행하지만 한 번만 실행하고 변경 사항을 감시하지 않습니다.

사용자 지정 페이지 템플릿에 React 추가
점점 더 많은 내용 표시가 블록을 통해WordPress에서 제어된다.WordPress의 블록도 React를 기반으로 하지만 그 자체는 작은 생태계로 이 블로그 글의 범위 안에 있지 않다.
여기서 사용자 정의 페이지 템플릿에 React를 추가하는 방법을 중점적으로 소개할 것입니다.비록 우리가 하는 모든 것은 하나의 블록에 구축될 수 있지만, 때때로 사용자 정의 페이지 템플릿을 구축하는 것은 여전히 유용하다.
이를 위해 2020 기본 WordPress 주제의 하위 주제를 작성합니다.내 기본 주제 구조는 다음과 같습니다.

/build
/src
-- index.js
functions.php
package.json
page-react.php
style.css

이것들은 우리가 필요로 하는 최저 요구들이다.
설명이 많지 않으니 다음은 함수 코드입니다.php 파일과 스타일입니다.css 파일.
기능php

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {

  $parent_style = 'twentytwenty-style'; 

  wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );

  wp_enqueue_style( 'child-style',
    get_stylesheet_directory_uri() . '/style.css',
    [ $parent_style ],
    time() //wp_get_theme()->get('Version')
  );

  wp_enqueue_script(
    'my-theme-frontend',
    get_stylesheet_directory_uri() . '/build/index.js',
    ['wp-element'],
    time() //For production use wp_get_theme()->get('Version')        
  );

}

풍격css

/*
 Theme Name:   Twenty Twenty Child
 Description:  Twenty Twenty Child Theme
 Author:       Zac Gordon
 Author URI:   https://javascriptforwp.com/
 Template:     twentytwenty
 Version:      0.9.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  twentytwentychild
*/

다음과 같이 매우 간단한 사용자 지정 페이지 템플릿page-react.php이 있습니다.

<?php
/**
 * Template Name: React Template
 */
get_header();
?>

<main id="site-content" role="main">
    <article class="post-2 page type-page status-publish hentry">
        <?php get_template_part( 'template-parts/entry-header' ); ?>
        <div class="post-inner thin">
            <div class="entry-content">             

                <div id="react-app"></div><!-- #react-app -->

            </div><!-- .entry-content -->
        </div><!-- .post-inner -->
    </article><!-- .post -->
</main><!-- #site-content -->

<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>
<?php get_footer(); ?>

이것은 기본적으로 부모 테마의 간소화 page.php 템플릿이고, React 코드를 불러올 수 있도록 <div id="react-app"></div> 템플릿이 추가되었습니다.
React를 사용하면 테마의 대부분을 구축할 수 있지만, 하나의 템플릿에서만 불러올 것입니다.
이 설정 프로세스를 완료하려면 새 페이지를 만들고 페이지 템플릿으로 "React Template"을 선택합니다.

저희 반응을 적어주세요.src/index.js 파일에서, 우리는React 코드를 작성하여 페이지에 추가할 수 있습니다.
이 시리즈에서, 우리는 이 기초 위에서 한층 더 발전할 것이지만, 현재 우리는 간단한 구성 요소를 추가하여, 단추를 눌러서 어떤 항목의 투표 수를 증가시킬 수 있도록 할 것이다.
파일:/src/index.js

const { render, useState } = wp.element;

const Votes = () => {
  const [votes, setVotes] = useState(0);
  const addVote = () => {
    setVotes(votes + 1);
  };
  return (
    <div>
      <h2>{votes} Votes</h2>
      <p>
        <button onClick={addVote}>Vote!</button>
      </p>
    </div>
  );
};
render(<Votes />, document.getElementById(`react-app`));

여기에는 몇 가지 중요한 고려 사항이 있습니다.

우리는 페이지에서React나ReactDOM을 가져오는 것이 아니라 wp.element에서 우리가 필요로 하는 내용을 가져옵니다. 이것은 이미 불러왔습니다.

ReactDOM.render()도 wp.element에 포함

현재 이 상태는 WordPress에 저장되지 않지만, 향후 기사

에서 변경될 예정입니다.
여기서부터 원하는 코드를 작성하고, 코드를 단독 파일로 분해해서 필요에 따라 가져올 수 있습니다.
Word Press 주제에 React를 추가할 수 있기를 바랍니다.

라이브러리 사용을 위한 웹 패키지 외부 설정
사용하는 대부분의 React 패키지는 React를 최종 코드와 묶고, 자신의 코드에 import React from "react" 를 포함하는 데 사용됩니다.
기본적으로 WP 스크립트에는 적용되지 않습니다.이를 위해서는 자체 webpack.config.js 파일로 WP 스크립트를 확장하고 React와 ReactDom을 번들 코드 외에 사용할 수 있는 외부 자원으로 정의해야 한다.
이렇게 하려면 주제의 루트 디렉토리에 새 webpack.config.js 파일을 만들고 다음을 추가합니다.

const defaults = require("@wordpress/scripts/config/webpack.config");

module.exports = {
  ...defaults,
  externals: {
    "react": "React",
    "react-dom": "ReactDOM"
  }
};

WP 스크립트에서 기본 구성을 가져와 Webpack의 대체 구성으로 추가합니다.그리고 'react' 과 'react dom' 을 사용할 수 있는 외부 대상으로 정의하는 사용자 정의 항목을 추가할 수 있습니다.
이렇게 하면 React를 가져오려는 타사 React 라이브러리를 사용하는 동안 오류가 발생하지 않습니다.

다음 단계
여기서부터 당신의 주제를 위해 필요한 모든 반응을 세우고 싶습니다.눈썹, 사이드바, 꼬리 등 다른 곳에 리액션을 불러와야 할 수도 있지만, 과정은 매우 비슷하다.
미래의 글에서 우리는 당신이 Word Press 주제에서 React를 사용하여 할 수 있는 일을 더 많이 토론할 것입니다!찾을 수 있습니다main repo for this series here.
WordPress 테마와 프로젝트에서 React를 어떻게 사용하는지 공유하세요!

If you like this post, please check out my Courses and Online Bootcamps at JavaScript for WordPress.