WordPress

React for WordPress Developers

WordPress core uses React for the Gutenberg block editor, which means it is high time for every WordPress developer to learn and get familiar with React. Getting started with React can be tricky. Let this blog post help you.

I started learning React a few months ago, as part of my professional goals at the WebDevStudios. With some hands-on experience with React, I can now understand and create Gutenberg blocks and learn other React-based frameworks, like Next.js.

Everyone has their preferred way of learning, yet the need for building something is paramount. Okay, so how do you get started? Are there any simple courses for beginners? Where do you deploy an app? All your questions are answered here.

Note these prerequisites: as a beginner, you need to understand JavaScript ESNext Syntax and new methods before getting started with React. As a starting point, read React’s official documentation. You can also look at example projects created by the React community.

What to Learn

Every other day, new React frameworks, packages, and tools are released or get updated. You don’t have to catch up with all of them at once.

React basics

Learn the basics well and then you can gradually advance further down the road.

  • JSX
  • Components
  • States and props
  • Routing

Courses

Below is a list of resources for any WordPress developer learning React.

Scrimba

This online course platform has a built-in editor while the video is playing. You can call this a combination of CodePen and Udemy.

While you are watching the video course, you can double click on the video. Ta-da! You have the code editor IDE to start editing code.

Scrimba

You can create folders, organize your files, add dependencies, and most importantly, you don’t have to stop watching the video. Scrimba has a free 11-hour React course for beginners. If you are interested in learning React without installing it on your computer, give it a try.

YouTube

When it comes to learning code, YouTube is a good place to start. You can filter based on your preferences, like long videos, crash courses, etc. Here are some suggested channels for learning React:

Egghead.io

Kent C. Dodds, one of the reputed names in the React world, has a great free community resource called the “Beginner’s Guide to React.” Egghead also has short and super-specific React tutorials for beginners.

Other Resources

Sal Ferrarello’s React Starters

WebDevStudios Principal Engineer, Sal Ferrarello, came up with starter projects for anyone who is learning React. Sal practices what he preaches, but the real learning comes when you start building something.

These starter projects are simple, arranged in the order of learning new topics, and easy to follow. What I really like about them is the ease of setting up the environment.

The projects are bundled with working solutions, which you have to complete and improvise. Most starter projects available on the internet are either fully completed code or just the idea with minimal or fewer directions.

If it’s completed code, you might just copy-paste it or just follow what is in there. And if it is just an idea, it might be daunting to a beginner to set up the project or have issues with installation.

Both these approaches are not effective in my opinion, as they miss the main objective of building something at the beginner level. This is where Sal’s starters are winning over others out there.

Each starter project asks you to come up with your own solution, but you don’t have to start from scratch.

Access Sal’s ReactJS starters at GitHub.

What is next?

Once you have learned and practiced the basics of React, now it’s time to build some Gutenberg blocks. You can also start building Headless CMS with WordPress and Next.js.

Are you just starting with React? Share your experiences below in the comments.

Comments

Have a comment?

Your email address will not be published.

accessibilityadminaggregationanchorarrow-rightattach-iconbackupsblogbookmarksbuddypresscachingcalendarcaret-downcartunifiedcouponcrediblecredit-cardcustommigrationdesigndevecomfriendsgallerygoodgroupsgrowthhostingideasinternationalizationiphoneloyaltymailmaphealthmessagingArtboard 1migrationsmultiple-sourcesmultisitenewsnotificationsperformancephonepluginprofilesresearcharrowscalablescrapingsecuresecureseosharearrowarrowsourcestreamsupportunifiedupdatesvaultwebsitewordpress