Como construir uma skin para seu aplicativo Web com React e WordPress

Então, você se formou como engenheiro da web e agora deseja criar uma loja on-line incrivelmente rápida para seus clientes. A lista de produtos deve aparecer em um instante, e a pesquisa não deve perder mais do que uma fração de segundo. Isso é coisa de devaneios?

Não mais. Bem, pelo menos não é nada que não possa ser alcançado com a combinação da API REST do WordPress e React, uma biblioteca JavaScript moderna.

Espere o que? API REST do WordPress?

Sim, a API REST do WordPress ajudará você a criar a base de back-end para seu aplicativo da web. Essa é uma boa opção para a tecnologia de back-end do seu aplicativo da Web se você estiver criando uma solução orientada a conteúdo. O WordPress também irá interoperar sem problemas com outras tecnologias; você pode usar o Node.js como o foco do seu aplicativo para se conectar a outros serviços RESTful.

A API REST do WordPress é um divisor de águas para o WordPress, que agora pode ser chamado com segurança de estrutura de aplicativo da Web – não apenas um CMS. Agora que o front-end e o back-end estão completamente desacoplados, o WordPress pode ser usado como back-end de aplicativo móvel ou como back-end para qualquer sistema com foco em conteúdo.

Mas por que WordPress? O motivo: você ficará surpreso com as funcionalidades que surgem fora da caixa com o WordPress. Você obterá um amplo gerenciamento de usuários, gerenciamento de mídia e um conjunto de APIs incrivelmente amigável ao desenvolvedor para estender seu trabalho.

Neste artigo, vou orientá-lo na construção de um tema WordPress SPA (Single Page Application) usando a biblioteca JavaScript chamada React, conectando-se à API WP REST.

Vamos pular para a construção do tema

Este artigo pressupõe que você já esteja familiarizado com as várias APIs existentes do WordPress, particularmente aquelas que impulsionam o desenvolvimento de temas para a estética do seu site e funcionalidades para os plugins do seu site. Também presumo que você tenha configurado sua plataforma de desenvolvimento para WordPress, como a pilha LAMP em um ambiente Linux ou MacOS.

Para simplificar, porém, vou me referir apenas a caminhos absolutos como visíveis com a plataforma XAMPP que é usada com o Windows.

Agora, vamos criar uma instância do WordPress em nosso localhost, nomeando-o 'Celestial'. Esse é o nome do tema do WordPress que usaremos para nos ajudar a definir a direção para a criação de temas futuros prontos para uso com aplicativos da Web desenvolvidos pela API REST do WordPress. Você já deve estar familiarizado com a amada hierarquia de modelos do WordPress, mas com a API REST, você tem a oportunidade de descobrir algo diferente!

Em seguida, precisamos criar uma pasta para o tema dentro da pasta wp-content\themes . Navegue até C:\xampp\htdocs\celestial\wp-content\themes\ (ou equivalente) e crie uma pasta celestial . Adicione estes arquivos dentro da pasta do tema celestial :

1. index.php
   O arquivo catch-all para o tema.
2. style.css
   Este contém informações sobre o tema (e não CSS real).
3. functions.php
   Para escrever a funcionalidade e a importação de arquivos CSS e JS.

Adicione um arquivo de imagem chamado screenshot.jpg se quiser que uma imagem do seu tema apareça dentro do painel.

Nota : O código de cada arquivo tem algumas linhas e pode ser encontrado no GitHub .

Em seguida, faça login no seu painel do WordPress, vá até Aparência → Temas e selecione 'Celestial' como tema. Agora que a base está no lugar, vamos criar o tema.

Começando com React e Webpack para o tema

React é uma biblioteca de interface do usuário muito popular suportada e mantida pelo Facebook. De acordo com os resultados do Developer Survey 2017 do Stack Overflow, “React é o mais amado entre os desenvolvedores”.

Para iniciar o projeto, você precisa inicializar o projeto como um projeto NPM (Node Package Manager). Isso é feito com o comando npm init no terminal (depois de instalar o Node.js e o NPM em seu computador). A inicialização do projeto solicitará determinadas informações de configuração. Após a inicialização bem-sucedida, o NPM criará um arquivo package.json no diretório raiz do tema. Este arquivo incluirá os detalhes do projeto e todas as dependências do projeto.

