Super simple react WordPress plugin

Everything to get a basic React app displaying within any WordPress page using a shortcode. Screenshot below.

Getting started:

1. Install WordPress locally (I suggest using valet to easily create a local wordpress-plugin.test domain)
2. cd /path/to/wordpress/wp-content/plugins/
3. git clone [email protected]:dtbaker/react-wordpress-plugin.git
4. cd /path/to/wordpress/wp-content/plugins/react-wordpress-plugin/
5. yarn development
6. Login to wordpress-plugin.test/wp-admin/
7. Go to Plugins and activate the Sample Plugin
8. Go to Pages > Create New and make a new page containing the content [display_react_app_here]. This WordPress shortcode will render the react code and mount it to this location.

Linting

1. yarn eslint ( or yarn eslint --fix)
2. yarn sass-lint

Deploy

1. yarn production

Output:

It should look like this after you add the shortcode to a page:

render() {
  const { meow } = this.state
  return (
    <div className={styles.wrap}>
      <div>Hey I am react! Current state is: {meow}</div>
      <div>
        <button
          type="button"
          onClick={() => {
            this.setState({ meow: meow === "foo" ? "bar" : "foo" })
          }}>
          Change State
        </button>
      </div>
    </div>
  )
}

Todo:

1. lots. but this works fine.