├── .gitignore
├── README.md
├── build
    ├── index.asset.php
    ├── index.js
    └── index.js.map
├── functions.php
├── images
    └── graphiql.png
├── package-lock.json
├── package.json
├── page-react.php
├── src
    ├── components
    │   ├── post-w-votes
    │   │   └── index.js
    │   ├── posts
    │   │   └── index.js
    │   └── votes
    │   │   └── index.js
    └── index.js
├── style.css
└── webpack.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | composer.lock
2 | /node_modules/
3 | /vendor/
4 | /logs/
5 | /reports/
6 | 
7 | .DS_Store
8 | .DS_Store?


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Twenty Twenty React Theme
2 | A Twenty Twenty Child WordPress Theme demonstrating how to load React on the front end of a theme.
3 | 


--------------------------------------------------------------------------------
/build/index.asset.php:
--------------------------------------------------------------------------------
1 | <?php return array('dependencies' => array('wp-element', 'wp-polyfill'), 'version' => '62323e39c466b33087b243150f38640b');


--------------------------------------------------------------------------------
/functions.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
 3 | function my_theme_enqueue_styles() {
 4 |  
 5 |     $parent_style = 'twentytwenty-style'; 
 6 |     
 7 |     wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
 8 |     
 9 |     wp_enqueue_style( 'child-style',
10 |         get_stylesheet_directory_uri() . '/style.css',
11 |         array( $parent_style ),
12 |         time() //wp_get_theme()->get('Version')
13 |     );
14 | 
15 | 	wp_enqueue_script(
16 |         'my-theme-frontend',
17 |         get_stylesheet_directory_uri() . '/build/index.js',
18 |         ['wp-element', 'wp-components'],
19 |         time(), //For production use wp_get_theme()->get('Version')        
20 |         true
21 |       );
22 |   
23 | }
24 | 
25 | // Add Votes to Custom Meta Fields
26 | add_action( 'graphql_register_types', function() {
27 |     register_graphql_field( 'Post', 'votes', [
28 |        'type' => 'Number',
29 |        'description' => __( 'The number of votes', 'wp-graphql' ),
30 |        'resolve' => function( $post ) {
31 |          $votes = get_post_meta( $post->ID, 'votes', true );
32 |          return ! empty( $votes ) ? $votes : 0;
33 |        }
34 |     ] );
35 |   } );