O React agora está sob licença do MIT, então usaremos a versão 16 do React como a biblioteca JavaScript para este projeto. O React tem alguns recursos interessantes sob o capô, como o Virtual DOM (uma representação do documento dentro da memória) e possui uma série de ferramentas ao seu redor, como o React Router. O React também é usado no Projeto Calypso do WordPress — o painel do WordPress.com.

Agora vamos instalar os pacotes NPM necessários para o projeto:

1. Digite npm install --save react react-dom no terminal e pressione enter para instalar os pacotes.

   

   Como estamos construindo o tema como um Single Page Application (SPA), precisamos da ajuda de uma ferramenta como o Webpack. Estaremos escrevendo código como componentes diferentes, e o Webpack nos ajudará a empacotá-los todos juntos e emiti-los como um único arquivo .js ou .css. Em suma, é um empacotador de módulos.
   
   O Webpack deve primeiro ser instalado globalmente em seu computador. Para fazer isso, novamente podemos utilizar o NPM.
2. Digite o comando npm install -g webpack para obter a versão estável mais recente do Webpack instalada globalmente em seu sistema.
   
   Em seguida, instalaremos os pacotes NPM com suporte ao Webpack em nosso aplicativo.
3. Vá para o arquivo package.json no meu repositório git e copie o resto das dependências de lá para a seção de dependências do seu package.json . Em seguida, execute npm install novamente para instalar todos os pacotes dentro do package.json .

    { "name": "celestial", "version": "1.0.0", "description": "A basic theme using the WordPress REST API and React", "main": "index.js", "dependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "css-loader": "^0.28.7", "extract-text-webpack-plugin": "^3.0.1", "file-loader": "^1.1.5", "image-webpack-loader": "^3.4.2", "node-sass": "^4.5.3", "path": "^0.12.7", "react": "^16.0.0", "react-dom": "^16.0.0", "react-router-dom": "^4.2.2", "sass-loader": "^6.0.6", "style-loader": "^0.19.0", "url-loader": "^0.6.2", "webpack": "^3.6.0" }, "devDependencies": {}, "scripts": { "build": "webpack", "watch": "webpack --watch" }, "keywords": [ "blog", "decoupled", "react", "rest-api" ], "author": "Muhammad Muhsin", "license": "GPL-3.0" }

   
   A lista acima é de todos os pacotes necessários no arquivo package.json para este projeto.
4. Copie as configurações do GitHub e cole-as no arquivo webpack.config.js da pasta do seu tema.

    var ExtractTextPlugin = require("extract-text-webpack-plugin"); var path = require('path'); module.exports = { entry: { app: './src/index.jsx' }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].js' }, module: { rules: [ { test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader','sass-loader'], publicPath: 'dist' }) }, { test: /\.jsx?$/, exclude: /node_modules/, use: 'babel-loader' }, { test: /\.(jpe?g|png|gif|svg)$/i, use: [ 'file-loader?name=[name].[ext]&outputPath=images/&publicPath=https://localhost/celestial/wp-content/themes/celestial/dist/images', 'image-webpack-loader' ] }, { test: /\.(woff2?|svg)$/, loader: 'url-loader?limit=10000&name=fonts/[name].[ext]' }, { test: /\.(ttf|eot)$/, loader: 'file-loader?name=fonts/[name].[ext]' } ] }, resolve: { extensions: ['.js', '.jsx'] }, plugins: [ new ExtractTextPlugin({ filename: "style.css", allChunks: true }) ] }

   
   Importante : Observe que module.exports → module → rules[3] → use → publicPath pode mudar de acordo com a localização das imagens dist do seu projeto no localhost. Se estiver errado, as imagens podem não ser exibidas corretamente no aplicativo da web.
5. Depois, esses comandos podem ser usados ​​para compilar o projeto:
   • webpack ou npm run build para compilar o projeto, ou
   • webpack --watch ou npm run watch para compilar o projeto e observar as alterações.

