The question of the day is: Do I need to learn React in order to build a Gutenberg block?
The short answer is no. You don’t need to know anything about React to build a Gutenberg block. The reason why is because WordPress has done a great job of abstracting away React and the foundational tools that it’s used to create Gutenberg. WordPress has created its own API that you can use in order to create your blocks.
The Real Answer
I remember back when I first started working with WordPress and I would meet other people who were WordPress developers and I would ask them how long they had been working with PHP. More often than not, the response would be “what’s PHP?”. I was astounded that they would call themselves WordPress developers and actually be building things without any knowledge of PHP. Some of those people are what we now call site builders, but many were actually customizing themes. The reality is that they just learned the syntax. They learned what PHP tags were and knew what template tags they could drop into them to customize a pre-existing theme. Now they couldn’t create a theme from scratch, but they could use a starter theme approach.
Thinking about Gutenberg development, do you want to be that Gutenberg developer that doesn’t know React? If you understand the foundational tools, you’ll be able to do a lot more. Without understanding the technology that is underlying Gutenberg and how it works, it is going to limit your ability to create Gutenberg blocks and limit your imagination of what you can do with Gutenberg. This is why I think it’s important to know React.
What is React?
React is basically Facebook’s view library. The way it works is you pass properties down into a view, typically called a component, and the view will be rendered based on those properties. You can also pass event handlers as properties that will allow you to make your views interactive as well. Because of the way that you typically make React components in ES6, you would also use something called JSX. JSX is a syntax that Facebook created for React that looks a lot like HTML. React has some great documentation on JSX, so I’d recommend you take a look at those.
What is Redux?
Another thing you’ll probably want to learn more about is Redux, which is a state management library that is commonly used with React. WordPress uses Redux behind the scenes for its data store. Redux is essentially a state management library. React and Redux work together quite well. When an action takes place in the Gutenberg editor, an event is triggered that goes through Redux and updates the global state for the editor. Any change in this global state will automatically signal to the React view layers that specific properties have changed and any component dependent on those properties will be automatically re-rendered.
What Should I Learn?
My recommendation is to learn ES6, JSX, React and Redux… in that order. This will set you on the path to learning to develop Gutenberg blocks using modern JavaScript.
When you are starting out, I’d recommend checking out Create Guten Block. This will have all the tooling for creating Gutenberg blocks with all of these modern tools. After you get more familiar with how things work, I’d recommend running the “eject” command in Create Guten Block and starting to learn Webpack and more about how the build process is set up.
Resources You Should Check Out
- JavaScript 30 – Build 30 things in 30 days with Vanilla JavaScript
- An Introduction to ES6 – A simple, straightforward walkthrough of ES6 features
- Introducing JSX – React’s own introduction to using JSX
- React Courses at Egghead.io – Free courses on React and Redux
- Create React App – A node CLI tool for scaffolding a new React project
- Create Guten Block – A node CLI tool for scaffolding new Gutenberg blocks