--- menu: Quick start order: create,start-building,header,pages,graphcms-component metaTitle: Start your Reactjs Ecommerce project with the GraphCommerce React Magento 2 Template metaDescription: 'Overview of the magento-graphcms example, the GraphCommerce reactjs ecommerce template for Magento storefronts' metaUrl: getting-started/getting-started-with-magento-react-ecommerce --- # Quick start This page will give you an introduction to the 80% of the concepts that you will most likely use. We recommended you familiarize yourself with the primary technologies used in GraphCommerce: React and Next.js. ## Project file structure (Almost) Every file in your project directory is meant for customization. It's standard to modify these files for every project. - `πŸ“„ /graphcommerce.config.js` GraphCommerce configuration - `πŸ“ /components` A set of components you most likely want to modify to your needs - `πŸ“ /components/Layout `The main layout components, like header, navigation, and footer - `πŸ“ /pages` A set of boilerplate pages, which handle URL routing - `πŸ“„ /components/theme.ts` Global styles - `πŸ“ /locales` Interface translation files that are auto generated - `πŸ“ /plugins` Directory for custom plugins - `πŸ“„ /next.config.js` Next.js configuration ## Hygraph GraphCommerce relies on Hygraph, the default integrated CMS. Hygraph is used for all static content (video, pages, images), allowing for high-quality components beyond Magento's CMS capabilities. - To start building, [clone β†—](https://app.hygraph.com/clone/caddaa93cfa9436a9e76ae9c0f34d257?name=GraphCommerce%20Demo) the Hygraph schema. - You can safely delete all content - Hygraph content is multilingual - A page's `content` field holds the components to display - If the page url matches a Magento category page url, it's `content` adds to the category page
https://user-images.githubusercontent.com/1251986/227236765-503ccaac-6499-48df-bb20-e3b341cd7899.mp4
The homepage's `content` field holds the components to display
## Page routing GraphCommerce uses Next.js file-based [page routing β†—](https://nextjs.org/docs/routing/introduction). The files inside the `πŸ“ /pages` directory handle routing. Modify these files to meet your requirements or [build a custom page](./pages.md). - Product pages: `πŸ“„ /p/[...url].tsx` - Homepage: `πŸ“„ /index.tsx` - Category pages: `πŸ“„ /[...url].tsx` (also used for category home page) - Hygraph content pages: Modify `πŸ“„ /index.tsx`
https://user-images.githubusercontent.com/1251986/227176018-4a6a83a6-c61b-4344-8238-6596cb41c12e.mp4
Modify the layoutProps in `πŸ“„ /newsletter/index.tsx` to change the newsletter page layout
## Styling GraphCommerce is build using [MUI coreβ†—](https://mui.com/core/) components. πŸ‘‰ To change your storefront's global colors, typography and styles, modify `πŸ“„ /components/theme.ts` To style a Graphcommerce component to your liking, add the sx prop: ```tsx sx={{ color: 'red' }} ``` Target child elements with css selectors: ```tsx sx={{ '& .MuiBox-root': { background: 'blue' }}} ``` Pass the theme object to use global values ```tsx sx={(theme)=>({ margin: theme.spacings.lg, color: theme.palette.text.secondary })} ``` ## Customization There are several ways to customize your storefront to a greater extent. The optimal method varies based on the desired modification. πŸ‘‰ Local modifications - Every file in your project directory is meant for customization. E.g., you can directly modify files in the `πŸ“ /pages` and `πŸ“ /folder` directories, as wel as your `πŸ“„ /components/theme.ts` file. πŸ‘‰ Plugin - Creating a [plugin](../framework/plugins-react.md) is straightforward and surprisingly uncomplicated. Plugins are recommended for retaining maximum upgradability. πŸ‘‰ Patch - Directly edit a component in `πŸ“ /node_modules` and generate a patch using [patch-package](../framework/patch-package.md). Patches, stored in the `πŸ“ /patches` directory, auto-reapply during development or production environment builds. ❗️ Local copy - Duplicate the component from `πŸ“ /node_modules` to e.g., `πŸ“ /components/`, update all references to it, and edit locally. Using local copies marginally complicates upgrading. ## FAQ
What are the benefits of choosing GraphCommerce for a react ecommerce project? ### What are the benefits of choosing GraphCommerce for a reactjs ecommerce project? React is a very suitable framework for magento reactjs ecommerce projects. Magento 2 is a well established, widely used open source e-commerce solution. GraphCommerce brings the best of both, and includes the structure, components, and tooling you need to get started with react ecommerce. Using GraphCommerce minimizes the development effort required to launch a full featured reactjs e-commerce storefront with features like cart, search, layered navigation and category, product, account, checkout pages.
Why use the GraphCommerce magento reactjs ecommerce template ### Why use the GraphCommerce magento-graphcms reactjs ecommerce template The GraphCommerce magento-graphcms template contains all needed components like cart, search, and layered navigation for a full-featured e-commerce storefront. It's easy to customize and includes the structure, components, and tooling you need to get started. With the extensive documentation, it is more efficient to understand and customize the template for your next react Magento 2 project, than to start from scratch.
## Next steps - πŸŽ‰ By now, you know the basics to begin building your storefront. - [Set up VS Code](../getting-started/vscode.md) and install usefull extensions for an optimal development experience. - [Start customizing](../getting-started/start-building.md) to go from "Hello World" to a fully built GraphCommerce custom storefront.