ReactJS and WordPress in production
Kurt Farao
Who am I?
http://carbrochure.co.za
Fullstack Javascript
Developer
@kingramsi
Big Javascript
1.1mb
700kb
1.6mb
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
React & Wordpress in Production
By Kurt Farao
React & Wordpress in Production
Tech talk for the Front-end meetup group.
- 419