In my last post for Torque, I wrote about how WordPress with the new Gutenberg editor uses React. I also gave my opinion on if WordPress developers need to learn React. While you do not need to know React to create Gutenberg blocks, I laid out a few reasons why it might make sense for you to do so.
If those reasons made sense for you, good news, this is a post to get you started with React and its starting a new series of posts about using React for Gutenberg development.
Before We Get Started
In the first few parts of this series, I’m going to stick to browser-safe JavaScript. But I’m not going to worry too much about it. I can’t promise IE8, but this code will work in a modern browser.
Yes, you should worry about cross-browser compatibility. That’s something that React and your build tools can help out with a lot. Once you learn the basics in these first few posts, you’ll be able to solve a lot of those concerns with a lot less worry about what capabilities Safari version whatever has.
But for now, let’s ignore that and keep things simple. We’re at Hello World, not production-ready web apps.
React/ ReactDOM Hello World
For now, we’re going to stick with just React, and work in a CodePen. After we’ve gone over a few basics of React, I’m going to show you how to use this same code in a Gutenberg block. I have links to each CodePen. You can look at each one, or you can start with the Hello World and build each step I lay out.
By the way, all of these CodePens are based on the first CodePen in the React documentation. The React documentation is VERY good and full of CodePens you can play with. Strongly recommended. My goal is to apply this to WordPress concepts as quickly as possible, but I’m showing similar concepts, I recommend you read both my posts and walk through the React interactive, introduction to React tutorial on the React site.
Most Basic Hello World
React is a super-fancy way to render content to a screen. When that screen is created with an HTML document, for example if its a website loaded in a browser, we use ReactDOM to render React to the screen. Here is a super basic example of how that works:
React.DOM.render() takes two arguments. The first is the HTML or React components to render. The second is the DOM node to render it on. This code replaces the content of the element with the ID of “root” with a React application. It’s a basic app, just one string, but its an app we can build on.
ReactDOM is separate from React. You should never need to know more about ReactDOM than what I just showed you. If you never need to go beyond that level of complexity, React can manage all interactions with the browser for you. Also, you can use the same components with React Native, which is like ReactDOM, but for mobile apps, which do not use HTML. Also, when working with Gutenberg blocks, you will most likely never need it, WordPress handles that.
Later in this series when I cover testing, I’ll show how to render your components in a fake DOM. This makes writing tests that cover how your interface is displayed fairly simple.
Saying Hello With React.createElement
In the previous example, we just passed a string, as the content to be rendered. Let’s start letting React construct our HTML for us so we can have properly structured HTML and enjoy the performance and compatibility benefits of using React.
React has two basic ways to create HTML. Let’s look at the first that’s using the function React.createElement to create HTML elements. Here is our Hello World example, rewritten using React.createElement.
This function accepts three arguments. The first is the type of element. I passed “h2” to tell React to render the content inside of a heading level two HTML element. The second argument is an object of HTML attributes. Skip that for now. The next argument is the content. I passed a string, but I could have passed an array of children.
For example, to create an order list, we would pass an array of li elements to a ul element. Like this:
HTML Attributes
All of the previous examples passed as an empty object as the second argument to createElement. That object contains HTML attributes for the element. Let’s add a class and id attribute to our list:
The id attribute is set by adding a key to the object of “id”. The class attribute is set by adding a key to the object of “className”. React follows HTML when it can. In JavaScript “class” is a reserved keyword that refers to ES6 classes not the HTML attribute “class” so React works around this.
Attributes are also used for binding event handlers. In HTML we can pass an onClick attribute to any element. That’s exactly how React works too. For example, let’s look at a button:
In this case, we’ve added an attribute “onClick”. This function is passed an event object. I prevented the default action and then triggered an alert.
What Does React.createElement Do?
This function creates an object that is like an HTML element. But it’s infused with React magic. Whenever the data that you pass into this object, React will update your HTML the most performant way possible. We’ll get to that later. For now, don’t worry too hard, it’s just magic HTML.
“Any sufficiently advanced technology is indistinguishable from magic.” – Arthur C. Clarke
What About JSX?
Normally React is not written with createElement, as that would be a really big pain. Instead, we tend to use JSX, which is sort of like a cross between HTML and JavaScript. Let’s look at how we would use a variable in our hello world example. Using variables is the first step to using React to dynamically update data:
I solved the problem by contacting the string with the addition operator. That works, but I’d rather use a templating language. For example, JSX. Let’s look at that:
What Does JSX Do?
JSX is really just a different syntax for React.createElement. When a build tool like webpack or Parcel compiles JSX to functions that use React.createElement. JSX is just a shortcut for React.createElemement. Without it, writing React would be a pain.
VueJS also has render functions. VueJS encourages using single file components, that compile to Vue render functions.
Creating A Basic WordPress Post Component With React
Let’s create our first component. React components are reusable JavaScript functions for rendering some part of a user interface. Let’s start by making a component called “Post” to show a WordPress post, as it is returned by the WordPress REST API:
View the code on Gist.
This function accepts one argument “props”. Props is an important React concept. This is the current state of the data, passed to the component. React is all about passing props down, you’ll see as we go.
This starts out looking like a normal function, but we return JSX. The JSX looks like HTML, the big difference is where we output the post title. Instead of hardcoding the post title, we use curly brackets to enclose a reference to a part of the object props, in this case, props.post.title.rendered.
Here is the new component, added to our Hello World from before:
Having the post prop in the component doesn’t scale. Let’s move it to a variable and add in post content.
Composing Components From Components Using Iterators
In the last section I said we created components in React so they are easy to reuse. Now that we have one component to show a post, let’s reuse it inside of another component that is designed show a list of posts.
This will show us how to nest components and to iterate through a collection of items in React. I’ll go more in depth into iterating. For now, let’s keep things as simple as possible. Here is the Posts component:
View the code on Gist.
When we made the Post component, we used curly brackets to enclose a reference to the props object. In this case, we use curly brackets to enclose some JavaScript code. Curly brackets create a new closure inside of your template.
Inside of this closure we loop through the array in props.posts using the Array.map() function. That calls a function once per item in the array. In that function, we use the Post component to render the current item in the array.
Here is the new component added to the Hello World:
That’s Enough React To Start With Gutenberg
That’s not everything you need to know about React. We have only covered how to render data to the DOM, not how to update data in the DOM. But, this is enough to start using React in Gutenberg blocks, which I think is a great way to start learning React. That’s the next post.
Josh Pollock
Josh is a WordPress developer and educator. He is the founder of Caldera Labs, makers of awesome WordPress tools including Caldera Forms — a drag and drop, responsive WordPress form builder.
The post React Basics For WordPress Developers appeared first on Torque.