--------------------------------------------------------------------------------
/images/graphiql.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zgordon/twentytwenty-react/b99a7fee5a475f940de4d049cb327cdee75e1ac2/images/graphiql.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "twentytwenty-react",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "devDependencies": {
 7 |     "@wordpress/scripts": "^5.1.0"
 8 |   },
 9 |   "scripts": {
10 |     "build": "wp-scripts build",
11 |     "check-engines": "wp-scripts check-engines",
12 |     "check-licenses": "wp-scripts check-licenses",
13 |     "lint:css": "wp-scripts lint-style",
14 |     "lint:js": "wp-scripts lint-js",
15 |     "lint:pkg-json": "wp-scripts lint-pkg-json",
16 |     "start": "wp-scripts start",
17 |     "test:e2e": "wp-scripts test-e2e",
18 |     "test:unit": "wp-scripts test-unit-js"
19 |   },
20 |   "author": "",
21 |   "license": "ISC",
22 |   "dependencies": {
23 |     "@apollo/react-hooks": "^3.1.3",
24 |     "apollo-boost": "^0.4.4",
25 |     "graphql": "^14.5.8"
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/page-react.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | /**
 3 |  * Template Name: React Template
 4 |  */
 5 | get_header();
 6 | ?>
 7 | 
 8 | <main id="site-content" role="main">
 9 | 	<article class="post-2 page type-page status-publish hentry">
10 | 		<?php get_template_part( 'template-parts/entry-header' ); ?>
11 | 		<div class="post-inner thin">
12 | 			<div class="entry-content">				
13 | 
14 | 				<div id="react-app"></div><!-- #react-app -->
15 | 
16 | 			</div><!-- .entry-content -->
17 | 		</div><!-- .post-inner -->
18 | 	</article><!-- .post -->
19 | </main><!-- #site-content -->
20 | 
21 | <?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>
22 | <?php get_footer(); ?>


--------------------------------------------------------------------------------
/src/components/post-w-votes/index.js:
--------------------------------------------------------------------------------
 1 | const { useState } = wp.element;
 2 | 
 3 | import { useQuery } from "@apollo/react-hooks";
 4 | import { gql } from "apollo-boost";
 5 | 
 6 | const POSTS_QUERY = gql`
 7 |   {
 8 |     posts {
 9 |       nodes {
10 |         id
11 |         title(format: RENDERED)
12 |         votes
13 |       }
14 |     }
15 |   }
16 | `;
17 | 
18 | const Posts = () => {
19 |   const { loading, error, data } = useQuery(POSTS_QUERY);
20 |   const posts = data.posts.nodes;
21 | 
22 |   if (loading) return <p>Loading posts...</p>;
23 |   if (error) return <p>Error :(</p>;
24 | 
25 |   // const [posts, setPosts] = useState([]);
26 | 
27 |   // const posts = [...data.posts.nodes];
28 | 
29 |   // const sortedPosts = data.posts.nodes
30 |   //   .sort((a, b) => a.votes < b.votes)
31 |   //   .map(({ id, title, votes }) => (
32 |   //     <li key={id}>
33 |   //       <button>&#8679;</button>
34 |   //       {votes}
35 |   //       <button>&#8681;</button>
36 |   //       <h3>{title}</h3>
37 |   //     </li>
38 |   //   ));
39 |   // return <ul>{sortedPosts}</ul>;
40 | 
41 |   return posts.map(({ postId, title }) => <h3 key={postId}>{title}</h3>);
42 |   // return <ul>{sortedPosts}</ul>;
43 | };
44 | 
45 | export default Posts;
46 | 


--------------------------------------------------------------------------------
/src/components/posts/index.js:
--------------------------------------------------------------------------------
 1 | import { useQuery } from "@apollo/react-hooks";
 2 | import { gql } from "apollo-boost";
 3 | 
 4 | const POSTS_QUERY = gql`
 5 |   {
 6 |     posts {
 7 |       nodes {
 8 |         id
 9 |         title(format: RENDERED)
10 |         votes
11 |       }
12 |     }
13 |   }
14 | `;
15 | 
16 | const Posts = () => {
17 |   const { loading, error, data } = useQuery(POSTS_QUERY);
18 |   const posts = data.posts.nodes;
19 | 
20 |   if (loading) return <p>Loading posts...</p>;
21 |   if (error) return <p>Error :(</p>;
22 | 
23 |   return posts.map(({ postId, title }) => <h3 key={postId}>{title}</h3>);
24 | };
25 | 
26 | export default Posts;
27 | 


--------------------------------------------------------------------------------
/src/components/votes/index.js:
--------------------------------------------------------------------------------
 1 | const { useState } = wp.element;
 2 | 
 3 | import Posts from "./components/posts";
 4 | 
 5 | const Votes = () => {
 6 |   const [votes, setVotes] = useState(0);
 7 |   const addVote = () => {
 8 |     setVotes(votes + 1);
 9 |   };
10 |   return (
11 |     <div>
12 |       <Posts />
13 |       <h2>{votes} Votes</h2>
14 |       <p>
15 |         <button onClick={addVote}>Vote!</button>
16 |       </p>
17 |     </div>
18 |   );
19 | };
20 | 
21 | export default Posts;
22 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | const { render } = wp.element;
 2 | import ApolloClient from "apollo-boost";
 3 | import { ApolloProvider } from "@apollo/react-hooks";
 4 | 
 5 | // import Votes from "./components/votes";
 6 | import Posts from "./components/posts";
 7 | 
 8 | const client = new ApolloClient({
 9 |   uri: "http://react-dev.local/graphql"
10 | });
11 | 
12 | const App = () => {
13 |   return (
14 |     <ApolloProvider client={client}>
15 |       <div>
16 |         <p>My First Apollo Theme!</p>
17 |         <Posts />
18 |         {/* <Votes /> */}
19 |       </div>
20 |     </ApolloProvider>
21 |   );
22 | };
23 | render(<App />, document.getElementById(`react-app`));
24 | 


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | /*
 2 |  Theme Name:   Twenty Twenty Child
 3 |  Description:  Twenty Twenty Child Theme
 4 |  Author:       Zac Gordon
 5 |  Author URI:   https://javascriptforwp.com/
 6 |  Template:     twentytwenty
 7 |  Version:      0.9.0
 8 |  License:      GNU General Public License v2 or later
 9 |  License URI:  http://www.gnu.org/licenses/gpl-2.0.html
10 |  Text Domain:  twentytwentychild
11 | */


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const defaultConfig = require("@wordpress/scripts/config/webpack.config");
 2 | 
 3 | module.exports = {
 4 |   ...defaultConfig,
 5 |   externals: {
 6 |     react: "React",
 7 |     "react-dom": "ReactDOM"
 8 |   }
 9 | };
10 | 


--------------------------------------------------------------------------------