Nota : Para entender melhor o Webpack, leia este artigo de Joseph Zimmerman na Smashing Magazine .

Estendendo a API REST do WordPress

A API REST do WordPress vem com muitos endpoints diferentes para buscar postagens, páginas, mídia e assim por diante. No entanto, eles nem sempre têm todos os detalhes em sua resposta. Por exemplo, o método posts não fornece o URL da imagem em destaque ou o nome do autor. Portanto, temos que fazer chamadas separadas para cada um desses elementos.

Mas e se você quiser que seus próprios dados apareçam na resposta das postagens? É aí que entra a mágica de estender a API REST. O código a seguir adicionará duas variáveis ​​adicionais na resposta à solicitação de postagens , a saber, author_name e featured_image_src . O código está dentro do arquivo functions.php :

 // 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'); }

Uma variável JavaScript global

Existem certas constantes do WordPress (ou conhecidas como 'variáveis') que usaremos em todo o aplicativo React. Serão informações sobre as várias rotas do aplicativo (e posteriormente serão específicas do WooCommerce).

Esta variável é definida dentro do arquivo functions.php . Ele será chamado de 'CelestialSettings' e será anexado a celestial-scripts , o identificador para o arquivo app.js enfileirado :

 wp_enqueue_script( 'celestial-script', get_stylesheet_directory_uri() . '/dist/app.js' , array(), '1.0', true ); $url = trailingslashit( home_url() ); $path = trailingslashit( parse_url( $url, PHP_URL_PATH ) ); wp_scripts()->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/' ), 'consumer_key' => 'ck_803bcdcaa73d3a406a0f107041b07ef6217e05b9', 'consumer_secret' => 'cs_c50ba3a77cc88c3bf46ebac49bbc96de3a543f03' ), ) ) ) );

O código acima mostra um exemplo de como obter variáveis ​​do WordPress (PHP) para o front-end, uma técnica importante e muito útil ao construir um tema desacoplado. Essa variável de objeto contém o título do site, o caminho, a URL para a API e a raiz e três variáveis ​​relacionadas ao WooCommerce (explicadas posteriormente).

Reagir e JSX

O React é diferente do resto das principais bibliotecas JavaScript. O que quero dizer com isso é que geralmente escrevemos JavaScript dentro de nosso HTML. No entanto, quando se trata de React, escrevemos HTML dentro de nosso código JavaScript. Para ser mais preciso, escrevemos JSX dentro de JS. JSX é muito semelhante ao HTML, mas tem algumas diferenças. O atributo class é escrito como className , por exemplo. Isso é então convertido em JavaScript simples por meio de Webpack e Babel e salvo em app.js .

Existem, no entanto, algumas restrições ao escrever JSX. Por exemplo, podemos ter apenas um filho dentro do nosso método render() , que servirá como elemento raiz para um Componente. No entanto, a vantagem é que é mais fácil de depurar. Podemos saber exatamente onde cometemos um erro, enquanto no HTML normal nosso erro geralmente não será mostrado explicitamente. Estaremos escrevendo JSX para este projeto e, portanto, os arquivos JavaScript terão uma extensão de .jsx . No entanto, também pode ser .js , se preferir.

Crie os seguintes arquivos dentro da pasta src :

1. index.jsx (o arquivo principal e aquele que contém as configurações do React Router)
2. header.jsx (o componente de cabeçalho)
3. footer.jsx (o componente de rodapé)
4. posts.jsx (para o arquivo de posts)
5. post-list.jsx (componente para uma postagem individual dentro de posts.jsx )
6. post.jsx (para uma única postagem)
7. products.jsx (contém todos os produtos do WooCommerce)
8. product.jsx (exibe um único produto do WooCommerce)
9. style.scss (para conter todo o código CSS no formato SASS)

ReactDOM.render()

