They explain the change very well here. Basically, instead of putting everything into brackets as an array with commas between elements, you can now just wrap it all in what appears to be an html tag, indicating it’s a fragment. Basically, syntax is almost exactly like it was before fragments existed, but it’s not an extra div, or whatever you chose to use in the past. They have a few ways to indicate it’s a fragment, but my favorite is simply <> putting things within blank tags, like this </>.

This is really interesting to me, because while I haven’t looked into how exactly they made this work, I’m pretty sure it works about the same way as when they supported arrays – they just abstracted away a lot of the code you need to write to indicate how the fragment should be put together. In any case, I like it a lot. While it’s not anything groundbreaking, it just feels right. It’s the way things should work. So to you React devs at Facebook who definitely read my blog (lol), I am proud of you. Thanks for all you do!

The post React Just Got Better (Again) appeared first on Morgan VanYperen.

In addition to trying to generally improve the notes around my code, I also of course have to learn to code better. The project I found, that I’m working on contributing to, involves combining React and WordPress together in a pretty unique way. I have an understanding of React, and of WordPress, but I’ve never used WordPress exclusively as an API before, and I’ve never used Next.js either. Lucky for me, there is a lot of beginner documentation out there for both – and this project is still in its infancy – so there are plenty of basic things to add!

To begin my process, I simply cloned the github repository, and followed the readme’s instructions for installing dependencies and launching the site in a local environment. Then I opened up the project in my text editor of choice (vscode right now) and looked it over. While I haven’t used Next.js before, everything for the front-end looked pretty familiar and intuitive based on my experience with React. I familiarized myself with the file structure, and where code and/or libraries were being imported and exported. The WordPress folder was of course, very familiar to me from my time working at Bluehost. Nothing new there.

As I saw how routing was working on the front-end, I knew I’d need to study more about Next.js if I want to help add components to display pages and posts. That seemed the most obvious thing to add at this point, but it was still unclear to me how to build that out. Here is where I went to learn to how Next.js works, and how I can add to the project. It’s really nice because it even has a section for creating dynamic pages – exactly what I want to be able to do when creating a custom react front-end for WordPress. Now that I have a pretty good understanding of how that works, I should be able to get started following that pattern, and document my work properly with git commit messages. The next tricky part is figuring out what urls to use to fetch the data from WordPress, and make sure the links all work properly. More on this to come.

The post Contributing to Open Source appeared first on Morgan VanYperen.