Wordpress Plugin Development with React.js (2021)

How to code a plugin for Wordpress with React.js

4.35 (111 reviews)

Udemy

platform

English

language

Web Development

What you will learn

Wordpress plugin development with React

Develop a Wordpress Plugin

Add React to Wordpress

Create a React component

Create functions inside a React component

Link a template to a React component

Add javascript libraries to a React component

Why take this course?

Wordpress Plugin Development with React

This course aims you to teach you how to code your own plugin on a Wordpress website. We are going to learn together how to start, how to activate our plugin and how to change our content dynamically.

At the end of this course, i'll provide you the entire plugin as files to use.

What is React?

React is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications. It's used for handling the view layer for web and mobile apps. React also allows us to create reusable UI components.

Why React?

React allows developers to create large web applications that can change data, without reloading the page. The main purpose of React is to be fast, scalable, and simple. It works only on user interfaces in the application.

First JavaScript framework on market right now,
Easy to learn,
Important amount of packages to use,
Biggest community of JS frameworks,
Various documentation and help to find,
Most chosen library/framework in JavaScript,
The use of reusable, composable, and stateful components,
The nature of reactive updates...

You understand now why React can be a powerful ally. There are many other reasons to use it but the main one: it's the most common framework asked on job market.

"When React was first introduced, it fundamentally changed how JavaScript frameworks worked." Eric Elliott

So if you are looking for an efficient course to learn how to code your Wordpress plugin with React, you are at the right place.

Content

Introduction

Introduction with Wordpress

Create our first plugin

Display our plugin with shortcode

Import React to Wordpress

Create our template

Create our first React Component

How to design our plugin: Bootstrap, Tailwindcss & Material design

Final component logic & design with React

Thank you very much !

Screenshots

Wordpress Plugin Development with React.js (2021) - Screenshot_01

Wordpress Plugin Development with React.js (2021) - Screenshot_02

Wordpress Plugin Development with React.js (2021) - Screenshot_03

Wordpress Plugin Development with React.js (2021) - Screenshot_04

Reviews

Rex

May 2, 2022

Good and quick introduction. I did notice that you've used wp_enqueue_script outside of the hook it should be in. Your method will fill the logs up with a warning about this. Otherwise, easy to understand and get up and running locally. Thanks! Money well spent.

Anil

January 5, 2022

Explanation in Very simple language yet a very powerful concept. Simplicity of examples is fatantastic

Ondrej

January 4, 2022

I like this course because is short and straight to the point. It doesn't explain fundamental concepts of e.g. ReactJS so be aware of that. It is necessary to understand and follow. Unfortunately, I didn't manage to do the most important part the course teaches - to display a React component. Until now I'm not sure why this is. I was also surprised that that the course doesn't use the more modern concept of functional components. As this is how I've been using React it was a bit hard to follow.

Adam

August 12, 2021

This course is alright... thought it was going to be a little more about the power React has within the wordpress environment. Was expecting something, For example, other a headless wordpress environment good for starters i guess who aren't really familiar with how to build a plugin in wordpress.

Paul

March 4, 2021

Great introduction to React and Wordpress! You should do a more advanced course around using create-react-app, creating a custom Wordpress plugin and using PHP to inject React into the DOM.

James

February 10, 2021

Love this course! Cant' you make a longer, more in depth React/Wordpress plugin one with some like axios where we fetch data from the server and then show on the frontend or send data back to backend etc?

Charts

Price

Rating

Enrollment distribution

Wordpress Plugin Development with React.js (2021) - Distribution chart