O arquivo index.jsx é a raiz do projeto. O que quero dizer com isso é que o index.jsx contém o componente App que é renderizado para o DOM.

 import { render } from 'react-dom'; // importing render from ReactDOM const App = () => ( // defining the routes <div> <Header /> <div> <Switch> <Route exact path={CelestialSettings.path} component={Posts} /> // the root path </Switch> </div> <Footer /> </div> ); // React Router const routes = ( <Router> <Route path="/" component={App} /> </Router> ); render( // rendering to the DOM by replacing #page with the root React component (routes), document.getElementById('page') // rendering the route );

Os outros componentes são especificados no React Router e serão carregados ao visitar as diferentes rotas.

É assim que escrevemos componentes modulares onde todos os diferentes componentes terminam em index.jsx .

Componentes com estado vs. sem estado

Você teria notado componentes sendo escritos de uma das duas maneiras a seguir:

1. const App = () => (
2. class Post extends React.Component {

A primeira maneira é como escrevemos Componentes Stateless e a segunda é um exemplo de Componentes Stateful. Sem estado significa que o componente não tem 'estado' nele. 'state' é essencialmente uma variável que possui informações dentro do componente, e toda vez que a variável muda, o componente é renderizado novamente. Componentes com estado também são conhecidos como 'Componentes Inteligentes'. As variáveis ​​de estado são, portanto, usadas para comunicação interna dentro desse componente.

O segundo tipo, Componentes sem estado, não têm a variável de estado neles e às vezes são chamados de 'Componentes burros'. No entanto, como Componentes Stateful, eles têm 'props', que são propriedades passadas para eles de seus componentes pai.

Os componentes com estado têm os métodos de ciclo de vida React, enquanto os sem estado têm apenas o método render() , que é o método padrão para ele.

Métodos de ciclo de vida do React

Esses são métodos chamados em diferentes estágios do ciclo de vida do componente, que podemos substituir para executar nosso próprio código nessas instâncias. Estamos utilizando os seguintes métodos em nosso aplicativo:

• constructor()
  Chamado antes de um componente ser montado.
• componentDidMount()
  Chamado imediatamente após a montagem de um componente.
• render()
  O método que é chamado para renderizar o conteúdo JSX (HTML).
• componentDidUpdate()
  Chamado quando o componente é atualizado.
• componentWillUnmount()
  Invocado quando um componente deve ser removido.

Observação : para saber mais sobre os componentes e seu ciclo de vida, leia a documentação aqui .

Promessas de JavaScript

Vamos usar JavaScript Promises para obter dados da nossa API REST do WordPress. Primeiro, temos a URL para a API REST em nosso functions.php , onde a anexamos como uma variável JavaScript que podemos acessar a partir do front-end.

Usaremos o método fetch API do JavaScript para obter dados dos diferentes endpoints. Estamos adicionando um carregador para mostrar ao usuário enquanto o conteúdo está sendo buscado:

 getMorePosts() { var that = this; var totalPages; // adding a loader jQuery("#loader").addClass("active"); this.setState({ page: this.state.page + 1 }); fetch(CelestialSettings.URL.api + "/posts/?page=" + this.state.page) .then(function (response) { for (var pair of response.headers.entries()) { // getting the total number of pages if (pair[0] == 'x-wp-totalpages') { totalPages = pair[1]; } if (that.state.page >= totalPages) { that.setState({ getPosts: false }) } } if (!response.ok) { throw Error(response.statusText); } return response.json(); }) .then(function (results) { var allPosts = that.state.posts.slice(); results.forEach(function (single) { allPosts.push(single); }) that.setState({ posts: allPosts }); // removing the loader jQuery("#loader").removeClass("active"); }).catch(function (error) { console.log('There has been a problem with your fetch operation: ' + error.message); jQuery("#loader").remove(); }); }

Usando o roteador React

React Router é a biblioteca que irá lidar com o roteamento do lado do cliente para nossa aplicação. O roteamento do lado do servidor é possível com o WordPress, mas para obter uma experiência verdadeiramente SPA, precisamos da ajuda do React Router.

Desde a versão 4, o React Router foi dividido em três pacotes: react-router , react-router-dom e react-router-native . Estaremos usando react-router-dom para este projeto, já que é o usado em aplicações web.

Como react-router-dom já está instalado, podemos escrever a configuração do roteador dentro do arquivo index.jsx . O código será o seguinte:

 const App = () => ( <div> <Header /> <div> <Switch> <Route exact path={CelestialSettings.path} component={Posts} /> <Route exact path={CelestialSettings.path + 'posts/:slug'} component={Post} /> <Route exact path={CelestialSettings.path + 'products'} component={Products} /> <Route exact path={CelestialSettings.path + 'products/:product'} component={Product} /> <Route path="*" component={NotFound} /> </Switch> </div> <Footer /> </div> ); // Routes const routes = ( <Router> <Route path="/" component={App} /> </Router> ); render( (routes), document.getElementById('page') );

O código acima cuidará de todo o roteamento, tratado no lado do cliente. O * na última linha diz que qualquer outra rota não mencionada acima levará o usuário à página '404 Not Found'.

A tag <Link to=""> é usada em vez da tag <a href=””> para vincular diferentes páginas usando o React Router:

 <div className="navbar-nav"> <Link className="nav-item nav-link active" to={CelestialSettings.path} >Home <span className="sr-only">(current)</span></Link> <Link className="nav-item nav-link" to={CelestialSettings.path + "products/"} >Products</Link> </div>

Obtendo dados de teste

Agora que você criou o tema, é hora de adicionar alguns dados. Uma maneira de adicionar dados é criar nosso próprio conteúdo. No entanto, existe uma maneira mais fácil (e melhor) de adicionar dados ao nosso site WordPress. Este método importa dados de espaço reservado de uma fonte externa:

• Vá para https://codex.wordpress.org/Theme_Unit_Test e baixe os dados de teste de unidade do tema
• Vá para Ferramentas > Importar > WordPress para instalar o importador do WordPress.
• Após a instalação do importador do WordPress, clique em Executar Importador.
• Clique em 'Escolher arquivo' no importador
• Selecione o arquivo baixado e importe os dados de teste de unidade de tema do WordPress

Agora você precisa selecionar o arquivo theme-unit-test-data.xml e todo o conteúdo do espaço reservado está agora em seu site.

Integração WooCommerce

Agora, estamos prontos para alimentar nossa loja usando React. Para isso, utilizaremos os arquivos products.jsx e product.jsx , cujo código é semelhante aos posts.jsx e p ost.jsx respectivamente.

Adicionaremos mais três variáveis ​​a CelestialSettings em 'woo' (consulte A Global JavaScript Variable):

1. URL
2. consumer_key
3. consumer_secret

A chave do consumidor e o segredo do consumidor devem ser gerados em Dashboard → WooCommerce → Configurações → API → Keys/Apps .

Para o URL do woo, você deve adicioná-lo manualmente (já que o WooCommerce permite a transferência apenas por SSL, adicione o URL com https, ou seja, https://localhost/celestial/wp-json/wc/v2/ ).

Copie a chave do consumidor e o segredo do consumidor e cole-os nos locais apropriados dentro de functions.php . Isso servirá como autenticação para acessar o WooCommerce por meio de uma chamada de API.

Visite a documentação da API REST do WooCommerce para obter mais informações sobre sua API. O arquivo products.jsx contém o código para preencher a loja com produtos. Os produtos podem ser adicionados por um administrador a partir do painel. Basta ir ao Painel → Produtos → Adicionar Novo e inserir os detalhes do produto.

Ao clicar em um determinado produto, você será direcionado para a página product.jsx :

O código da página acima é semelhante ao post.jsx :

 renderProduct() { return ( <div className="card"> <div className="card-body"> <div className="col-sm-4"><img className="product-image" src={this.state.product.images ? this.state.product.images[0].src : null} alt={this.state.product.images ? this.state.product.images[0].alt : null } /></div> <div className="col-sm-8"> <h4 className="card-title">{this.state.product.name}</h4> <p className="card-text"><strike>${this.state.product.regular_price}</strike> <u>${this.state.product.sale_price}</u></p> <p className="card-text"><small className="text-muted">{this.state.product.stock_quantity} in stock</small></p> <p className="card-text">{jQuery(this.state.product.description).text()}</p> </div> </div> </div> ); }

Links permanentes

Para que o tema funcione corretamente, temos que definir os seguintes permalinks em Dashboard → Settings → Permalinks :

1. Em Configurações comuns → Estrutura personalizada : https://localhost/celestial/posts/%postname%/

2. Em Permalinks de produtos → Base personalizada : /products/

Se você não definir os links permanentes como acima, o tema pode não funcionar como desejado.

Uma correção do WooCommerce

Quando você navega para localhost/celestial/products , é provável que você receba um espaço em branco onde os produtos devem ser carregados. Isso acontece porque o WooCommerce precisa de solicitações autenticadas, enquanto nosso localhost não é https. Para corrigir o problema:

1. Visite https://localhost/celestial/wp-json/wc/v2/products. Isso nos dará um aviso:

1. Clique em ADVANCED > Proceed to localhost (unsafe) .
2. Agora, se você voltar para a página de produtos, os itens serão exibidos corretamente.

Observação : se você estiver usando o Valet em um Mac, precisará executar o Valet Secure em seu site para proteger o site local com um certificado TLS. Esta é outra maneira de corrigir o problema.

O que é ScrollMagic?

ScrollMagic é uma biblioteca que nos permite realizar certas ações ao rolar pela página. Para usar ScrollMagic vamos enfileirar a biblioteca JavaScript ScrollMagic em functions.php . Estamos usando ScrollMagic para duas instâncias neste projeto:

1. Para carregar lentamente as postagens no componente posts.jsx :

    componentDidMount() { var that = this; window.onbeforeunload = function () { window.scrollTo(0, 0); } // init ScrollMagic Controller that.state.controller = new ScrollMagic.Controller(); // build scene var scene = new ScrollMagic.Scene({ triggerElement: "#colophon", triggerHook: "onEnter" }) .addTo(that.state.controller) .on("enter", function (e) { if (that.state.getPosts && that.getMorePosts !== null) { that.getMorePosts(); } }); }

   
   Posts de carregamento lento no componente posts.jsx
2. Para mostrar uma animação de fade-in para postagens que aparecem rolando pelas postagens e produtos nos componentes posts.jsx e products.jsx , respectivamente:

    componentDidUpdate() { var FadeInController = new ScrollMagic.Controller(); jQuery('.posts-container .col-md-4.card-outer').each(function () { // build a scene var FadeInScene = new ScrollMagic.Scene({ triggerElement: this.children[0], reverse: false, triggerHook: 1 }) .setClassToggle(this, 'fade-in') .addTo(FadeInController); }); }

   
   Aplicando uma animação de fade-in para postagens que aparecem à medida que a rolagem ocorre

Agora estamos prontos para visualizar nosso tema a partir do front-end. Navegue até localhost/celestial em seu navegador e veja seu tema em ação.

E dê um tapinha nas costas, porque agora você criou o tema com sucesso!

Outros temas WordPress com bibliotecas JavaScript

Se você achou isso útil, você pode dar uma olhada em outros temas WordPress desacoplados incríveis criados usando bibliotecas/frameworks JavaScript modernos:

• Foxhound: O primeiro tema desacoplado a chegar ao repositório de temas do WordPress. Escrito por Kelly Dwan, este tema usa React, Redux e React Router.
• Anadama React: Outro tema do mesmo autor, mas usando Flux em vez de Redux e Page em vez de React Router.
• Wallace: Escrito por Kirby, este tema usa Angular com a API REST do WordPress.
• Picard: Escrito pela própria Automattic para mostrar a capacidade da API REST do WordPress.
• React Verse: Um tema React e Redux que escrevi baseado no Foxhound.

Próximos passos

As seções principais que eu queria mostrar agora estão prontas. Você pode continuar com a construção do projeto para obter mais conhecimento. Estas são algumas recomendações que você pode seguir:

1. Uma loja completa com o plugin WooCommerce, incluindo checkout e carrinho de compras;
2. Uma página para cada arquivo, tag, taxonomia e assim por diante;
3. Gerenciamento de estado com Redux ou Flux.
   

Boa sorte e boa codificação!