Ahmedabad WordPress Meetup

Combining ReactJS & WordPress

Faisal Alvi

Objective:

Overview

  • Why to learn React?
  • What is React?
  • Components
  • Important React Terms. #JSX #Babel #Webpack
  • Print “Hello World” in WordPress Backend using REACT
  • What else can we do by combining?
  • Pros
  • Cons
  • Resources

Ahmedabad WordPress Meetup

Why should I learn REACT?

YOU

Latest Technologies

YOU

Latest Technologies

Ahmedabad WordPress Meetup

Is this a WordPress Meetup?

Answer:

Ahmedabad WordPress Meetup

React

Ahmedabad WordPress Meetup

IT'S A LANGUAGE

A most popular JavaScript LIBRARY

User Interface (UI) Library

A Tool - for building very fast UI components

CREATED BY:

Components

A Piece of User Interface

REUSABLE

1 ROOT COMPONENT

Ahmedabad WordPress Meetup

Ahmedabad WordPress Meetup

FILE

ReactDOM

RENDER

Ahmedabad WordPress Meetup

Let’s Combine

Objective of Practical - Print “Hello World” with React in WP Backend

Ahmedabad WordPress Meetup

But first… Know Important Terms

var element = <h1>Hello World!</h1>

(without quotes)

Translates markup or programming languages into JavaScript.

Ahmedabad WordPress Meetup

JSX

EXAMPLE const element = <h1>Hello World!</h1>

JavaScript

XML

COMBINATION

Ahmedabad WordPress Meetup

.bablerc

JSX

Compiler / Translator

Plain JavaScript

Translates markup or programming languages into JavaScript.

Ahmedabad WordPress Meetup

A popular Module Bundler

webpack.config.js

Bundle (wrap) JavaScript files

For usage in a browsers

Ahmedabad WordPress Meetup

Step 1: Install Node in System

Ahmedabad WordPress Meetup

Step 2: Create a Setting Page

Ahmedabad WordPress Meetup

Step 3: Create Required Files

3 Required Files

.bablerc

package.json

webpack.config.js

1

2

3

Ahmedabad WordPress Meetup

Step 4: Create Components

JSX

ES5

Ahmedabad WordPress Meetup

Step 5: Execute Commands

~ npm install

~ npm run dev

Included in Slide #29

Objective Accomplished - Print “Hello World” with React in WP Backend

Ahmedabad WordPress Meetup

Steps’ Summary

Step 1: Install Node in System

Step 2: Create a setting page in WordPress Backend having <div id="root"></div>.


Step 3: Create required files: package.json | webpack.config.json | .babelrc

Step 4: Create Components: index.jsx | helloworld.jsx

Step 5: Execute Commands: npm install | npm run dev

Step 6: KHO!

Ahmedabad WordPress Meetup

What else can we do?

HEADLESS !!

Ahmedabad WordPress Meetup

Pros

Ahmedabad WordPress Meetup

Ahmedabad WordPress Meetup

Ahmedabad WordPress Meetup

Ahmedabad WordPress Meetup

Ahmedabad WordPress Meetup

Cons

For large projects, Build tools are necessary.

ex:

Still Developing...

Ahmedabad WordPress Meetup

Which makes us… Keep Learning!

Ahmedabad WordPress Meetup

Today’s Session Demo at GitHub

Boilerplate

Like videos? Go for: Learn React by Mosh

Userful Articles

https://www.cipherbright.com/blog/react-for-beginners/

https://wp-and-react.com/

https://snipcart.com/blog/reactjs-wordpress-rest-api-example/

React official documentation by React Beginners guide to React by Kent C. Dodds
Fundamentals of React by Samer Buna

Resources

Ahmedabad WordPress Meetup

Thank you… Questions..?

/_the_faisal

/cipherbright_

/faisal-alvi

/alvifaisal

.com

/faisalalvicoder

Combining ReactJS & WordPress | Public - Google Slides