From b85a7af00f7b4a8ffc7edb3d958f7afafd255fd7 Mon Sep 17 00:00:00 2001
From: Eliza Milburn <61363431+ERmilburn02@users.noreply.github.com>
Date: Fri, 12 Jul 2024 15:04:08 +0100
Subject: [PATCH] Various Documentation fixes (#496)

* Various fixes
- Manually specify v7 in install command
- Stage takes a `width` and `height`, not an `x` and `y`
- Updated Quick start App component to correctly default export

* Updated README to use Vite

This is to make it consistent with the docs
---
 packages/docs/docs/about.mdx | 10 ++++++----
 packages/react/README.md     | 10 +++++-----
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/docs/docs/about.mdx b/packages/docs/docs/about.mdx
index 651302a7..85cdbc36 100644
--- a/packages/docs/docs/about.mdx
+++ b/packages/docs/docs/about.mdx
@@ -53,7 +53,7 @@ npm install
 ### 2. Install Pixi-React dependencies:
 
 ```bash
-npm install pixi.js @pixi/react
+npm install pixi.js@7 @pixi/react@7
 ```
 
 ### 3. Replace App.jsx with the following:
@@ -65,11 +65,11 @@ import { useMemo } from 'react';
 import { BlurFilter, TextStyle } from 'pixi.js';
 import { Stage, Container, Sprite, Text } from '@pixi/react';
 
-export const App = () => {
+const App = () => {
   const blurFilter = useMemo(() => new BlurFilter(2), []);
   const bunnyUrl = 'https://pixijs.io/pixi-react/img/bunny.png';
   return (
-    <Stage x={800} y={600} options={{ background: 0x1099bb }}>
+    <Stage width={800} height={600} options={{ background: 0x1099bb }}>
       <Sprite image={bunnyUrl} x={300} y={150} />
       <Sprite image={bunnyUrl} x={500} y={150} />
       <Sprite image={bunnyUrl} x={400} y={200} />
@@ -97,6 +97,8 @@ export const App = () => {
     </Stage>
   );
 };
+
+export default App;
 ```
 
 ### 4. Run the app:
@@ -131,7 +133,7 @@ const App = () => {
   const blurFilter = useMemo(() => new BlurFilter(2), []);
   const bunnyUrl = 'https://pixijs.io/pixi-react/img/bunny.png';
   return (
-    <Stage x={800} y={600} options={{ background: 0x1099bb }}>
+    <Stage width={800} height={600} options={{ background: 0x1099bb }}>
       <Sprite image={bunnyUrl} x={300} y={150} />
       <Sprite image={bunnyUrl} x={500} y={150} />
       <Sprite image={bunnyUrl} x={400} y={200} />
diff --git a/packages/react/README.md b/packages/react/README.md
index a309ff54..5886c613 100644
--- a/packages/react/README.md
+++ b/packages/react/README.md
@@ -37,19 +37,19 @@ Pixi React is an open-source, production-ready library to render high performant
 
 ### Quick start
 
-If you want to start a new React project from scratch, we recommend [Create React App](https://github.com/facebook/create-react-app).
+If you want to start a new React project from scratch, we recommend [Vite](https://vitejs.dev/).
 To add to an existing React application, just install the dependencies:
 
-#### Start New React Project "my-app" with Create React App:
+#### Start New React Project "my-app" with Create React Vite:
 ```bash
-# for typescript add "--template typescript"
-npx create-react-app my-app
+# for typescript use "--template react-ts"
+npx create-vite@latest --template react my-app
 cd my-app
 ```
 
 #### Install Pixi React Dependencies:
 ```bash
-npm install pixi.js @pixi/react
+npm install pixi.js@7 @pixi/react@7
 ```
 
 #### Usage: