The goal of this tutorial series is to guide you through setting up, working with and deploying your first Magento PWA Studio storefront using the venia-ui library.
To begin only a basic understanding of REACT is required. As we progress, new concepts will be introduced, for which there will be an Learn more section to provide you with helpful resources.
- Project Set-Up - Get your local development environment up and running.
- Project Structure & Routing - Understand the project structure and learn the basics of how routing works in PWA Studio.
- Add a static route - Add a static route to your PWA Studio app.
- Update a Site Footer Component - Make an update to the venia-ui footer component to add your own links.
- Props & propTypes - How PWA Studio uses REACT Props & propTypes.
- CSS Modules - How PWA Studio uses CSS Modules.
- Component State - Use component state in REACT.
- Reuse a PWA Studio component - See how easy it is to add a PWA Studio component to your app.
- Explore Magento's GraphQL API - Get familiar with Magento's GraphQL API.
- Use Magento's GraphQL API with Apollo - Create a custom REACT component which fetches data from Magento's GraphQL API with the Apollo client.
- State Management with Redux - How PWA Studio uses Redux to manage app state.
- [Redux with Apollo Client][]
- [Explore Magento's REST API][] - Get familiar with Magento's REST API.
- [Use Magento's REST API][]
- Preparing to go live
As you progress through the tutorials you will create your own PWA Studio app and a custom page with REACT components to demonstrate how you can work with PWA Studio to make basic changes to your site.
