React WordPress Theme 🎨

A React theme for WordPress, using Decoupled Architecture. Front end in React. Backend in WordPress.

Live Demo

Live Demo

Performance

Maintainer

Name	Github Username
Imran Sayed	@imranhsayed

Usage

1. Clone the WordPress plugin Headless CMS in your WordPress plugin directory and activate it.

2. The REST API endpoints, registers custom endpoints and also registers two menus. So please create two menus Header Menu and Footer Menu and select their respective menu location as HCMS Header Menu and HCMS Footer Menu as shown in the picture.

• Set Header menu as Travel Header Menu

• Set Footer menu as Travel Footer Menu

3. Set the siteURL and other settings in client-config.js.

const config = {
	siteURL: 'xxxxxx', // e.g. 'https://wordpressSite.com' 
	headerMenuLocation: 'hcms-menu-header', // Change this menu location name to another, if you would like a different menu to be used for header. 
	footerMenuLocation: 'hcms-menu-footer', // Change this menu location name to another, if you would like a different menu to be used for footer.
	siteTitle: 'React WordPress Theme', // Will be used if we don't set site title from WordPress customizer.
	siteDescription: 'Awesome theme', // Will be used if we don't set site description from WordPress customizer.
};

More settings can be found in client-config.js

Development

Install

Clone the repo and run

npm install

During development

Starts webpack dev server at localhost:8080

npm run dev

Production

Creates an index.html and JavaScript file in build directory.

npm run prod

Client Config Put your site URL name in the client-config.js; const siteUrl = 'https://yourWordPressSite.com';

Linting & Formatting

The following command will fix most errors and show and remaining ones which cannot be fixed automatically.

npm run eslint:fix

We follow the stylelint configuration used in WordPress Gutenberg, run the following command to lint and fix styles.

npm run stylelint:fix

Format code with prettier

npm run format-js

Run test

npm run test

Update test

npm run test:update

precommit

You should run precommit to check for any eslint, stylint errors/warnings and to ensure all tests are passing before making a PR ready for review.

npm run precommit