allow mdx fragments

docs/common/error-utilities.ts

@@ -452,4 +452,10 @@ const RENAMED_PAGES: Record<string, string> = {
 
   // Stop encouraging usage of Expo Go when using native modules
   '/bare/using-expo-client/': '/archive/using-expo-client/',
+
+  // May 2024 home / get started section
+  '/overview': '/get-started/introduction',
+  '/get-started/installation': '/get-started/create-a-project',
+  '/get-started/expo-go': '/get-started/set-up-your-environment',
+  '/get-started/create-a-project': '/get-started/create-a-project',
 };

docs/components/page-higher-order/DocumentationElements.tsx

@@ -21,6 +21,10 @@ export default function DocumentationElements(props: DocumentationElementsProps)
     headings: props.headings,
   });
 
+  if (!props.meta) {
+    return props.children;
+  }
+
   return (
     <AnchorContext.Provider value={slugger}>
       <HeadingsContext.Provider value={manager}>

docs/constants/navigation.js

@@ -50,14 +50,14 @@ const generalDirectories = fs
 // --- Navigation ---
 
 const home = [
-  makeSection('', [makePage('overview.mdx')]),
   makeSection('Get started', [
-    makePage('get-started/installation.mdx'),
-    makePage('get-started/expo-go.mdx'),
+    makePage('get-started/introduction.mdx'),
     makePage('get-started/create-a-project.mdx'),
+    makePage('get-started/set-up-your-environment.mdx'),
+    makePage('get-started/start-developing.mdx'),
+    makePage('get-started/next-steps.mdx'),
   ]),
   makeSection('Develop', [
-    makePage('develop/project-structure.mdx'),
     makeGroup(
       'User interface',
       [

docs/deploy.sh

@@ -353,6 +353,13 @@ redirects[guides/customizing-webpack]=archive/customizing-webpack
 # Stop encouraging usage of Expo Go when using native modules
 redirects[bare/using-expo-client]=archive/using-expo-client
 
+# May 2024 home / get started section
+redirects[/overview]=get-started/introduction
+redirects[/get-started/installation]=get-started/create-a-project
+redirects[/get-started/expo-go]=get-started/set-up-your-environment
+redirects[/get-started/create-a-project]=get-started/create-a-project
+
+
 echo "::group::[5/6] Add custom redirects"
 for i in "${!redirects[@]}" # iterate over keys
 do

docs/package.json

@@ -60,6 +60,7 @@
     "react-grid-system": "^8.1.9",
     "react-markdown": "^8.0.7",
     "react-player": "^2.16.0",
+    "react-qr-code": "^2.0.12",
     "react-visibility-sensor": "^5.1.1",
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1",

docs/pages/get-started/create-a-project.mdx

@@ -1,117 +1,24 @@
 ---
 title: Create a project
-description: Learn how to create a new Expo project and run it on your device.
+description: Learn how to create a new Expo project.
+hideTOC: true
 ---
 
-import { Collapsible } from '~/ui/components/Collapsible';
 import { Terminal } from '~/ui/components/Snippet';
-import ImageSpotlight from '~/components/plugins/ImageSpotlight';
-import { Step } from '~/ui/components/Step';
-import { BoxLink } from '~/ui/components/BoxLink';
-import { BookOpen02Icon, GraduationHat02Icon } from '@expo/styleguide-icons';
 
-The process of running a new Expo project consists of three steps. You start by initializing a new project, then start the development server with Expo CLI and finally open the app on your device with Expo Go to see your changes live.
+System requirements:
 
-<Step label="1">
+- [Node.js (LTS)](https://nodejs.org/en/).
+- macOS, Windows (Powershell and WSL 2), and Linux are supported.
 
-## Initialize a new project
+We recommend starting with the default project created by `create-expo-app`. The default project includes example code to help you get started.
 
-To initialize a new project, use [`create-expo-app`](/more/glossary-of-terms/#create-expo-app) to run the following command:
+To create a new project, run the following command:
 
-<Terminal
-  cmd={[
-    '# Create a project named my-app',
-    '$ npx create-expo-app my-app',
-    '',
-    '# Navigate to the project directory',
-    '$ cd my-app',
-  ]}
-  cmdCopy="npx create-expo-app my-app && cd my-app"
-/>
+<Terminal cmd={['$ npx create-expo-app@latest']} />
 
-> **info** You can also use the `--template` option with the `create-expo-app` command. Run `npx create-expo-app --template` to see the list of available templates.
-
-</Step>
-
-<Step label="2">
-
-## Start the development server
-
-To start the development server, run the following command:
-
-<Terminal cmd={['$ npx expo start']} />
-
-When you run the above command, the Expo CLI starts [Metro Bundler](/guides/customizing-metro). This bundler is an HTTP server that compiles the JavaScript code of your app using [Babel](https://babeljs.io/) and serves it to the Expo app. See how [Expo Development Server](/more/expo-cli/#develop) works for more information about this process.
-
-</Step>
-
-<Step label="3">
-
-## Open the app on your device
-
-To open the app on your device that has [Expo Go](/get-started/expo-go/) already installed:
-
-- On your Android device, press **Scan QR Code** on the **Home** tab of the Expo Go app and scan the QR code you see in the terminal.
-- On your iPhone or iPad, open the default Apple **Camera** app and scan the QR code you see in the terminal.
-
-You can open the project on multiple devices simultaneously. Go ahead and try it on both phones at the same time if you have them handy.
-
-<Collapsible summary="Is the app not loading on your device?">
-
-First, make sure you are on the same Wi-Fi network on your computer and your device.
-
-If it still doesn't work, it may be due to the router configuration &mdash; this is common for public networks. You can work around this by choosing the **Tunnel** connection type when starting the development server, then scanning the QR code again.
-
-<Terminal cmd={['$ npx expo start --tunnel']} />
-
-> Using the **Tunnel** connection type will make the app reloads considerably slower than on **LAN** or **Local**, so it's best to avoid tunnel when possible. You may want to install an emulator/simulator to speed up development if **Tunnel** is required for accessing your machine from another device on your network.
-
-</Collapsible>
-
-<Collapsible summary="Using an emulator or a simulator?">
-
-If you are using an emulator/simulator, you may find the following Expo CLI keyboard shortcuts to be useful to open the app on any of the following platforms:
-
-- Pressing <kbd>a</kbd> will open in an [Android Emulator or connected device](/workflow/android-studio-emulator).
-- Pressing <kbd>i</kbd> will open in an [iOS Simulator](/workflow/ios-simulator).
-- Pressing <kbd>w</kbd> will open in a [web browser](/workflow/web). Expo supports all major browsers.
-
-</Collapsible>
-
-</Step>
-
-<Step label="4">
-
-## Make your first change in App.js
-
-Now, all the steps are completed to get started, you can open **App.js** file in your code editor and change the contents of the existing `<Text>` to `Hello, world!`. You are going to see it update on your device.
-
-Amazing, progress! You now have the Expo toolchain running on your machine, can edit the source code for a project, and see the changes live on your device.
-
-<Collapsible summary="Changes not showing up on your device?">
-
-Expo Go is configured by default to automatically reload the app whenever a file is changed, but let's make sure to go over the steps to enable it in case somehow things aren't working.
-
-- Make sure you have the [development mode enabled in Expo CLI](/workflow/development-mode#development-mode).
-- Close the Expo app and reopen it.
-- Once the app is open again, shake your device to reveal the developer menu. If you are using an emulator, press <kbd>Ctrl</kbd> + <kbd>M</kbd> for Android or <kbd>Cmd ⌘</kbd> + <kbd>D</kbd> for iOS.
-- If you see **Enable Fast Refresh**, press it. If you see **Disable Fast Refresh**, dismiss the developer menu. Now try making another change.
-
-  <ImageSpotlight
-    alt="Developer menu in Expo Go app."
-    src="/static/images/get-started/developer-menu.png"
-    style={{ maxWidth: 720 }}
-  />
-
-</Collapsible>
-
-</Step>
+> You can choose a different template by adding the `--template` flag.
 
 ## Next step
 
-<BoxLink
-  title="Tutorial"
-  description="If you are new to Expo, learn more about the ecosystem by creating a universal app that runs on Android, iOS, and web."
-  href="/tutorial/introduction"
-  Icon={GraduationHat02Icon}
-/>
+You have a project. Now it's time to set up your development environment so that you can start developing.

docs/pages/get-started/index.js

@@ -1,3 +1,3 @@
 import redirect from '~/common/redirect';
 
-export default redirect('/get-started/installation/');
+export default redirect('/get-started/introduction/');