How To Use Frontity To Create A Headless WordPress Theme With React

🚨 IMPORTANT:

Frontity is an incredible tool for creating headless WordPress sites using React. It takes all the pain of dealing with PHP and WordPress directly and wraps it up into a nice and easy to use container. In this video I will show you how to use Frontity to create a simple WordPress theme with React and also how to use React Spring to add custom page transitions to your WordPress site.

📚 Materials/References:

🧠 Concepts Covered:

- How to create a Frontity site
- How to add page transitions in Frontity
- Why React is so much nicer to work with for WordPress themes

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:41 - Demo
01:13 - Create Initial Project
04:50 - Frontity Packages Explained
08:45 - Most Important Components
09:44 - Modifying Styles
10:43 - Page Transitions
15:19 - Deployment
18:22 - Outro

#Frontity #WDS #HeadlessWordPress

[Aaronmoreno]

I Was just looking to a headless Wordpress with react tutorial and you came through right in time. Thanks Kyle!

[mrkanalelgn]

2:02 On a Frontity sponsored video*
Frontity: "Do you want to see updates about Frontity?"
Kyle : "No"
Frontity: "Am I a joke to you?"

[AtNineGaming]

Would love a whole video on react-spring!

[tasmto]

Thanks Kyle! Hope you are having a wonderful week!

[christophermartinez]

Wow Kyle! you have content for many areas, bravo!

[kalpeshgabu]

Mr kyle please do a full project with frontity and wordpress ?

[mazhuda]

can it combine with plugin like woocommerce?, what is this have a dashboard in wordpress backend?

[jgvlc]

Excellent information, thank you very much!

[unknownman]

what.. I was looking for Frontity 10 minutes ago and got this video's notification.

[lakzari_za]

Can this work with page builders like elementor?

[abrotherinchrist]

I'm guessing Frontity is not a good choice for headless WordPress anymore since the team was bought out by Automattic? I'm also guessing that this was a strategic move to not only acquire a great development team, but to quench the push towards headless WordPress? Are there other tools like Frontity?

I just had one doubt, using frontify we can deploy react apps to WordPress but can we use the drag and drop feature of WordPress to modify the UI?

[matttherat]

This much people got the video in recommendations

[christophermartinez]

Do you recommend using this headless cms architecture with wordpress+woocommerce?

[tonkihonks]

High level but helpful. How about another video showing the backend with WP?

[peepwebdev]

If you are getting Internal Server Error on the React Spring section is it because React Spring released a new version and the code in this video no longer works for the page animations part.

I found the answer to solve this on the React Spring GitHub:

"Yzrsah commented 27 days ago
@tim-soft
The API for useTransition changed in V9 but it's not documented on react-spring.io.
If you make these changes, it will resolve the issue.



Remove the key selector from useTransitions(), as it's now automatic:

const transitions = useTransition(toggle, null, {
to
const transitions = useTransition(toggle, {




Call transitions instead of mapping it:


transitions.map(({ item, key, props }) => ...)
to

transitions((props, item, key) => ...)



@joshuaellis The issue is just a documentation issue.Yzrsah commented 27 days ago
@tim-soft"

Great video man. Thanks for your work.

[aestheticallyamazing]

Please create more content such as this :)

[hitmusic]

Bro, I have install frontity chakra theme but not displaying any images

[srdjagunjic]

Headless WordPress is cool but it is quite simple and you can't do everything. Say goodbye to hundreds of useful plugins. I absolutely love WordPress PHP theme-ing as there are basically no limits on what you can achieve and you can make complex WooCommerce web shops and apps. Good luck with that using the Headless way :p

[lwebdesign]

Do you have to deploy the project every time a user adds or changes content in the wp backend?