ReactJS and WordPress in production

Kurt Farao

Who am I?

Fullstack Javascript Developer

Front-end Tools

Headless WordPress + React

Backend API

Front-end

Hybrid WordPress + React

Backend API

React

Component

class HelloMessage extends React.Component {
  render() {
    return <div>Hello World</div>;
  }
}

var mountNode = document.getElementById('reactCode');

ReactDOM.render(<HelloMessage />, mountNode);

Mount ReactJS Component

ReactJS Tooling

.babelrc file

{ "presets": ["react","es2015"] }

npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react

Another JS Library ???

{
  "resolve": {
    "alias": {
      "react": "preact-compat",
      "react-dom": "preact-compat"
    }
  }
}

Production JS

Production

86.3kb

+

Create React App

https://github.com/facebookincubator/create-react-app

Get Started Immediately!

Demo