how-to-venia

KO | EN

gitlite — search

#python #react #typescript #llm #machine-learning #linux #nodejs #macos #java #windows #awesome #cli #awesome-list #vue

(★ 43)

Magento PWA Storefront based on PWA Studio's Venia Storefront (Concept)

how-to-venia Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# PWA Studio Fundamentals

⚠️ These tutorials are no longer maintained. They are now maintained under the [Adobe/Magento documentation site].

<hr />

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.

## Topics

-   [Project Set-Up](./doc/project-set-up/index.md) - Get your local development environment up and running.
-   [Project Structure & Routing](./doc/project-structure-and-routing/index.md) - Understand the project structure and learn the basics of how routing works in PWA Studio.
-   [Add a static route](./doc/add-a-static-route/index.md) - Add a static route to your PWA Studio app.
-   [Update a Site Footer Component](./doc/update-site-footer/index.md) - Make an update to the venia-ui footer component to add your own links.
-   [Props & propTypes](./doc/props-proptypes/index.md) - How PWA Studio uses REACT Props & propTypes.
-   [CSS Modules](./doc/css-modules/index.md) - How PWA Studio uses CSS Modules.
-   [Component State](./doc/component-state/index.md) - Use component state in REACT.
-   [Reuse a PWA Studio component](./doc/reuse-a-venia-component/index.md) - See how easy it is to add a PWA Studio component to your app.
-   [Explore Magento's GraphQL API](./doc/explore-graphql-with-graphiql/index.md) - Get familiar with Magento's GraphQL API.
-   [Use Magento's GraphQL API with Apollo](./doc/use-magentos-graphql-api/index.md) - Create a custom REACT component which fetches data from Magento's GraphQL API with the Apollo client.
-   [State Management with Redux](./doc/manage-state-with-redux/index.md) - 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](./doc/preparing-to-go-live/index.md)

## What you will build

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.

![what we are building][]

## Learn more

-   [Progressive Web Apps](https://developers.google.com/web/progressive-web-apps)
-   [Magento PWA Studio Overview][]
-   [Intro to React](https://reactjs.org/tutorial/tutorial.html)
-   [Main Concepts of React](https://reactjs.org/docs/hello-world.html)

[Magento PWA Studio Overview]: https://magento.github.io/pwa-studio/technologies/overview/
[what we are building]: ./doc/images/foo-screen-shot.png
[Learn more]: #learn-more
[Adobe/Magento documentation site]: https://magento.github.io/pwa-studio/tutorials/pwa-studio-fundamentals/

how-to-venia

how-to-venia Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

how-to-venia

how-to-venia Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README