ReactJS and WordPress in production

Kurt Farao

Who am I?

http://carbrochure.co.za

Fullstack Javascript

Developer

@kingramsi

Big Javascript

Facebook

1.1mb

Twitter

700kb

Pinterest

1.6mb

Instagram

300kb

FNB

500kb

HBO NOW

800kb

Wordpress Theme Development

Lots of Tools

UI Libraries

• React
   

• Vue
   

• Svelte

React

Public release - May 13"

React

Only the V(view) in MVC

React

One way data flow

React

Express UI with state

React

Reusable UI components

React

Virtual DOM - Fast

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

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

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

React

React

React

React

React

<Calendar />

<CalendarDay />

<CalendarDay />

<CalendarDay />

// Calendar.js

import data from '../data.json'


{ 
    data.map((item, index) => {
       return <CalendarDay data={item} />
    }) 
}

Modern JS Workflow

JS compiler (ES6)

Modern JS Workflow

Package Manager

Modern JS Workflow

Build System

Modern JS Workflow

Local Development Server

Modern JS Workflow

Linter

Modern JS Workflow

Unit tests

Workflow Tools

npm install <packageName>
npm uninstall <packageName>



npm install --save react
npm install --save-dev babel-cli
npm install --save-dev webpack@2.2.0-rc.7

NodeJS Package Manager

<script src="bundle.js"></script>

Bundled

import React from 'react'
import ReactDOM from 'react-dom'
import CalendarDay from './components/CalendarDay'
import data from '../data.json'

const App = React.createClass({
    render: function() { 
        //    
    }
}

ReactDOM.render(<App />, document.getElementById('app'))

index.js

.babelrc file

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

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

webpack.config.js

module.exports = {
	entry: './index.js',
	output: {
		filename: 'bundle.js',
		path: './dist'
	},
        module: {
          loaders: [
            {
                loader: "babel-loader",                
                test: /\.js$/,
                exclude: /node_modules/
                
            }
          ]
       }
}

Webpack CLI

webpack --config webpack.config.js --watch

More Javascript ???

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

ReactJS

ReactJS

Preact

ReactJS

Preact

Preact + Webpack -p

Production

Demo

http://carbrochure.co.za

Kurt Farao

@kingramsi

Mail info@ctfeds.org

Free Digital Subscription