React + Craft 3 Prototype
The goal of this project is to quickly prototype what a React app would look like with content served from Craft CMS.
- See what all the hoopla's about with React
- Experiment with Crafts Element API plugin
- Experiment with capabilities of using Craft as a headless CMS
Running the Prototype
- Clone this repo and enter the base project directory with your terminal
- Install node modules
- Install vendor files
cd ./craftcms && composer install
- Point an apache web server to
- Create an new empty database
- Import the
- Clone the
cp ./.env.example ./.env
- Open the new
.envfile and enter you local environment information
- Build the React app
cd .. && npm run build && npm run preview
- Sign up for an account, emails are not validated
Before I dive into what I built or provide my opinion of React I'll start by saying that it is entirely possible that I didn't do things "correct". I didn't read/watch anything beyond the Intro to React tutorial. It's possible that I got some of the paradigms "incorrect", my prior knowledge is based around my previous experiment with web components and based on how easy native web components were I started this project with the assumption that React components would be just as easy/intuitive.
Thoughts on React
However, there were a few things that I found unintuitive. Shall we get nitpicky? Yes, let's get nitpicky.
I understand why
class needs to be
className but what I found frustrating is that when writing a
for attribute for a
<label> is that
forName didn't work, instead, I eventually found that the correct usage was
htmlFor. I assume these minor inconsistencies are the side effect of open source development but it would have been nice to if either
forName worked or
htmlFor worked. Having to learn and remember these slight inconsistencies is frustrating.
But you know, that's just, like, my opinion, man.
Throughout the rest of this writeup I'll do my best to be objective about React and try not to compare it to web components, although, to be clear, even though web components do not have a magical "run this predefined script and everything will be automagically done for you" button I still found them easier and more convenient.
Craft's Element API
The Element API seems like a must-have plugin when trying to use Craft as a headless CMS. It saves you a ton of time either from having the remember long and complicated URLs when fetching data or from having to register simple custom routes in your module's class.
I used the Element API to pull in all the courses when the user clicks the "Add a Course" button and I could/should have used it on the "All Courses" view as well for pulling in the users purchased courses.
The one possible downside is that all parameters needed to be provided must be provided using GET parameters. I'm unsure how secure/easy it would be to handle user login via GET parameters but I assume you'll still need to POST to a custom controller within your module.