# Hoàn thiện một ví dụ ReactJs Wordpress (ok) ![](/files/-MJIVUewOye3_zo3mjrD) C:\xampp\htdocs\abc\wp-content\themes\apps\package.json ``` { "name": "apps", "version": "0.1.0", "private": true, "dependencies": { "@material-ui/core": "^4.11.0", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", "bootstrap": "^4.5.2", "react": "^16.13.1", "react-dom": "^16.13.1", "react-router-dom": "^5.2.0", "react-scripts": "3.4.3" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } } ``` C:\xampp\htdocs\abc\wp-content\themes\apps\index.php ``` React App
``` C:\xampp\htdocs\celestial\wp-content\themes\celestial\functions.php ``` add_data( 'celestial-script', 'data', sprintf( 'var CelestialSettings = %s;', wp_json_encode( array( 'title' => get_bloginfo( 'name', 'display' ), 'path' => $path, 'URL' => array( 'api' => esc_url_raw( get_rest_url( null, '/wp/v2/' ) ), 'root' => esc_url_raw( $url ), ), 'woo' => array( 'url' => esc_url_raw( 'https://localhost/celestial/wp-json/wc/v2/' ), // hard-code URL since it needs to be HTTPS for WC REST API to work 'consumer_key' => 'ck_20e230a20e7d82952f606e85de9c54af76179722', 'consumer_secret' => 'cs_65ca7ed8948c88ef6ee2c136c010309e6c92e14d' ), ) ) ) ); } add_action( 'wp_enqueue_scripts', 'celestial_scripts' ); // Add various fields to the JSON output function celestial_register_fields() { // Add Author Name register_rest_field( 'post', 'author_name', array( 'get_callback' => 'celestial_get_author_name', 'update_callback' => null, 'schema' => null ) ); // Add Featured Image register_rest_field( 'post', 'featured_image_src', array( 'get_callback' => 'celestial_get_image_src', 'update_callback' => null, 'schema' => null ) ); // Add Published Date register_rest_field( 'post', 'published_date', array( 'get_callback' => 'celestial_published_date', 'update_callback' => null, 'schema' => null ) ); } add_action( 'rest_api_init', 'celestial_register_fields' ); function celestial_get_author_name( $object, $field_name, $request ) { return get_the_author_meta( 'display_name' ); } function celestial_get_image_src( $object, $field_name, $request ) { if($object[ 'featured_media' ] == 0) { return $object[ 'featured_media' ]; } $feat_img_array = wp_get_attachment_image_src( $object[ 'featured_media' ], 'thumbnail', true ); return $feat_img_array[0]; } function celestial_published_date( $object, $field_name, $request ) { return get_the_time('F j, Y'); } function celestial_excerpt_length( $length ) { return 20; } add_filter( 'excerpt_length', 'celestial_excerpt_length' ); /** * Add Theme Support * * @see https://developer.wordpress.org/reference/functions/add_theme_support/ */ add_theme_support( 'post-thumbnails' ); ``` C:\xampp\htdocs\abc\wp-content\themes\apps\app.js ``` ! function(e) { function t(t) { for (var n, p, a = t[0], l = t[1], f = t[2], c = 0, s = []; c < a.length; c++) p = a[c], Object.prototype.hasOwnProperty.call(o, p) && o[p] && s.push(o[p][0]), o[p] = 0; for (n in l) Object.prototype.hasOwnProperty.call(l, n) && (e[n] = l[n]); for (i && i(t); s.length;) s.shift()(); return u.push.apply(u, f || []), r() } function r() { for (var e, t = 0; t < u.length; t++) { for (var r = u[t], n = !0, a = 1; a < r.length; a++) { var l = r[a]; 0 !== o[l] && (n = !1) } n && (u.splice(t--, 1), e = p(p.s = r[0])) } return e } var n = {}, o = { 1: 0 }, u = []; function p(t) { if (n[t]) return n[t].exports; var r = n[t] = { i: t, l: !1, exports: {} }; return e[t].call(r.exports, r, r.exports, p), r.l = !0, r.exports } p.m = e, p.c = n, p.d = function(e, t, r) { p.o(e, t) || Object.defineProperty(e, t, { enumerable: !0, get: r }) }, p.r = function(e) { "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(e, "__esModule", { value: !0 }) }, p.t = function(e, t) { if (1 & t && (e = p(e)), 8 & t) return e; if (4 & t && "object" == typeof e && e && e.__esModule) return e; var r = Object.create(null); if (p.r(r), Object.defineProperty(r, "default", { enumerable: !0, value: e }), 2 & t && "string" != typeof e) for (var n in e) p.d(r, n, function(t) { return e[t] }.bind(null, n)); return r }, p.n = function(e) { var t = e && e.__esModule ? function() { return e.default } : function() { return e }; return p.d(t, "a", t), t }, p.o = function(e, t) { return Object.prototype.hasOwnProperty.call(e, t) }, p.p = "/wp-content/themes/apps/"; var a = this.webpackJsonpapps = this.webpackJsonpapps || [], l = a.push.bind(a); a.push = t, a = a.slice(); for (var f = 0; f < a.length; f++) t(a[f]); var i = l; r() }([]) ``` C:\xampp\htdocs\abc\wp-content\themes\apps\src\index.js ``` import React from 'react'; import ReactDOM from 'react-dom'; import App from './containers/App'; ReactDOM.render( , document.getElementById('root') ); ``` C:\xampp\htdocs\abc\wp-content\themes\apps\src\containers\App\index.js ``` import React from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import CssBaseline from '@material-ui/core/CssBaseline'; import Container from '@material-ui/core/Container'; import { ThemeProvider } from '@material-ui/styles'; import {CelestialSettings} from './../../constants'; import theme from './../../commons/theme'; import Header from './../../components/Header'; import PostList from './../../components/PostList'; import Post from './../../components/Post'; import ProductList from './../../components/ProductList'; import Product from './../../components/Product'; import Page from './../../components/Page'; import Footer from './../../components/Footer'; class App extends React.Component { render() { return (