From 9fbf90277c30bf3c6fc4d890fc341e719d3193ef Mon Sep 17 00:00:00 2001 From: Jon Samp Date: Sat, 13 Apr 2024 22:44:01 -0500 Subject: [PATCH 01/20] updates getting started doc --- website/src/theme/ExternalLink/index.js | 35 ++++++++++++++ .../src/theme/ExternalLink/styles.module.css | 21 +++++++++ .../version-0.73/getting-started.md | 47 +++++++++++++++++-- 3 files changed, 98 insertions(+), 5 deletions(-) create mode 100644 website/src/theme/ExternalLink/index.js create mode 100644 website/src/theme/ExternalLink/styles.module.css diff --git a/website/src/theme/ExternalLink/index.js b/website/src/theme/ExternalLink/index.js new file mode 100644 index 00000000000..fd7f075118c --- /dev/null +++ b/website/src/theme/ExternalLink/index.js @@ -0,0 +1,35 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React from 'react'; +import styles from './styles.module.css'; + +export default function ExternalLink({href, children}) { + return ( + +
+
{children}
+
+ + + +
+
+ + ); +} diff --git a/website/src/theme/ExternalLink/styles.module.css b/website/src/theme/ExternalLink/styles.module.css new file mode 100644 index 00000000000..8e0b8500b3e --- /dev/null +++ b/website/src/theme/ExternalLink/styles.module.css @@ -0,0 +1,21 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +.container { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1.5rem; + border: 1px solid var(--ifm-color-gray-500); + border-radius: 0.5rem; + font-weight: 500; + box-shadow: var(--ifm-alert-shadow); +} + +.container:hover { + background-color: var(--ifm-color-gray-100); +} diff --git a/website/versioned_docs/version-0.73/getting-started.md b/website/versioned_docs/version-0.73/getting-started.md index 07fad84c79a..5e18d3a110d 100644 --- a/website/versioned_docs/version-0.73/getting-started.md +++ b/website/versioned_docs/version-0.73/getting-started.md @@ -1,14 +1,51 @@ --- id: environment-setup -title: Setting up the development environment +title: Get Started with React Native hide_table_of_contents: true --- -import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; +import ExternalLink from '@site/src/theme/ExternalLink'; -import GuideLinuxAndroid from './\_getting-started-linux-android.md'; import GuideMacOSAndroid from './\_getting-started-macos-android.md'; import GuideWindowsAndroid from './\_getting-started-windows-android.md'; import GuideMacOSIOS from './\_getting-started-macos-ios.md'; +**React Native allows developers who know React to create genuine native apps. At the same time, native developers can use React Native to gain parity between native platforms by writing common features once.** -This page will help you install and build your first React Native app. +We believe that the best way to experience React Native is through a Framework, a toolbox with all the necessaries APIs to let you build production ready apps. + +You can also use React Native without a Framework, however we’ve found that most developers benefit from using a React Native Framework like Expo. Expo provides features like file-based routing, high quality universal libraries, and the ability to write plugins that modify native code without having to manage native files. + +
+Can I use React Native without a Framework? + +Yes. You can use React Native without a Framework. **However, if you’re building a new app with React Native, we recommend using a Framework.** + +In short, you’ll be able to spend time writing your app instead of writing an entire Framework yourself in addition to your app. + +The React Native community has spent years refining approaches to navigation, accessing native APIs, dealing with native dependencies, and more. Most apps need these core features. A React Native Framework provides them from the start of your app. + +Without a Framework, you’ll either have to write your own solutions to implement core features, or you’ll have to piece together a collection of pre-existing libraries to create a skeleton of a Framework. This takes real work, both when starting your app, then later when maintaining it. + +If your app has unusual constraints that are not served well by a Framework, or you prefer to solve these problems yourself, you can make a React Native app without a Framework using Android Studio, Xcode, and React Native CLI. If you’re interested in this path, [learn how to get started](#TODO). + +
+ +## Start a new React Native project with Expo + +Expo is a production-grade React Native Framework. Expo provides developer tooling that makes developing apps easier, such as file-based routing, a standard library of native modules, and much more. + +Expo's Framework is open source and free, with an active community on [GitHub](https://github.com/expo) and [Discord](https://chat.expo.dev). + +The team behind Expo also provides Expo Application Services (EAS), an optional set of services that complements the Framework in each step of the development process. + +To create a new Expo project, run the following in your terminal: + +```shell +npx create-expo-app@latest +``` + +Once you’ve created your app, check out the rest of Expo’s getting started guide to start developing your app. + +Continue with Expo + + From e1084235a7c339154ec512dcb750acc206bf1736 Mon Sep 17 00:00:00 2001 From: Jon Samp Date: Sat, 13 Apr 2024 23:46:23 -0500 Subject: [PATCH 02/20] adds react native without a framework, updates to "get started" --- website/src/pages/index.js | 4 +- .../theme/{ExternalLink => BoxLink}/index.js | 2 +- .../styles.module.css | 0 website/static/_redirects | 4 + .../_getting-started-linux-android.md | 77 +------ .../_getting-started-macos-android.md | 77 +------ .../_getting-started-macos-ios.md | 79 +------ .../_getting-started-windows-android.md | 79 +------ .../_integration-with-existing-apps-java.md | 2 +- .../_integration-with-existing-apps-kotlin.md | 2 +- .../_integration-with-existing-apps-objc.md | 2 +- .../_integration-with-existing-apps-swift.md | 2 +- .../get-started-without-a-framework.md | 97 +++++++++ .../version-0.73/get-started.md | 46 ++++ .../version-0.73/getting-started.md | 205 ------------------ .../version-0.73/introduction.md | 6 +- .../version-0.73/more-resources.md | 2 +- .../version-0.73/running-on-device.md | 4 +- .../version-0.73/running-your-application.md | 80 +++++++ .../versioned_docs/version-0.73/typescript.md | 2 +- .../version-0.73-sidebars.json | 1 + 21 files changed, 260 insertions(+), 513 deletions(-) rename website/src/theme/{ExternalLink => BoxLink}/index.js (94%) rename website/src/theme/{ExternalLink => BoxLink}/styles.module.css (100%) create mode 100644 website/versioned_docs/version-0.73/get-started-without-a-framework.md create mode 100644 website/versioned_docs/version-0.73/get-started.md delete mode 100644 website/versioned_docs/version-0.73/getting-started.md create mode 100644 website/versioned_docs/version-0.73/running-your-application.md diff --git a/website/src/pages/index.js b/website/src/pages/index.js index 84efede89fd..6d403e733a4 100644 --- a/website/src/pages/index.js +++ b/website/src/pages/index.js @@ -115,13 +115,13 @@ function HomeCallToAction() { <> Get started Learn the basics diff --git a/website/src/theme/ExternalLink/index.js b/website/src/theme/BoxLink/index.js similarity index 94% rename from website/src/theme/ExternalLink/index.js rename to website/src/theme/BoxLink/index.js index fd7f075118c..721efc9ec38 100644 --- a/website/src/theme/ExternalLink/index.js +++ b/website/src/theme/BoxLink/index.js @@ -8,7 +8,7 @@ import React from 'react'; import styles from './styles.module.css'; -export default function ExternalLink({href, children}) { +export default function BoxLink({href, children}) { return (
diff --git a/website/src/theme/ExternalLink/styles.module.css b/website/src/theme/BoxLink/styles.module.css similarity index 100% rename from website/src/theme/ExternalLink/styles.module.css rename to website/src/theme/BoxLink/styles.module.css diff --git a/website/static/_redirects b/website/static/_redirects index 7de024c60fb..a97cfb33c4e 100644 --- a/website/static/_redirects +++ b/website/static/_redirects @@ -14,6 +14,10 @@ /contributing/how-to-contribute /contributing/overview /releases/release-candidate-minor /releases/release-branch-cut-and-rc0 +# Redirect to new getting started docs +/docs/getting-started /docs/introduction +/docs/environment-setup /docs/get-started + # Redirect New Architecture docs of all versions # Note: We had to delete the older versions to get redirects to work /docs/the-new-architecture/why /docs/next/the-new-architecture/landing-page diff --git a/website/versioned_docs/version-0.73/_getting-started-linux-android.md b/website/versioned_docs/version-0.73/_getting-started-linux-android.md index 782a7c70c18..845697b982b 100644 --- a/website/versioned_docs/version-0.73/_getting-started-linux-android.md +++ b/website/versioned_docs/version-0.73/_getting-started-linux-android.md @@ -1,5 +1,5 @@ import RemoveGlobalCLI from './\_remove-global-cli.md'; -import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; +import BoxLink from '@site/src/theme/BoxLink'; ## Installing dependencies @@ -120,77 +120,10 @@ If you have recently installed Android Studio, you will likely need to [create a > We recommend configuring [VM acceleration](https://developer.android.com/studio/run/emulator-acceleration.html#vm-linux) on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager. -Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it, then proceed to the next step. +Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it. -

Running your React Native application

+## Now what? -

Step 1: Start Metro

+Now, it's time to run your app. -[**Metro**](https://facebook.github.io/metro/) is the JavaScript build tool for React Native. To start the Metro development server, run the following from your project folder: - - - - -```shell -npm start -``` - - - - -```shell -yarn start -``` - - - - -:::note -If you're familiar with web development, Metro is similar to bundlers such as Vite and webpack, but is designed end-to-end for React Native. For instance, Metro uses [Babel](https://babel.dev/) to transform syntax such as JSX into executable JavaScript. -::: - -

Step 2: Start your application

- -Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following: - - - - -```shell -npm run android -``` - - - - -```shell -yarn android -``` - - - - -If everything is set up correctly, you should see your new app running in your Android emulator shortly. - -This is one way to run your app - you can also run it directly from within Android Studio. - -> If you can't get this to work, see the [Troubleshooting](troubleshooting.md) page. - -

Modifying your app

- -Now that you have successfully run the app, let's modify it. - -- Open `App.tsx` in your text editor of choice and edit some lines. -- Press the R key twice or select `Reload` from the Dev Menu (Ctrl + M) to see your changes! - -

That's it!

- -Congratulations! You've successfully run and modified your first React Native app. - -
- -

Now what?

- -- If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md). - -If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started). +Run Your React Native Application diff --git a/website/versioned_docs/version-0.73/_getting-started-macos-android.md b/website/versioned_docs/version-0.73/_getting-started-macos-android.md index 12941e39656..0986c65dbf1 100644 --- a/website/versioned_docs/version-0.73/_getting-started-macos-android.md +++ b/website/versioned_docs/version-0.73/_getting-started-macos-android.md @@ -1,5 +1,5 @@ import RemoveGlobalCLI from './\_remove-global-cli.md'; -import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; +import BoxLink from '@site/src/theme/BoxLink'; ## Installing dependencies @@ -135,77 +135,10 @@ If you use Android Studio to open `./AwesomeProject/android`, you can see the li If you have recently installed Android Studio, you will likely need to [create a new AVD](https://developer.android.com/studio/run/managing-avds.html). Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the **UpsideDownCake** API Level 34 image. -Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it, then proceed to the next step. +Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it. -

Running your React Native application

+## Now what? -

Step 1: Start Metro

+Now, it's time to run your app. -[**Metro**](https://facebook.github.io/metro/) is the JavaScript build tool for React Native. To start the Metro development server, run the following from your project folder: - - - - -```shell -npm start -``` - - - - -```shell -yarn start -``` - - - - -:::note -If you're familiar with web development, Metro is similar to bundlers such as Vite and webpack, but is designed end-to-end for React Native. For instance, Metro uses [Babel](https://babel.dev/) to transform syntax such as JSX into executable JavaScript. -::: - -

Step 2: Start your application

- - - - -```shell -npm run android -``` - - - - -```shell -yarn android -``` - - - - -If everything is set up correctly, you should see your new app running in your Android emulator shortly. - -![AwesomeProject on Android](/docs/assets/GettingStartedAndroidSuccessMacOS.png) - -This is one way to run your app - you can also run it directly from within Android Studio. - -> If you can't get this to work, see the [Troubleshooting](troubleshooting.md) page. - -

Modifying your app

- -Now that you have successfully run the app, let's modify it. - -- Open `App.tsx` in your text editor of choice and edit some lines. -- Press the R key twice or select `Reload` from the Dev Menu (Cmd ⌘ + M) to see your changes! - -

That's it!

- -Congratulations! You've successfully run and modified your first React Native app. - -
- -

Now what?

- -- If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md). - -If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started). +Run Your React Native Application diff --git a/website/versioned_docs/version-0.73/_getting-started-macos-ios.md b/website/versioned_docs/version-0.73/_getting-started-macos-ios.md index faf7349f5f8..a400d33ce54 100644 --- a/website/versioned_docs/version-0.73/_getting-started-macos-ios.md +++ b/website/versioned_docs/version-0.73/_getting-started-macos-ios.md @@ -1,5 +1,5 @@ import RemoveGlobalCLI from './\_remove-global-cli.md'; -import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; +import BoxLink from '@site/src/theme/BoxLink'; ## Installing dependencies @@ -102,81 +102,8 @@ export NVM_DIR="$HOME/.nvm" You might also want to ensure that all "shell script build phase" of your Xcode project, is using `/bin/zsh` as its shell. ::: -## Running your React Native application - -### Step 1: Start Metro - -[**Metro**](https://facebook.github.io/metro/) is the JavaScript build tool for React Native. To start the Metro development server, run the following from your project folder: - - - - -```shell -npm start -``` - - - - -```shell -yarn start -``` - - - - -:::note -If you're familiar with web development, Metro is similar to bundlers such as Vite and webpack, but is designed end-to-end for React Native. For instance, Metro uses [Babel](https://babel.dev/) to transform syntax such as JSX into executable JavaScript. -::: - -### Step 2: Start your application - -Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following: - - - - -```shell -npm run ios -``` - - - - -```shell -yarn ios -``` - - - - -You should see your new app running in the iOS Simulator shortly. - -![AwesomeProject on iOS](/docs/assets/GettingStartediOSSuccess.png) - -This is one way to run your app. You can also run it directly from within Xcode. - -> If you can't get this to work, see the [Troubleshooting](troubleshooting.md) page. - -### Running on a device - -The above command will automatically run your app on the iOS Simulator by default. If you want to run the app on an actual physical iOS device, please follow the instructions [here](running-on-device.md). - -### Modifying your app - -Now that you have successfully run the app, let's modify it. - -- Open `App.tsx` in your text editor of choice and edit some lines. -- Hit Cmd ⌘ + R in your iOS Simulator to reload the app and see your changes! - -### That's it! - -Congratulations! You've successfully run and modified your first React Native app. - -
- ## Now what? -- If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md). +Now, it's time to run your app. -If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started). +Run Your React Native Application diff --git a/website/versioned_docs/version-0.73/_getting-started-windows-android.md b/website/versioned_docs/version-0.73/_getting-started-windows-android.md index 390e9bf406d..5b8ca7fe12c 100644 --- a/website/versioned_docs/version-0.73/_getting-started-windows-android.md +++ b/website/versioned_docs/version-0.73/_getting-started-windows-android.md @@ -1,5 +1,5 @@ import RemoveGlobalCLI from './\_remove-global-cli.md'; -import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; +import BoxLink from '@site/src/theme/BoxLink';

Installing dependencies

@@ -151,79 +151,10 @@ If you have recently installed Android Studio, you will likely need to [create a > If you don't have HAXM installed, click on "Install HAXM" or follow [these instructions](https://github.com/intel/haxm/wiki/Installation-Instructions-on-Windows) to set it up, then go back to the AVD Manager. -Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it, then proceed to the next step. +Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it. -

Running your React Native application

+## Now what? -

Step 1: Start Metro

+Now, it's time to run your app. -[**Metro**](https://facebook.github.io/metro/) is the JavaScript build tool for React Native. To start the Metro development server, run the following from your project folder: - - - - -```shell -npm start -``` - - - - -```shell -yarn start -``` - - - - -:::note -If you're familiar with web development, Metro is similar to bundlers such as Vite and webpack, but is designed end-to-end for React Native. For instance, Metro uses [Babel](https://babel.dev/) to transform syntax such as JSX into executable JavaScript. -::: - -

Step 2: Start your application

- -Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following: - - - - -```shell -npm run android -``` - - - - -```shell -yarn android -``` - - - - -If everything is set up correctly, you should see your new app running in your Android emulator shortly. - -![AwesomeProject on Android](/docs/assets/GettingStartedAndroidSuccessWindows.png) - -This is one way to run your app - you can also run it directly from within Android Studio. - -> If you can't get this to work, see the [Troubleshooting](troubleshooting.md) page. - -

Modifying your app

- -Now that you have successfully run the app, let's modify it. - -- Open `App.tsx` in your text editor of choice and edit some lines. -- Press the R key twice or select `Reload` from the Dev Menu (Ctrl + M) to see your changes! - -

That's it!

- -Congratulations! You've successfully run and modified your first React Native app. - -
- -

Now what?

- -- If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md). - -If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started). +Run Your React Native Application diff --git a/website/versioned_docs/version-0.73/_integration-with-existing-apps-java.md b/website/versioned_docs/version-0.73/_integration-with-existing-apps-java.md index d198147ba47..3c6af29a9f0 100644 --- a/website/versioned_docs/version-0.73/_integration-with-existing-apps-java.md +++ b/website/versioned_docs/version-0.73/_integration-with-existing-apps-java.md @@ -12,7 +12,7 @@ The keys to integrating React Native components into your Android application ar ## Prerequisites -Follow the React Native CLI Quickstart in the [environment setup guide](environment-setup) to configure your development environment for building React Native apps for Android. +Follow the guide on using [React Native without a framework](get-started-without-a-framework) to configure your development environment for building React Native apps for Android. ### 1. Set up directory structure diff --git a/website/versioned_docs/version-0.73/_integration-with-existing-apps-kotlin.md b/website/versioned_docs/version-0.73/_integration-with-existing-apps-kotlin.md index 787de1b7812..43132b706df 100644 --- a/website/versioned_docs/version-0.73/_integration-with-existing-apps-kotlin.md +++ b/website/versioned_docs/version-0.73/_integration-with-existing-apps-kotlin.md @@ -12,7 +12,7 @@ The keys to integrating React Native components into your Android application ar ## Prerequisites -Follow the React Native CLI Quickstart in the [environment setup guide](environment-setup) to configure your development environment for building React Native apps for Android. +Follow the guide on using [React Native without a framework](get-started-without-a-framework) to configure your development environment for building React Native apps for Android. ### 1. Set up directory structure diff --git a/website/versioned_docs/version-0.73/_integration-with-existing-apps-objc.md b/website/versioned_docs/version-0.73/_integration-with-existing-apps-objc.md index a361d981b00..9ed23cf31a2 100644 --- a/website/versioned_docs/version-0.73/_integration-with-existing-apps-objc.md +++ b/website/versioned_docs/version-0.73/_integration-with-existing-apps-objc.md @@ -14,7 +14,7 @@ The keys to integrating React Native components into your iOS application are to ## Prerequisites -Follow the React Native CLI Quickstart in the [environment setup guide](environment-setup) to configure your development environment for building React Native apps for iOS. +Follow the guide on using [React Native without a framework](get-started-without-a-framework) to configure your development environment for building React Native apps for iOS. ### 1. Set up directory structure diff --git a/website/versioned_docs/version-0.73/_integration-with-existing-apps-swift.md b/website/versioned_docs/version-0.73/_integration-with-existing-apps-swift.md index b1dbd0c05fd..59d1daf324b 100644 --- a/website/versioned_docs/version-0.73/_integration-with-existing-apps-swift.md +++ b/website/versioned_docs/version-0.73/_integration-with-existing-apps-swift.md @@ -14,7 +14,7 @@ The keys to integrating React Native components into your iOS application are to ## Prerequisites -Follow the React Native CLI Quickstart in the [environment setup guide](environment-setup) to configure your development environment for building React Native apps for iOS. +Follow the guide on using [React Native without a framework](get-started-without-a-framework) to configure your development environment for building React Native apps for iOS. ### 1. Set up directory structure diff --git a/website/versioned_docs/version-0.73/get-started-without-a-framework.md b/website/versioned_docs/version-0.73/get-started-without-a-framework.md new file mode 100644 index 00000000000..df5f3acccde --- /dev/null +++ b/website/versioned_docs/version-0.73/get-started-without-a-framework.md @@ -0,0 +1,97 @@ +--- +id: get-started-without-a-framework +title: Get Started Without a Framework +hide_table_of_contents: true +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import constants from '@site/core/TabsConstants'; + +import GuideLinuxAndroid from './\_getting-started-linux-android.md'; +import GuideMacOSAndroid from './\_getting-started-macos-android.md'; +import GuideWindowsAndroid from './\_getting-started-windows-android.md'; +import GuideMacOSIOS from './\_getting-started-macos-ios.md'; + +If you have constraints that are not served well by a Framework, or you prefer to write your own Framework, you can create a React Native app without using a Framework. + +:::note +This guide requires Android Studio or Xcode. If you already have one of these programs installed, you should be able to get up and running within a few minutes. If they are not installed, you should expect to spend about an hour installing and configuring them. +::: + +The instructions are a bit different depending on your operating system, and whether you want to start developing for iOS or Android. If you want to develop for both Android and iOS, that's fine - you can pick one to start with, since the setup is a bit different. + +#### Development OS + + + + +#### Target OS + + + + +[//]: # 'macOS, Android' + + + + + + +[//]: # 'macOS, iOS' + + + + + + + + + +#### Target OS + + + + +[//]: # 'Windows, Android' + + + + + + +[//]: # 'Windows, iOS' + +## Unsupported + +> A Mac is required to build projects with native code for iOS. You can follow the **Expo Go Quickstart** to learn how to build your app using Expo instead. + + + + + + + +#### Target OS + + + + +[//]: # 'Linux, Android' + + + + + + +[//]: # 'Linux, iOS' + +## Unsupported + +> A Mac is required to build projects with native code for iOS. You can follow the **Expo Go Quickstart** to learn how to build your app using Expo instead. + + + + + + diff --git a/website/versioned_docs/version-0.73/get-started.md b/website/versioned_docs/version-0.73/get-started.md new file mode 100644 index 00000000000..e9f0689497e --- /dev/null +++ b/website/versioned_docs/version-0.73/get-started.md @@ -0,0 +1,46 @@ +--- +id: get-started +title: Get Started with React Native +hide_table_of_contents: true +--- + +import BoxLink from '@site/src/theme/BoxLink'; + +**React Native allows developers who know React to create genuine native apps. At the same time, native developers can use React Native to gain parity between native platforms by writing common features once.** + +We believe that the best way to experience React Native is through a Framework, a toolbox with all the necessaries APIs to let you build production ready apps. + +You can also use React Native without a Framework, however we’ve found that most developers benefit from using a React Native Framework like Expo. Expo provides features like file-based routing, high quality universal libraries, and the ability to write plugins that modify native code without having to manage native files. + +
+Can I use React Native without a Framework? + +Yes. You can use React Native without a Framework. **However, if you’re building a new app with React Native, we recommend using a Framework.** + +In short, you’ll be able to spend time writing your app instead of writing an entire Framework yourself in addition to your app. + +The React Native community has spent years refining approaches to navigation, accessing native APIs, dealing with native dependencies, and more. Most apps need these core features. A React Native Framework provides them from the start of your app. + +Without a Framework, you’ll either have to write your own solutions to implement core features, or you’ll have to piece together a collection of pre-existing libraries to create a skeleton of a Framework. This takes real work, both when starting your app, then later when maintaining it. + +If your app has unusual constraints that are not served well by a Framework, or you prefer to solve these problems yourself, you can make a React Native app without a Framework using Android Studio, Xcode, and React Native CLI. If you’re interested in this path, [learn how to get started](get-started-without-a-framework). + +
+ +## Start a new React Native project with Expo + +Expo is a production-grade React Native Framework. Expo provides developer tooling that makes developing apps easier, such as file-based routing, a standard library of native modules, and much more. + +Expo's Framework is open source and free, with an active community on [GitHub](https://github.com/expo) and [Discord](https://chat.expo.dev). + +The team behind Expo also provides Expo Application Services (EAS), an optional set of services that complements the Framework in each step of the development process. + +To create a new Expo project, run the following in your terminal: + +```shell +npx create-expo-app@latest +``` + +Once you’ve created your app, check out the rest of Expo’s getting started guide to start developing your app. + +Continue with Expo diff --git a/website/versioned_docs/version-0.73/getting-started.md b/website/versioned_docs/version-0.73/getting-started.md deleted file mode 100644 index 5e18d3a110d..00000000000 --- a/website/versioned_docs/version-0.73/getting-started.md +++ /dev/null @@ -1,205 +0,0 @@ ---- -id: environment-setup -title: Get Started with React Native -hide_table_of_contents: true ---- - -import ExternalLink from '@site/src/theme/ExternalLink'; - -**React Native allows developers who know React to create genuine native apps. At the same time, native developers can use React Native to gain parity between native platforms by writing common features once.** - -We believe that the best way to experience React Native is through a Framework, a toolbox with all the necessaries APIs to let you build production ready apps. - -You can also use React Native without a Framework, however we’ve found that most developers benefit from using a React Native Framework like Expo. Expo provides features like file-based routing, high quality universal libraries, and the ability to write plugins that modify native code without having to manage native files. - -
-Can I use React Native without a Framework? - -Yes. You can use React Native without a Framework. **However, if you’re building a new app with React Native, we recommend using a Framework.** - -In short, you’ll be able to spend time writing your app instead of writing an entire Framework yourself in addition to your app. - -The React Native community has spent years refining approaches to navigation, accessing native APIs, dealing with native dependencies, and more. Most apps need these core features. A React Native Framework provides them from the start of your app. - -Without a Framework, you’ll either have to write your own solutions to implement core features, or you’ll have to piece together a collection of pre-existing libraries to create a skeleton of a Framework. This takes real work, both when starting your app, then later when maintaining it. - -If your app has unusual constraints that are not served well by a Framework, or you prefer to solve these problems yourself, you can make a React Native app without a Framework using Android Studio, Xcode, and React Native CLI. If you’re interested in this path, [learn how to get started](#TODO). - -
- -## Start a new React Native project with Expo - -Expo is a production-grade React Native Framework. Expo provides developer tooling that makes developing apps easier, such as file-based routing, a standard library of native modules, and much more. - -Expo's Framework is open source and free, with an active community on [GitHub](https://github.com/expo) and [Discord](https://chat.expo.dev). - -The team behind Expo also provides Expo Application Services (EAS), an optional set of services that complements the Framework in each step of the development process. - -To create a new Expo project, run the following in your terminal: - -```shell -npx create-expo-app@latest -``` - -Once you’ve created your app, check out the rest of Expo’s getting started guide to start developing your app. - -Continue with Expo - - diff --git a/website/versioned_docs/version-0.73/introduction.md b/website/versioned_docs/version-0.73/introduction.md index 0122df1b2d4..1e49814bcab 100644 --- a/website/versioned_docs/version-0.73/introduction.md +++ b/website/versioned_docs/version-0.73/introduction.md @@ -1,5 +1,5 @@ --- -id: getting-started +id: introduction title: Introduction description: This helpful guide lays out the prerequisites for learning React Native, using these docs, and setting up your environment. --- @@ -7,7 +7,7 @@ description: This helpful guide lays out the prerequisites for learning React Na import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
- Welcome to the very start of your React Native journey! If you're looking for environment setup instructions, they've moved to their own section. Continue reading for an introduction to the documentation, Native Components, React, and more! + Welcome to the very start of your React Native journey! If you're looking for how to get started, they've moved to their own section. Continue reading for an introduction to the documentation, Native Components, React, and more!
@@ -49,7 +49,7 @@ export default YourApp; The above is a Snack Player. It’s a handy tool created by Expo to embed and run React Native projects and share how they render in platforms like Android and iOS. The code is live and editable, so you can play directly with it in your browser. Go ahead and try changing the "Try editing me!" text above to "Hello, world!" -> Optionally, if you want to setup a local development environment, [you can follow our guide to setting up your environment on your local machine](environment-setup) and paste the code examples into your `App.js` file there. (If you are a web developer, you may already have a local environment set up for mobile browser testing!) +> Optionally, if you want to set up a local development environment, [you can follow our guide to setting up your environment on your local machine](get-started) and paste the code examples into your project. (If you are a web developer, you may already have a local environment set up for mobile browser testing!) ## Developer Notes diff --git a/website/versioned_docs/version-0.73/more-resources.md b/website/versioned_docs/version-0.73/more-resources.md index e2f26e8f877..303cf2d66a8 100644 --- a/website/versioned_docs/version-0.73/more-resources.md +++ b/website/versioned_docs/version-0.73/more-resources.md @@ -7,7 +7,7 @@ There’s always more to learn: developer workflows, shipping to app stores, int ## Where to go from here -- [Set up your environment](environment-setup) +- [Get started with React Native](get-started) - [Set up your development workflow](running-on-device) - [Design and layout your app](flexbox) - [Debug your app](debugging) diff --git a/website/versioned_docs/version-0.73/running-on-device.md b/website/versioned_docs/version-0.73/running-on-device.md index 01175add366..f6dfcbab2ea 100644 --- a/website/versioned_docs/version-0.73/running-on-device.md +++ b/website/versioned_docs/version-0.73/running-on-device.md @@ -421,14 +421,14 @@ You have built a great app using React Native, and you are now itching to releas [//]: # 'Windows, iOS' -> A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to our [environment setup guide](environment-setup) to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app. +> A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to our [get started](get-started) guide to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo Go app. [//]: # 'Linux, iOS' -> A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to our [environment setup guide](environment-setup) to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app. +> A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to our [get started](get-started) guide to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo Go app. diff --git a/website/versioned_docs/version-0.73/running-your-application.md b/website/versioned_docs/version-0.73/running-your-application.md new file mode 100644 index 00000000000..772cf3e5023 --- /dev/null +++ b/website/versioned_docs/version-0.73/running-your-application.md @@ -0,0 +1,80 @@ +--- +id: running-your-application +title: Running Your React Native Application +hide_table_of_contents: true +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import constants from '@site/core/TabsConstants'; + +### Step 1: Start Metro + +[**Metro**](https://metrobundler.dev/) is the JavaScript build tool for React Native. To start the Metro development server, run the following from your project folder: + + + + +```shell +npm start +``` + + + + +```shell +yarn start +``` + + + + +:::note +If you're familiar with web development, Metro is similar to bundlers such as Vite and webpack, but is designed end-to-end for React Native. For instance, Metro uses [Babel](https://babel.dev/) to transform syntax such as JSX into executable JavaScript. +::: + +### Step 2: Start your application + +Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following: + + + + +```shell +npm run android +``` + + + + +```shell +yarn android +``` + + + + +If everything is set up correctly, you should see your new app running in your Android emulator shortly. + +This is one way to run your app - you can also run it directly from within Android Studio. + +> If you can't get this to work, see the [Troubleshooting](troubleshooting.md) page. + +### Modifying your app + +Now that you have successfully run the app, let's modify it. + +- Open `App.tsx` in your text editor of choice and edit some lines. +- Press the R key twice or select `Reload` from the Dev Menu (Ctrl + M) to see your changes! + +### That's it! + +Congratulations! You've successfully run and modified your first React Native app. + +
+ +### Now what? + +- If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md). + +If you're curious to learn more about React Native, check out the [Introduction to React Native](introduction). diff --git a/website/versioned_docs/version-0.73/typescript.md b/website/versioned_docs/version-0.73/typescript.md index 3c791b3ff36..391c1eaee9d 100644 --- a/website/versioned_docs/version-0.73/typescript.md +++ b/website/versioned_docs/version-0.73/typescript.md @@ -9,7 +9,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con ## Getting Started with TypeScript -New projects created by the [React Native CLI](/docs/environment-setup#creating-a-new-application) or popular templates like [Ignite][ignite] will use TypeScript by default. +New projects created by the [React Native CLI](/docs/get-started-without-a-framework?os=macos&platform=ios#creating-a-new-application) or popular templates like [Ignite][ignite] will use TypeScript by default. TypeScript may also be used with [Expo][expo], which maintains TypeScript templates, or will prompt you to automatically install and configure TypeScript when a `.ts` or `.tsx` file is added to your project. diff --git a/website/versioned_sidebars/version-0.73-sidebars.json b/website/versioned_sidebars/version-0.73-sidebars.json index 4ea087ec988..ec7e1807e7f 100644 --- a/website/versioned_sidebars/version-0.73-sidebars.json +++ b/website/versioned_sidebars/version-0.73-sidebars.json @@ -13,6 +13,7 @@ ], "Environment setup": [ "environment-setup", + "get-started-without-a-framework", "integration-with-existing-apps", "integration-with-android-fragment", "building-for-tv", From ac1bfb495a36f6144c2479c4029864fa35cf9072 Mon Sep 17 00:00:00 2001 From: Jon Samp Date: Sun, 14 Apr 2024 00:05:55 -0500 Subject: [PATCH 03/20] adds platform support --- website/src/theme/Badge/index.js | 18 +++++++++ website/src/theme/Badge/styles.module.css | 18 +++++++++ website/src/theme/Icon/Android/index.js | 36 +++++++++++++++++ website/src/theme/Icon/Apple/index.js | 24 ++++++++++++ website/src/theme/Icon/TV/index.js | 39 +++++++++++++++++++ website/src/theme/Icon/Web/index.js | 39 +++++++++++++++++++ website/src/theme/PlatformSupport/index.js | 31 +++++++++++++++ .../theme/PlatformSupport/styles.module.css | 23 +++++++++++ .../version-0.73/get-started.md | 3 ++ 9 files changed, 231 insertions(+) create mode 100644 website/src/theme/Badge/index.js create mode 100644 website/src/theme/Badge/styles.module.css create mode 100644 website/src/theme/Icon/Android/index.js create mode 100644 website/src/theme/Icon/Apple/index.js create mode 100644 website/src/theme/Icon/TV/index.js create mode 100644 website/src/theme/Icon/Web/index.js create mode 100644 website/src/theme/PlatformSupport/index.js create mode 100644 website/src/theme/PlatformSupport/styles.module.css diff --git a/website/src/theme/Badge/index.js b/website/src/theme/Badge/index.js new file mode 100644 index 00000000000..6c88272a42e --- /dev/null +++ b/website/src/theme/Badge/index.js @@ -0,0 +1,18 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React from 'react'; +import styles from './styles.module.css'; + +export default function Badge({icon, title}) { + return ( +
+ {icon} + {title} +
+ ); +} diff --git a/website/src/theme/Badge/styles.module.css b/website/src/theme/Badge/styles.module.css new file mode 100644 index 00000000000..66367117a3c --- /dev/null +++ b/website/src/theme/Badge/styles.module.css @@ -0,0 +1,18 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +.container { + display: inline-flex; + align-items: center; + padding: 0.15rem 0.75rem; + gap: 0.25rem; + border: 1px solid var(--ifm-color-gray-600); + border-radius: 99rem; + font-size: 0.875rem; + font-weight: 500; + color: var(--ifm-color-gray-800); +} diff --git a/website/src/theme/Icon/Android/index.js b/website/src/theme/Icon/Android/index.js new file mode 100644 index 00000000000..e9c9586ea8c --- /dev/null +++ b/website/src/theme/Icon/Android/index.js @@ -0,0 +1,36 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React from 'react'; + +export default function Android() { + return ( + + + + + + + + + + + ); +} diff --git a/website/src/theme/Icon/Apple/index.js b/website/src/theme/Icon/Apple/index.js new file mode 100644 index 00000000000..39f55180853 --- /dev/null +++ b/website/src/theme/Icon/Apple/index.js @@ -0,0 +1,24 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React from 'react'; + +export default function Apple() { + return ( + + + + ); +} diff --git a/website/src/theme/Icon/TV/index.js b/website/src/theme/Icon/TV/index.js new file mode 100644 index 00000000000..8241f11a0c1 --- /dev/null +++ b/website/src/theme/Icon/TV/index.js @@ -0,0 +1,39 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React from 'react'; + +export default function TV() { + return ( + + + + + + + + + + + ); +} diff --git a/website/src/theme/Icon/Web/index.js b/website/src/theme/Icon/Web/index.js new file mode 100644 index 00000000000..fb76eabc131 --- /dev/null +++ b/website/src/theme/Icon/Web/index.js @@ -0,0 +1,39 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React from 'react'; + +export default function Web() { + return ( + + + + + + + + + + + ); +} diff --git a/website/src/theme/PlatformSupport/index.js b/website/src/theme/PlatformSupport/index.js new file mode 100644 index 00000000000..07273c7a304 --- /dev/null +++ b/website/src/theme/PlatformSupport/index.js @@ -0,0 +1,31 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React from 'react'; +import styles from './styles.module.css'; + +import Badge from '@site/src/theme/Badge'; +import Android from '@site/src/theme/Icon/Android'; +import Apple from '@site/src/theme/Icon/Apple'; +import TV from '@site/src/theme/Icon/TV'; +import Web from '@site/src/theme/Icon/Web'; + +export default function PlatformSupport({platforms}) { + return ( +
+ Platform support +
+ {platforms.includes('android') && ( + } title="Android" /> + )} + {platforms.includes('ios') && } title="iOS" />} + {platforms.includes('tv') && } title="TV" />} + {platforms.includes('web') && } title="Web" />} +
+
+ ); +} diff --git a/website/src/theme/PlatformSupport/styles.module.css b/website/src/theme/PlatformSupport/styles.module.css new file mode 100644 index 00000000000..b97ba90b1ca --- /dev/null +++ b/website/src/theme/PlatformSupport/styles.module.css @@ -0,0 +1,23 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +.container { + display: flex; + flex-direction: column; + gap: 0.5rem; + margin-bottom: 1.5rem; +} + +.title { + font-weight: 600; +} + +.badgeContainer { + display: flex; + gap: 0.5rem; + flex-wrap: wrap; +} diff --git a/website/versioned_docs/version-0.73/get-started.md b/website/versioned_docs/version-0.73/get-started.md index e9f0689497e..6f7b42a9e37 100644 --- a/website/versioned_docs/version-0.73/get-started.md +++ b/website/versioned_docs/version-0.73/get-started.md @@ -4,6 +4,7 @@ title: Get Started with React Native hide_table_of_contents: true --- +import PlatformSupport from '@site/src/theme/PlatformSupport'; import BoxLink from '@site/src/theme/BoxLink'; **React Native allows developers who know React to create genuine native apps. At the same time, native developers can use React Native to gain parity between native platforms by writing common features once.** @@ -29,6 +30,8 @@ If your app has unusual constraints that are not served well by a Framework, or ## Start a new React Native project with Expo + + Expo is a production-grade React Native Framework. Expo provides developer tooling that makes developing apps easier, such as file-based routing, a standard library of native modules, and much more. Expo's Framework is open source and free, with an active community on [GitHub](https://github.com/expo) and [Discord](https://chat.expo.dev). From 628f2fbb898f4470d9bc559b95632c292ccf66de Mon Sep 17 00:00:00 2001 From: Jon Samp Date: Sun, 14 Apr 2024 00:09:15 -0500 Subject: [PATCH 04/20] updates 0.73 sidebar --- website/versioned_sidebars/version-0.73-sidebars.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/website/versioned_sidebars/version-0.73-sidebars.json b/website/versioned_sidebars/version-0.73-sidebars.json index ec7e1807e7f..2c352d64785 100644 --- a/website/versioned_sidebars/version-0.73-sidebars.json +++ b/website/versioned_sidebars/version-0.73-sidebars.json @@ -1,7 +1,7 @@ { "docs": { "The Basics": [ - "getting-started", + "introduction", "intro-react-native-components", "intro-react", "handling-text-input", @@ -12,7 +12,7 @@ "more-resources" ], "Environment setup": [ - "environment-setup", + "get-started", "get-started-without-a-framework", "integration-with-existing-apps", "integration-with-android-fragment", From 440f46a74be915c0365322968676362e1ee333b8 Mon Sep 17 00:00:00 2001 From: Jon Samp Date: Sun, 14 Apr 2024 00:19:05 -0500 Subject: [PATCH 05/20] remove redirects --- website/src/pages/index.js | 4 ++-- website/static/_redirects | 4 ---- .../version-0.73/{get-started.md => environment-setup.md} | 2 +- .../version-0.73/{introduction.md => getting-started.md} | 4 ++-- website/versioned_docs/version-0.73/more-resources.md | 2 +- website/versioned_docs/version-0.73/running-on-device.md | 4 ++-- .../versioned_docs/version-0.73/running-your-application.md | 2 +- website/versioned_sidebars/version-0.73-sidebars.json | 4 ++-- 8 files changed, 11 insertions(+), 15 deletions(-) rename website/versioned_docs/version-0.73/{get-started.md => environment-setup.md} (99%) rename website/versioned_docs/version-0.73/{introduction.md => getting-started.md} (94%) diff --git a/website/src/pages/index.js b/website/src/pages/index.js index 6d403e733a4..84efede89fd 100644 --- a/website/src/pages/index.js +++ b/website/src/pages/index.js @@ -115,13 +115,13 @@ function HomeCallToAction() { <> Get started Learn the basics diff --git a/website/static/_redirects b/website/static/_redirects index a97cfb33c4e..7de024c60fb 100644 --- a/website/static/_redirects +++ b/website/static/_redirects @@ -14,10 +14,6 @@ /contributing/how-to-contribute /contributing/overview /releases/release-candidate-minor /releases/release-branch-cut-and-rc0 -# Redirect to new getting started docs -/docs/getting-started /docs/introduction -/docs/environment-setup /docs/get-started - # Redirect New Architecture docs of all versions # Note: We had to delete the older versions to get redirects to work /docs/the-new-architecture/why /docs/next/the-new-architecture/landing-page diff --git a/website/versioned_docs/version-0.73/get-started.md b/website/versioned_docs/version-0.73/environment-setup.md similarity index 99% rename from website/versioned_docs/version-0.73/get-started.md rename to website/versioned_docs/version-0.73/environment-setup.md index 6f7b42a9e37..7db85534747 100644 --- a/website/versioned_docs/version-0.73/get-started.md +++ b/website/versioned_docs/version-0.73/environment-setup.md @@ -1,5 +1,5 @@ --- -id: get-started +id: environment-setup title: Get Started with React Native hide_table_of_contents: true --- diff --git a/website/versioned_docs/version-0.73/introduction.md b/website/versioned_docs/version-0.73/getting-started.md similarity index 94% rename from website/versioned_docs/version-0.73/introduction.md rename to website/versioned_docs/version-0.73/getting-started.md index 1e49814bcab..728c8ba2d00 100644 --- a/website/versioned_docs/version-0.73/introduction.md +++ b/website/versioned_docs/version-0.73/getting-started.md @@ -1,5 +1,5 @@ --- -id: introduction +id: getting-started title: Introduction description: This helpful guide lays out the prerequisites for learning React Native, using these docs, and setting up your environment. --- @@ -49,7 +49,7 @@ export default YourApp; The above is a Snack Player. It’s a handy tool created by Expo to embed and run React Native projects and share how they render in platforms like Android and iOS. The code is live and editable, so you can play directly with it in your browser. Go ahead and try changing the "Try editing me!" text above to "Hello, world!" -> Optionally, if you want to set up a local development environment, [you can follow our guide to setting up your environment on your local machine](get-started) and paste the code examples into your project. (If you are a web developer, you may already have a local environment set up for mobile browser testing!) +> Optionally, if you want to set up a local development environment, [you can follow our guide to setting up your environment on your local machine](environment-setup) and paste the code examples into your project. (If you are a web developer, you may already have a local environment set up for mobile browser testing!) ## Developer Notes diff --git a/website/versioned_docs/version-0.73/more-resources.md b/website/versioned_docs/version-0.73/more-resources.md index 303cf2d66a8..4738e7a73df 100644 --- a/website/versioned_docs/version-0.73/more-resources.md +++ b/website/versioned_docs/version-0.73/more-resources.md @@ -7,7 +7,7 @@ There’s always more to learn: developer workflows, shipping to app stores, int ## Where to go from here -- [Get started with React Native](get-started) +- [Get started with React Native](environment-setup) - [Set up your development workflow](running-on-device) - [Design and layout your app](flexbox) - [Debug your app](debugging) diff --git a/website/versioned_docs/version-0.73/running-on-device.md b/website/versioned_docs/version-0.73/running-on-device.md index f6dfcbab2ea..338474297fa 100644 --- a/website/versioned_docs/version-0.73/running-on-device.md +++ b/website/versioned_docs/version-0.73/running-on-device.md @@ -421,14 +421,14 @@ You have built a great app using React Native, and you are now itching to releas [//]: # 'Windows, iOS' -> A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to our [get started](get-started) guide to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo Go app. +> A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to our [get started](environment-setup) guide to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo Go app. [//]: # 'Linux, iOS' -> A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to our [get started](get-started) guide to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo Go app. +> A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to our [get started](environment-setup) guide to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo Go app. diff --git a/website/versioned_docs/version-0.73/running-your-application.md b/website/versioned_docs/version-0.73/running-your-application.md index 772cf3e5023..03864232391 100644 --- a/website/versioned_docs/version-0.73/running-your-application.md +++ b/website/versioned_docs/version-0.73/running-your-application.md @@ -77,4 +77,4 @@ Congratulations! You've successfully run and modified your first React Native ap - If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md). -If you're curious to learn more about React Native, check out the [Introduction to React Native](introduction). +If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started). diff --git a/website/versioned_sidebars/version-0.73-sidebars.json b/website/versioned_sidebars/version-0.73-sidebars.json index 2c352d64785..ec7e1807e7f 100644 --- a/website/versioned_sidebars/version-0.73-sidebars.json +++ b/website/versioned_sidebars/version-0.73-sidebars.json @@ -1,7 +1,7 @@ { "docs": { "The Basics": [ - "introduction", + "getting-started", "intro-react-native-components", "intro-react", "handling-text-input", @@ -12,7 +12,7 @@ "more-resources" ], "Environment setup": [ - "get-started", + "environment-setup", "get-started-without-a-framework", "integration-with-existing-apps", "integration-with-android-fragment", From 4ffdbcaa6a90c771395dee21ce1c95038a32d16f Mon Sep 17 00:00:00 2001 From: Jon Samp Date: Sun, 14 Apr 2024 00:59:41 -0500 Subject: [PATCH 06/20] revert unneeded changes --- .../version-0.73/environment-setup.md | 49 ----------- .../version-0.73/getting-started.md | 88 ++++++------------- .../version-0.73/introduction.md | 83 +++++++++++++++++ .../version-0.73/more-resources.md | 2 +- .../version-0.73/running-on-device.md | 4 +- 5 files changed, 113 insertions(+), 113 deletions(-) delete mode 100644 website/versioned_docs/version-0.73/environment-setup.md create mode 100644 website/versioned_docs/version-0.73/introduction.md diff --git a/website/versioned_docs/version-0.73/environment-setup.md b/website/versioned_docs/version-0.73/environment-setup.md deleted file mode 100644 index 7db85534747..00000000000 --- a/website/versioned_docs/version-0.73/environment-setup.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -id: environment-setup -title: Get Started with React Native -hide_table_of_contents: true ---- - -import PlatformSupport from '@site/src/theme/PlatformSupport'; -import BoxLink from '@site/src/theme/BoxLink'; - -**React Native allows developers who know React to create genuine native apps. At the same time, native developers can use React Native to gain parity between native platforms by writing common features once.** - -We believe that the best way to experience React Native is through a Framework, a toolbox with all the necessaries APIs to let you build production ready apps. - -You can also use React Native without a Framework, however we’ve found that most developers benefit from using a React Native Framework like Expo. Expo provides features like file-based routing, high quality universal libraries, and the ability to write plugins that modify native code without having to manage native files. - -
-Can I use React Native without a Framework? - -Yes. You can use React Native without a Framework. **However, if you’re building a new app with React Native, we recommend using a Framework.** - -In short, you’ll be able to spend time writing your app instead of writing an entire Framework yourself in addition to your app. - -The React Native community has spent years refining approaches to navigation, accessing native APIs, dealing with native dependencies, and more. Most apps need these core features. A React Native Framework provides them from the start of your app. - -Without a Framework, you’ll either have to write your own solutions to implement core features, or you’ll have to piece together a collection of pre-existing libraries to create a skeleton of a Framework. This takes real work, both when starting your app, then later when maintaining it. - -If your app has unusual constraints that are not served well by a Framework, or you prefer to solve these problems yourself, you can make a React Native app without a Framework using Android Studio, Xcode, and React Native CLI. If you’re interested in this path, [learn how to get started](get-started-without-a-framework). - -
- -## Start a new React Native project with Expo - - - -Expo is a production-grade React Native Framework. Expo provides developer tooling that makes developing apps easier, such as file-based routing, a standard library of native modules, and much more. - -Expo's Framework is open source and free, with an active community on [GitHub](https://github.com/expo) and [Discord](https://chat.expo.dev). - -The team behind Expo also provides Expo Application Services (EAS), an optional set of services that complements the Framework in each step of the development process. - -To create a new Expo project, run the following in your terminal: - -```shell -npx create-expo-app@latest -``` - -Once you’ve created your app, check out the rest of Expo’s getting started guide to start developing your app. - -Continue with Expo diff --git a/website/versioned_docs/version-0.73/getting-started.md b/website/versioned_docs/version-0.73/getting-started.md index 728c8ba2d00..7db85534747 100644 --- a/website/versioned_docs/version-0.73/getting-started.md +++ b/website/versioned_docs/version-0.73/getting-started.md @@ -1,83 +1,49 @@ --- -id: getting-started -title: Introduction -description: This helpful guide lays out the prerequisites for learning React Native, using these docs, and setting up your environment. +id: environment-setup +title: Get Started with React Native +hide_table_of_contents: true --- -import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; +import PlatformSupport from '@site/src/theme/PlatformSupport'; +import BoxLink from '@site/src/theme/BoxLink'; -
- Welcome to the very start of your React Native journey! If you're looking for how to get started, they've moved to their own section. Continue reading for an introduction to the documentation, Native Components, React, and more! - -
+**React Native allows developers who know React to create genuine native apps. At the same time, native developers can use React Native to gain parity between native platforms by writing common features once.** -Many different kinds of people use React Native: from advanced iOS developers to React beginners, to people getting started programming for the first time in their career. These docs were written for all learners, no matter their experience level or background. +We believe that the best way to experience React Native is through a Framework, a toolbox with all the necessaries APIs to let you build production ready apps. -## How to use these docs +You can also use React Native without a Framework, however we’ve found that most developers benefit from using a React Native Framework like Expo. Expo provides features like file-based routing, high quality universal libraries, and the ability to write plugins that modify native code without having to manage native files. -You can start here and read through these docs linearly like a book; or you can read the specific sections you need. Already familiar with React? You can skip [that section](intro-react)—or read it for a light refresher. +
+Can I use React Native without a Framework? -## Prerequisites +Yes. You can use React Native without a Framework. **However, if you’re building a new app with React Native, we recommend using a Framework.** -To work with React Native, you will need to have an understanding of JavaScript fundamentals. If you’re new to JavaScript or need a refresher, you can [dive in](https://developer.mozilla.org/en-US/docs/Web/JavaScript) or [brush up](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) at Mozilla Developer Network. +In short, you’ll be able to spend time writing your app instead of writing an entire Framework yourself in addition to your app. -> While we do our best to assume no prior knowledge of React, Android, or iOS development, these are valuable topics of study for the aspiring React Native developer. Where sensible, we have linked to resources and articles that go more in depth. +The React Native community has spent years refining approaches to navigation, accessing native APIs, dealing with native dependencies, and more. Most apps need these core features. A React Native Framework provides them from the start of your app. -## Interactive examples +Without a Framework, you’ll either have to write your own solutions to implement core features, or you’ll have to piece together a collection of pre-existing libraries to create a skeleton of a Framework. This takes real work, both when starting your app, then later when maintaining it. -This introduction lets you get started immediately in your browser with interactive examples like this one: +If your app has unusual constraints that are not served well by a Framework, or you prefer to solve these problems yourself, you can make a React Native app without a Framework using Android Studio, Xcode, and React Native CLI. If you’re interested in this path, [learn how to get started](get-started-without-a-framework). -```SnackPlayer name=Hello%20World -import React from 'react'; -import {Text, View} from 'react-native'; +
-const YourApp = () => { - return ( - - Try editing me! 🎉 - - ); -}; +## Start a new React Native project with Expo -export default YourApp; -``` - -The above is a Snack Player. It’s a handy tool created by Expo to embed and run React Native projects and share how they render in platforms like Android and iOS. The code is live and editable, so you can play directly with it in your browser. Go ahead and try changing the "Try editing me!" text above to "Hello, world!" - -> Optionally, if you want to set up a local development environment, [you can follow our guide to setting up your environment on your local machine](environment-setup) and paste the code examples into your project. (If you are a web developer, you may already have a local environment set up for mobile browser testing!) - -## Developer Notes - -People from many different development backgrounds are learning React Native. You may have experience with a range of technologies, from web to Android to iOS and more. We try to write for developers from all backgrounds. Sometimes we provide explanations specific to one platform or another like so: - - + - +Expo is a production-grade React Native Framework. Expo provides developer tooling that makes developing apps easier, such as file-based routing, a standard library of native modules, and much more. -> Android developers may be familiar with this concept. +Expo's Framework is open source and free, with an active community on [GitHub](https://github.com/expo) and [Discord](https://chat.expo.dev). - - +The team behind Expo also provides Expo Application Services (EAS), an optional set of services that complements the Framework in each step of the development process. -> iOS developers may be familiar with this concept. +To create a new Expo project, run the following in your terminal: - - - -> Web developers may be familiar with this concept. - - - - -## Formatting - -Menu paths are written in bold and use carets to navigate submenus. Example: **Android Studio > Preferences** +```shell +npx create-expo-app@latest +``` ---- +Once you’ve created your app, check out the rest of Expo’s getting started guide to start developing your app. -Now that you know how this guide works, it's time to get to know the foundation of React Native: [Native Components](intro-react-native-components.md). +Continue with Expo diff --git a/website/versioned_docs/version-0.73/introduction.md b/website/versioned_docs/version-0.73/introduction.md new file mode 100644 index 00000000000..728c8ba2d00 --- /dev/null +++ b/website/versioned_docs/version-0.73/introduction.md @@ -0,0 +1,83 @@ +--- +id: getting-started +title: Introduction +description: This helpful guide lays out the prerequisites for learning React Native, using these docs, and setting up your environment. +--- + +import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; + +
+ Welcome to the very start of your React Native journey! If you're looking for how to get started, they've moved to their own section. Continue reading for an introduction to the documentation, Native Components, React, and more! + +
+ +Many different kinds of people use React Native: from advanced iOS developers to React beginners, to people getting started programming for the first time in their career. These docs were written for all learners, no matter their experience level or background. + +## How to use these docs + +You can start here and read through these docs linearly like a book; or you can read the specific sections you need. Already familiar with React? You can skip [that section](intro-react)—or read it for a light refresher. + +## Prerequisites + +To work with React Native, you will need to have an understanding of JavaScript fundamentals. If you’re new to JavaScript or need a refresher, you can [dive in](https://developer.mozilla.org/en-US/docs/Web/JavaScript) or [brush up](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) at Mozilla Developer Network. + +> While we do our best to assume no prior knowledge of React, Android, or iOS development, these are valuable topics of study for the aspiring React Native developer. Where sensible, we have linked to resources and articles that go more in depth. + +## Interactive examples + +This introduction lets you get started immediately in your browser with interactive examples like this one: + +```SnackPlayer name=Hello%20World +import React from 'react'; +import {Text, View} from 'react-native'; + +const YourApp = () => { + return ( + + Try editing me! 🎉 + + ); +}; + +export default YourApp; +``` + +The above is a Snack Player. It’s a handy tool created by Expo to embed and run React Native projects and share how they render in platforms like Android and iOS. The code is live and editable, so you can play directly with it in your browser. Go ahead and try changing the "Try editing me!" text above to "Hello, world!" + +> Optionally, if you want to set up a local development environment, [you can follow our guide to setting up your environment on your local machine](environment-setup) and paste the code examples into your project. (If you are a web developer, you may already have a local environment set up for mobile browser testing!) + +## Developer Notes + +People from many different development backgrounds are learning React Native. You may have experience with a range of technologies, from web to Android to iOS and more. We try to write for developers from all backgrounds. Sometimes we provide explanations specific to one platform or another like so: + + + + + +> Android developers may be familiar with this concept. + + + + +> iOS developers may be familiar with this concept. + + + + +> Web developers may be familiar with this concept. + + + + +## Formatting + +Menu paths are written in bold and use carets to navigate submenus. Example: **Android Studio > Preferences** + +--- + +Now that you know how this guide works, it's time to get to know the foundation of React Native: [Native Components](intro-react-native-components.md). diff --git a/website/versioned_docs/version-0.73/more-resources.md b/website/versioned_docs/version-0.73/more-resources.md index 4738e7a73df..e2f26e8f877 100644 --- a/website/versioned_docs/version-0.73/more-resources.md +++ b/website/versioned_docs/version-0.73/more-resources.md @@ -7,7 +7,7 @@ There’s always more to learn: developer workflows, shipping to app stores, int ## Where to go from here -- [Get started with React Native](environment-setup) +- [Set up your environment](environment-setup) - [Set up your development workflow](running-on-device) - [Design and layout your app](flexbox) - [Debug your app](debugging) diff --git a/website/versioned_docs/version-0.73/running-on-device.md b/website/versioned_docs/version-0.73/running-on-device.md index 338474297fa..01175add366 100644 --- a/website/versioned_docs/version-0.73/running-on-device.md +++ b/website/versioned_docs/version-0.73/running-on-device.md @@ -421,14 +421,14 @@ You have built a great app using React Native, and you are now itching to releas [//]: # 'Windows, iOS' -> A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to our [get started](environment-setup) guide to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo Go app. +> A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to our [environment setup guide](environment-setup) to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app. [//]: # 'Linux, iOS' -> A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to our [get started](environment-setup) guide to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo Go app. +> A Mac is required in order to build your app for iOS devices. Alternatively, you can refer to our [environment setup guide](environment-setup) to learn how to build your app using Expo CLI, which will allow you to run your app using the Expo client app. From 3e5c791d4e3ed5898b472ec33487af3889210d4d Mon Sep 17 00:00:00 2001 From: Jon Samp Date: Sat, 20 Apr 2024 22:53:07 -0500 Subject: [PATCH 07/20] use unversioned --- docs/_getting-started-linux-android.md | 77 +------- docs/_getting-started-macos-android.md | 77 +------- docs/_getting-started-macos-ios.md | 79 +------- docs/_getting-started-windows-android.md | 79 +------- docs/_integration-with-existing-apps-java.md | 4 +- .../_integration-with-existing-apps-kotlin.md | 4 +- docs/_integration-with-existing-apps-objc.md | 4 +- docs/_integration-with-existing-apps-swift.md | 4 +- .../get-started-without-a-framework.md | 0 docs/getting-started.md | 169 +++--------------- docs/introduction.md | 4 +- .../running-your-application.md | 0 docs/typescript.md | 2 +- website/sidebars.json | 1 + .../_getting-started-linux-android.md | 77 +++++++- .../_getting-started-macos-android.md | 77 +++++++- .../_getting-started-macos-ios.md | 79 +++++++- .../_getting-started-windows-android.md | 79 +++++++- .../_integration-with-existing-apps-java.md | 4 +- .../_integration-with-existing-apps-kotlin.md | 4 +- .../_integration-with-existing-apps-objc.md | 4 +- .../_integration-with-existing-apps-swift.md | 4 +- .../version-0.73/getting-started.md | 169 +++++++++++++++--- .../version-0.73/introduction.md | 4 +- .../versioned_docs/version-0.73/typescript.md | 2 +- .../version-0.73-sidebars.json | 1 - 26 files changed, 504 insertions(+), 504 deletions(-) rename {website/versioned_docs/version-0.73 => docs}/get-started-without-a-framework.md (100%) rename {website/versioned_docs/version-0.73 => docs}/running-your-application.md (100%) diff --git a/docs/_getting-started-linux-android.md b/docs/_getting-started-linux-android.md index 1137ec5bd22..845697b982b 100644 --- a/docs/_getting-started-linux-android.md +++ b/docs/_getting-started-linux-android.md @@ -1,5 +1,5 @@ import RemoveGlobalCLI from './\_remove-global-cli.md'; -import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; +import BoxLink from '@site/src/theme/BoxLink'; ## Installing dependencies @@ -120,77 +120,10 @@ If you have recently installed Android Studio, you will likely need to [create a > We recommend configuring [VM acceleration](https://developer.android.com/studio/run/emulator-acceleration.html#vm-linux) on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager. -Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it, then proceed to the next step. +Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it. -

Running your React Native application

+## Now what? -

Step 1: Start Metro

+Now, it's time to run your app. -[**Metro**](https://metrobundler.dev/) is the JavaScript build tool for React Native. To start the Metro development server, run the following from your project folder: - - - - -```shell -npm start -``` - - - - -```shell -yarn start -``` - - - - -:::note -If you're familiar with web development, Metro is similar to bundlers such as Vite and webpack, but is designed end-to-end for React Native. For instance, Metro uses [Babel](https://babel.dev/) to transform syntax such as JSX into executable JavaScript. -::: - -

Step 2: Start your application

- -Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following: - - - - -```shell -npm run android -``` - - - - -```shell -yarn android -``` - - - - -If everything is set up correctly, you should see your new app running in your Android emulator shortly. - -This is one way to run your app - you can also run it directly from within Android Studio. - -> If you can't get this to work, see the [Troubleshooting](troubleshooting.md) page. - -

Modifying your app

- -Now that you have successfully run the app, let's modify it. - -- Open `App.tsx` in your text editor of choice and edit some lines. -- Press the R key twice or select `Reload` from the Dev Menu (Ctrl + M) to see your changes! - -

That's it!

- -Congratulations! You've successfully run and modified your first React Native app. - -
- -

Now what?

- -- If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md). - -If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started). +Run Your React Native Application diff --git a/docs/_getting-started-macos-android.md b/docs/_getting-started-macos-android.md index a666ae40c6a..0986c65dbf1 100644 --- a/docs/_getting-started-macos-android.md +++ b/docs/_getting-started-macos-android.md @@ -1,5 +1,5 @@ import RemoveGlobalCLI from './\_remove-global-cli.md'; -import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; +import BoxLink from '@site/src/theme/BoxLink'; ## Installing dependencies @@ -135,77 +135,10 @@ If you use Android Studio to open `./AwesomeProject/android`, you can see the li If you have recently installed Android Studio, you will likely need to [create a new AVD](https://developer.android.com/studio/run/managing-avds.html). Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the **UpsideDownCake** API Level 34 image. -Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it, then proceed to the next step. +Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it. -

Running your React Native application

+## Now what? -

Step 1: Start Metro

+Now, it's time to run your app. -[**Metro**](https://metrobundler.dev/) is the JavaScript build tool for React Native. To start the Metro development server, run the following from your project folder: - - - - -```shell -npm start -``` - - - - -```shell -yarn start -``` - - - - -:::note -If you're familiar with web development, Metro is similar to bundlers such as Vite and webpack, but is designed end-to-end for React Native. For instance, Metro uses [Babel](https://babel.dev/) to transform syntax such as JSX into executable JavaScript. -::: - -

Step 2: Start your application

- - - - -```shell -npm run android -``` - - - - -```shell -yarn android -``` - - - - -If everything is set up correctly, you should see your new app running in your Android emulator shortly. - -![AwesomeProject on Android](/docs/assets/GettingStartedAndroidSuccessMacOS.png) - -This is one way to run your app - you can also run it directly from within Android Studio. - -> If you can't get this to work, see the [Troubleshooting](troubleshooting.md) page. - -

Modifying your app

- -Now that you have successfully run the app, let's modify it. - -- Open `App.tsx` in your text editor of choice and edit some lines. -- Press the R key twice or select `Reload` from the Dev Menu (Cmd ⌘ + M) to see your changes! - -

That's it!

- -Congratulations! You've successfully run and modified your first React Native app. - -
- -

Now what?

- -- If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md). - -If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started). +Run Your React Native Application diff --git a/docs/_getting-started-macos-ios.md b/docs/_getting-started-macos-ios.md index c2e6b85dd84..a400d33ce54 100644 --- a/docs/_getting-started-macos-ios.md +++ b/docs/_getting-started-macos-ios.md @@ -1,5 +1,5 @@ import RemoveGlobalCLI from './\_remove-global-cli.md'; -import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; +import BoxLink from '@site/src/theme/BoxLink'; ## Installing dependencies @@ -102,81 +102,8 @@ export NVM_DIR="$HOME/.nvm" You might also want to ensure that all "shell script build phase" of your Xcode project, is using `/bin/zsh` as its shell. ::: -## Running your React Native application - -### Step 1: Start Metro - -[**Metro**](https://metrobundler.dev/) is the JavaScript build tool for React Native. To start the Metro development server, run the following from your project folder: - - - - -```shell -npm start -``` - - - - -```shell -yarn start -``` - - - - -:::note -If you're familiar with web development, Metro is similar to bundlers such as Vite and webpack, but is designed end-to-end for React Native. For instance, Metro uses [Babel](https://babel.dev/) to transform syntax such as JSX into executable JavaScript. -::: - -### Step 2: Start your application - -Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following: - - - - -```shell -npm run ios -``` - - - - -```shell -yarn ios -``` - - - - -You should see your new app running in the iOS Simulator shortly. - -![AwesomeProject on iOS](/docs/assets/GettingStartediOSSuccess.png) - -This is one way to run your app. You can also run it directly from within Xcode. - -> If you can't get this to work, see the [Troubleshooting](troubleshooting.md) page. - -### Running on a device - -The above command will automatically run your app on the iOS Simulator by default. If you want to run the app on an actual physical iOS device, please follow the instructions [here](running-on-device.md). - -### Modifying your app - -Now that you have successfully run the app, let's modify it. - -- Open `App.tsx` in your text editor of choice and edit some lines. -- Hit Cmd ⌘ + R in your iOS Simulator to reload the app and see your changes! - -### That's it! - -Congratulations! You've successfully run and modified your first React Native app. - -
- ## Now what? -- If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md). +Now, it's time to run your app. -If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started). +Run Your React Native Application diff --git a/docs/_getting-started-windows-android.md b/docs/_getting-started-windows-android.md index 197f306a333..5b8ca7fe12c 100644 --- a/docs/_getting-started-windows-android.md +++ b/docs/_getting-started-windows-android.md @@ -1,5 +1,5 @@ import RemoveGlobalCLI from './\_remove-global-cli.md'; -import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; +import BoxLink from '@site/src/theme/BoxLink';

Installing dependencies

@@ -151,79 +151,10 @@ If you have recently installed Android Studio, you will likely need to [create a > If you don't have HAXM installed, click on "Install HAXM" or follow [these instructions](https://github.com/intel/haxm/wiki/Installation-Instructions-on-Windows) to set it up, then go back to the AVD Manager. -Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it, then proceed to the next step. +Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it. -

Running your React Native application

+## Now what? -

Step 1: Start Metro

+Now, it's time to run your app. -[**Metro**](https://metrobundler.dev/) is the JavaScript build tool for React Native. To start the Metro development server, run the following from your project folder: - - - - -```shell -npm start -``` - - - - -```shell -yarn start -``` - - - - -:::note -If you're familiar with web development, Metro is similar to bundlers such as Vite and webpack, but is designed end-to-end for React Native. For instance, Metro uses [Babel](https://babel.dev/) to transform syntax such as JSX into executable JavaScript. -::: - -

Step 2: Start your application

- -Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following: - - - - -```shell -npm run android -``` - - - - -```shell -yarn android -``` - - - - -If everything is set up correctly, you should see your new app running in your Android emulator shortly. - -![AwesomeProject on Android](/docs/assets/GettingStartedAndroidSuccessWindows.png) - -This is one way to run your app - you can also run it directly from within Android Studio. - -> If you can't get this to work, see the [Troubleshooting](troubleshooting.md) page. - -

Modifying your app

- -Now that you have successfully run the app, let's modify it. - -- Open `App.tsx` in your text editor of choice and edit some lines. -- Press the R key twice or select `Reload` from the Dev Menu (Ctrl + M) to see your changes! - -

That's it!

- -Congratulations! You've successfully run and modified your first React Native app. - -
- -

Now what?

- -- If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md). - -If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started). +Run Your React Native Application diff --git a/docs/_integration-with-existing-apps-java.md b/docs/_integration-with-existing-apps-java.md index 98916e337c9..3c6af29a9f0 100644 --- a/docs/_integration-with-existing-apps-java.md +++ b/docs/_integration-with-existing-apps-java.md @@ -12,7 +12,7 @@ The keys to integrating React Native components into your Android application ar ## Prerequisites -Follow the React Native CLI Quickstart in the [environment setup guide](environment-setup) to configure your development environment for building React Native apps for Android. +Follow the guide on using [React Native without a framework](get-started-without-a-framework) to configure your development environment for building React Native apps for Android. ### 1. Set up directory structure @@ -440,4 +440,4 @@ Now, create a release build of your native app from within Android Studio as usu At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native. -[metro]: https://metrobundler.dev/ +[metro]: https://facebook.github.io/metro/ diff --git a/docs/_integration-with-existing-apps-kotlin.md b/docs/_integration-with-existing-apps-kotlin.md index 98f0612ef66..43132b706df 100644 --- a/docs/_integration-with-existing-apps-kotlin.md +++ b/docs/_integration-with-existing-apps-kotlin.md @@ -12,7 +12,7 @@ The keys to integrating React Native components into your Android application ar ## Prerequisites -Follow the React Native CLI Quickstart in the [environment setup guide](environment-setup) to configure your development environment for building React Native apps for Android. +Follow the guide on using [React Native without a framework](get-started-without-a-framework) to configure your development environment for building React Native apps for Android. ### 1. Set up directory structure @@ -416,4 +416,4 @@ Now, create a release build of your native app from within Android Studio as usu At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native. -[metro]: https://metrobundler.dev/ +[metro]: https://facebook.github.io/metro/ diff --git a/docs/_integration-with-existing-apps-objc.md b/docs/_integration-with-existing-apps-objc.md index 722b562c3ea..9ed23cf31a2 100644 --- a/docs/_integration-with-existing-apps-objc.md +++ b/docs/_integration-with-existing-apps-objc.md @@ -14,7 +14,7 @@ The keys to integrating React Native components into your iOS application are to ## Prerequisites -Follow the React Native CLI Quickstart in the [environment setup guide](environment-setup) to configure your development environment for building React Native apps for iOS. +Follow the guide on using [React Native without a framework](get-started-without-a-framework) to configure your development environment for building React Native apps for iOS. ### 1. Set up directory structure @@ -400,4 +400,4 @@ Here is the _React Native_ high score screen: At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native. -[metro]: https://metrobundler.dev/ +[metro]: https://facebook.github.io/metro/ diff --git a/docs/_integration-with-existing-apps-swift.md b/docs/_integration-with-existing-apps-swift.md index 3fa945a9743..59d1daf324b 100644 --- a/docs/_integration-with-existing-apps-swift.md +++ b/docs/_integration-with-existing-apps-swift.md @@ -14,7 +14,7 @@ The keys to integrating React Native components into your iOS application are to ## Prerequisites -Follow the React Native CLI Quickstart in the [environment setup guide](environment-setup) to configure your development environment for building React Native apps for iOS. +Follow the guide on using [React Native without a framework](get-started-without-a-framework) to configure your development environment for building React Native apps for iOS. ### 1. Set up directory structure @@ -378,4 +378,4 @@ Here is the _React Native_ high score screen: At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native. -[metro]: https://metrobundler.dev/ +[metro]: https://facebook.github.io/metro/ diff --git a/website/versioned_docs/version-0.73/get-started-without-a-framework.md b/docs/get-started-without-a-framework.md similarity index 100% rename from website/versioned_docs/version-0.73/get-started-without-a-framework.md rename to docs/get-started-without-a-framework.md diff --git a/docs/getting-started.md b/docs/getting-started.md index 07fad84c79a..7db85534747 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -1,168 +1,49 @@ --- id: environment-setup -title: Setting up the development environment +title: Get Started with React Native hide_table_of_contents: true --- -import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; +import PlatformSupport from '@site/src/theme/PlatformSupport'; +import BoxLink from '@site/src/theme/BoxLink'; -import GuideLinuxAndroid from './\_getting-started-linux-android.md'; import GuideMacOSAndroid from './\_getting-started-macos-android.md'; import GuideWindowsAndroid from './\_getting-started-windows-android.md'; import GuideMacOSIOS from './\_getting-started-macos-ios.md'; +**React Native allows developers who know React to create genuine native apps. At the same time, native developers can use React Native to gain parity between native platforms by writing common features once.** -This page will help you install and build your first React Native app. +We believe that the best way to experience React Native is through a Framework, a toolbox with all the necessaries APIs to let you build production ready apps. -**If you are new to mobile development**, the easiest way to get started is with Expo Go. Expo is a set of tools and services built around React Native and, while it has many [features](https://docs.expo.dev), the most relevant feature for us right now is that it can get you writing a React Native app within minutes. You will only need a recent version of Node.js and a phone or emulator. If you'd like to try out React Native directly in your web browser before installing any tools, you can try out [Snack](https://snack.expo.dev/). +You can also use React Native without a Framework, however we’ve found that most developers benefit from using a React Native Framework like Expo. Expo provides features like file-based routing, high quality universal libraries, and the ability to write plugins that modify native code without having to manage native files. -**If you are already familiar with mobile development**, you may want to use React Native CLI. It requires Xcode or Android Studio to get started. If you already have one of these tools installed, you should be able to get up and running within a few minutes. If they are not installed, you should expect to spend about an hour installing and configuring them. +
+Can I use React Native without a Framework? - - +Yes. You can use React Native without a Framework. **However, if you’re building a new app with React Native, we recommend using a Framework.** -Run the following command to create a new React Native project called "AwesomeProject": +In short, you’ll be able to spend time writing your app instead of writing an entire Framework yourself in addition to your app. - - +The React Native community has spent years refining approaches to navigation, accessing native APIs, dealing with native dependencies, and more. Most apps need these core features. A React Native Framework provides them from the start of your app. -```shell -npx create-expo-app AwesomeProject - -cd AwesomeProject -npx expo start -``` - - - - -```shell -yarn create expo-app AwesomeProject - -cd AwesomeProject -yarn expo start -``` - - - - -This will start a development server for you. - -

Running your React Native application

- -Install the [Expo Go](https://expo.dev/client) app on your iOS or Android phone and connect to the same wireless network as your computer. On Android, use the Expo Go app to scan the QR code from your terminal to open your project. On iOS, use the built-in QR code scanner of the default iOS Camera app. - -

Modifying your app

- -Now that you have successfully run the app, let's modify it. Open `App.js` in your text editor of choice and edit some lines. The application should reload automatically once you save your changes. - -

That's it!

- -Congratulations! You've successfully run and modified your first React Native app. - -
- -

Now what?

- -Expo also has [docs](https://docs.expo.dev) you can reference if you have questions specific to the tool. You can also ask for help on the [Expo Discord](https://chat.expo.dev). - -If you have a problem with Expo, before creating a new issue, please see if there's an existing issue about it in the [Expo issues](https://github.com/expo/expo/issues). - -If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started). - -

Running your app on a simulator or virtual device

- -Expo Go allows you to run your React Native app on a physical device without installing iOS and Android native SDKs. If you want to run your app on the iOS Simulator or an Android Virtual Device, please refer to the instructions for "React Native CLI Quickstart" to learn how to install Xcode or set up your Android development environment. - -Once you've set these up, you can launch your app on an Android Virtual Device by running `npm run android`, or on the iOS Simulator by running `npm run ios` (macOS only). - -

Caveats

- -The Expo Go app is a great tool to get started — it exists to help developers quickly get projects off the ground, to experiment with ideas (such as on [Snack](https://snack.expo.dev/)) and share their work with minimal friction. Expo Go makes this possible by including a feature-rich native runtime made up of every module in the [Expo SDK](https://docs.expo.dev/versions/latest/), so all you need to do to use a module is install the package with `npx expo install` and reload your app. - -The tradeoff is that the Expo Go app does not allow you to add custom native code — you can only use native modules built into the Expo SDK. There are many great libraries available outside of the Expo SDK, and you may even want to build your own native library. You can leverage these libraries with [development builds](https://docs.expo.dev/develop/development-builds/introduction/), or by using ["prebuild"](https://docs.expo.dev/workflow/prebuild/) to generate the native projects, or both. [Learn more about adding native code to projects created with `create-expo-app`](https://docs.expo.dev/workflow/customizing/). - -`create-expo-app` configures your project to use the most recent React Native version that is supported by the Expo SDK. The Expo Go app usually gains support for a given React Native version with new SDK versions (released quarterly). You can check [this document](https://docs.expo.dev/versions/latest/#each-expo-sdk-version-depends-on-a) to find out what versions are supported. +Without a Framework, you’ll either have to write your own solutions to implement core features, or you’ll have to piece together a collection of pre-existing libraries to create a skeleton of a Framework. This takes real work, both when starting your app, then later when maintaining it. -If you're integrating React Native into an existing project, [you can use the Expo SDK](https://docs.expo.dev/bare/installing-expo-modules/) and [development builds](https://docs.expo.dev/develop/development-builds/introduction/), but you will need to set up a native development environment. Select "React Native CLI Quickstart" above for instructions on configuring a native build environment for React Native. +If your app has unusual constraints that are not served well by a Framework, or you prefer to solve these problems yourself, you can make a React Native app without a Framework using Android Studio, Xcode, and React Native CLI. If you’re interested in this path, [learn how to get started](get-started-without-a-framework). - - +
-

Follow these instructions if you need to build native code in your project. For example, if you are integrating React Native into an existing application, or if you ran "prebuild" from Expo to generate your project's native code, you'll need this section.

+## Start a new React Native project with Expo -The instructions are a bit different depending on your development operating system, and whether you want to start developing for iOS or Android. If you want to develop for both Android and iOS, that's fine - you can pick one to start with, since the setup is a bit different. + -#### Development OS +Expo is a production-grade React Native Framework. Expo provides developer tooling that makes developing apps easier, such as file-based routing, a standard library of native modules, and much more. - - +Expo's Framework is open source and free, with an active community on [GitHub](https://github.com/expo) and [Discord](https://chat.expo.dev). -#### Target OS +The team behind Expo also provides Expo Application Services (EAS), an optional set of services that complements the Framework in each step of the development process. - - +To create a new Expo project, run the following in your terminal: -[//]: # 'macOS, Android' - - - - - - -[//]: # 'macOS, iOS' - - - - - - - - - -#### Target OS - - - - -[//]: # 'Windows, Android' - - - - - - -[//]: # 'Windows, iOS' - -## Unsupported - -> A Mac is required to build projects with native code for iOS. You can follow the **Expo Go Quickstart** to learn how to build your app using Expo instead. - - - - - - - -#### Target OS - - - - -[//]: # 'Linux, Android' - - - - - - -[//]: # 'Linux, iOS' - -## Unsupported - -> A Mac is required to build projects with native code for iOS. You can follow the **Expo Go Quickstart** to learn how to build your app using Expo instead. - - - +```shell +npx create-expo-app@latest +``` - - +Once you’ve created your app, check out the rest of Expo’s getting started guide to start developing your app. - - +Continue with Expo diff --git a/docs/introduction.md b/docs/introduction.md index 0122df1b2d4..728c8ba2d00 100644 --- a/docs/introduction.md +++ b/docs/introduction.md @@ -7,7 +7,7 @@ description: This helpful guide lays out the prerequisites for learning React Na import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
- Welcome to the very start of your React Native journey! If you're looking for environment setup instructions, they've moved to their own section. Continue reading for an introduction to the documentation, Native Components, React, and more! + Welcome to the very start of your React Native journey! If you're looking for how to get started, they've moved to their own section. Continue reading for an introduction to the documentation, Native Components, React, and more!
@@ -49,7 +49,7 @@ export default YourApp; The above is a Snack Player. It’s a handy tool created by Expo to embed and run React Native projects and share how they render in platforms like Android and iOS. The code is live and editable, so you can play directly with it in your browser. Go ahead and try changing the "Try editing me!" text above to "Hello, world!" -> Optionally, if you want to setup a local development environment, [you can follow our guide to setting up your environment on your local machine](environment-setup) and paste the code examples into your `App.js` file there. (If you are a web developer, you may already have a local environment set up for mobile browser testing!) +> Optionally, if you want to set up a local development environment, [you can follow our guide to setting up your environment on your local machine](environment-setup) and paste the code examples into your project. (If you are a web developer, you may already have a local environment set up for mobile browser testing!) ## Developer Notes diff --git a/website/versioned_docs/version-0.73/running-your-application.md b/docs/running-your-application.md similarity index 100% rename from website/versioned_docs/version-0.73/running-your-application.md rename to docs/running-your-application.md diff --git a/docs/typescript.md b/docs/typescript.md index 3af47daee8c..49459912ad6 100644 --- a/docs/typescript.md +++ b/docs/typescript.md @@ -9,7 +9,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con ## Getting Started with TypeScript -New projects created by the [React Native CLI](/docs/environment-setup#creating-a-new-application) or popular templates like [Ignite][ignite] will use TypeScript by default. +New projects created by the [React Native CLI](/docs/get-started-without-a-framework?os=macos&platform=ios#creating-a-new-application) or popular templates like [Ignite][ignite] will use TypeScript by default. TypeScript may also be used with [Expo][expo], which maintains TypeScript templates, or will prompt you to automatically install and configure TypeScript when a `.ts` or `.tsx` file is added to your project. diff --git a/website/sidebars.json b/website/sidebars.json index 826267a1b74..89552fb4d2f 100644 --- a/website/sidebars.json +++ b/website/sidebars.json @@ -13,6 +13,7 @@ ], "Environment setup": [ "environment-setup", + "get-started-without-a-framework", "integration-with-existing-apps", "integration-with-android-fragment", "building-for-tv", diff --git a/website/versioned_docs/version-0.73/_getting-started-linux-android.md b/website/versioned_docs/version-0.73/_getting-started-linux-android.md index 845697b982b..1137ec5bd22 100644 --- a/website/versioned_docs/version-0.73/_getting-started-linux-android.md +++ b/website/versioned_docs/version-0.73/_getting-started-linux-android.md @@ -1,5 +1,5 @@ import RemoveGlobalCLI from './\_remove-global-cli.md'; -import BoxLink from '@site/src/theme/BoxLink'; +import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; ## Installing dependencies @@ -120,10 +120,77 @@ If you have recently installed Android Studio, you will likely need to [create a > We recommend configuring [VM acceleration](https://developer.android.com/studio/run/emulator-acceleration.html#vm-linux) on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager. -Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it. +Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it, then proceed to the next step. -## Now what? +

Running your React Native application

-Now, it's time to run your app. +

Step 1: Start Metro

-Run Your React Native Application +[**Metro**](https://metrobundler.dev/) is the JavaScript build tool for React Native. To start the Metro development server, run the following from your project folder: + + + + +```shell +npm start +``` + + + + +```shell +yarn start +``` + + + + +:::note +If you're familiar with web development, Metro is similar to bundlers such as Vite and webpack, but is designed end-to-end for React Native. For instance, Metro uses [Babel](https://babel.dev/) to transform syntax such as JSX into executable JavaScript. +::: + +

Step 2: Start your application

+ +Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following: + + + + +```shell +npm run android +``` + + + + +```shell +yarn android +``` + + + + +If everything is set up correctly, you should see your new app running in your Android emulator shortly. + +This is one way to run your app - you can also run it directly from within Android Studio. + +> If you can't get this to work, see the [Troubleshooting](troubleshooting.md) page. + +

Modifying your app

+ +Now that you have successfully run the app, let's modify it. + +- Open `App.tsx` in your text editor of choice and edit some lines. +- Press the R key twice or select `Reload` from the Dev Menu (Ctrl + M) to see your changes! + +

That's it!

+ +Congratulations! You've successfully run and modified your first React Native app. + +
+ +

Now what?

+ +- If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md). + +If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started). diff --git a/website/versioned_docs/version-0.73/_getting-started-macos-android.md b/website/versioned_docs/version-0.73/_getting-started-macos-android.md index 0986c65dbf1..a666ae40c6a 100644 --- a/website/versioned_docs/version-0.73/_getting-started-macos-android.md +++ b/website/versioned_docs/version-0.73/_getting-started-macos-android.md @@ -1,5 +1,5 @@ import RemoveGlobalCLI from './\_remove-global-cli.md'; -import BoxLink from '@site/src/theme/BoxLink'; +import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; ## Installing dependencies @@ -135,10 +135,77 @@ If you use Android Studio to open `./AwesomeProject/android`, you can see the li If you have recently installed Android Studio, you will likely need to [create a new AVD](https://developer.android.com/studio/run/managing-avds.html). Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the **UpsideDownCake** API Level 34 image. -Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it. +Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it, then proceed to the next step. -## Now what? +

Running your React Native application

-Now, it's time to run your app. +

Step 1: Start Metro

-Run Your React Native Application +[**Metro**](https://metrobundler.dev/) is the JavaScript build tool for React Native. To start the Metro development server, run the following from your project folder: + + + + +```shell +npm start +``` + + + + +```shell +yarn start +``` + + + + +:::note +If you're familiar with web development, Metro is similar to bundlers such as Vite and webpack, but is designed end-to-end for React Native. For instance, Metro uses [Babel](https://babel.dev/) to transform syntax such as JSX into executable JavaScript. +::: + +

Step 2: Start your application

+ + + + +```shell +npm run android +``` + + + + +```shell +yarn android +``` + + + + +If everything is set up correctly, you should see your new app running in your Android emulator shortly. + +![AwesomeProject on Android](/docs/assets/GettingStartedAndroidSuccessMacOS.png) + +This is one way to run your app - you can also run it directly from within Android Studio. + +> If you can't get this to work, see the [Troubleshooting](troubleshooting.md) page. + +

Modifying your app

+ +Now that you have successfully run the app, let's modify it. + +- Open `App.tsx` in your text editor of choice and edit some lines. +- Press the R key twice or select `Reload` from the Dev Menu (Cmd ⌘ + M) to see your changes! + +

That's it!

+ +Congratulations! You've successfully run and modified your first React Native app. + +
+ +

Now what?

+ +- If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md). + +If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started). diff --git a/website/versioned_docs/version-0.73/_getting-started-macos-ios.md b/website/versioned_docs/version-0.73/_getting-started-macos-ios.md index a400d33ce54..c2e6b85dd84 100644 --- a/website/versioned_docs/version-0.73/_getting-started-macos-ios.md +++ b/website/versioned_docs/version-0.73/_getting-started-macos-ios.md @@ -1,5 +1,5 @@ import RemoveGlobalCLI from './\_remove-global-cli.md'; -import BoxLink from '@site/src/theme/BoxLink'; +import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; ## Installing dependencies @@ -102,8 +102,81 @@ export NVM_DIR="$HOME/.nvm" You might also want to ensure that all "shell script build phase" of your Xcode project, is using `/bin/zsh` as its shell. ::: +## Running your React Native application + +### Step 1: Start Metro + +[**Metro**](https://metrobundler.dev/) is the JavaScript build tool for React Native. To start the Metro development server, run the following from your project folder: + + + + +```shell +npm start +``` + + + + +```shell +yarn start +``` + + + + +:::note +If you're familiar with web development, Metro is similar to bundlers such as Vite and webpack, but is designed end-to-end for React Native. For instance, Metro uses [Babel](https://babel.dev/) to transform syntax such as JSX into executable JavaScript. +::: + +### Step 2: Start your application + +Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following: + + + + +```shell +npm run ios +``` + + + + +```shell +yarn ios +``` + + + + +You should see your new app running in the iOS Simulator shortly. + +![AwesomeProject on iOS](/docs/assets/GettingStartediOSSuccess.png) + +This is one way to run your app. You can also run it directly from within Xcode. + +> If you can't get this to work, see the [Troubleshooting](troubleshooting.md) page. + +### Running on a device + +The above command will automatically run your app on the iOS Simulator by default. If you want to run the app on an actual physical iOS device, please follow the instructions [here](running-on-device.md). + +### Modifying your app + +Now that you have successfully run the app, let's modify it. + +- Open `App.tsx` in your text editor of choice and edit some lines. +- Hit Cmd ⌘ + R in your iOS Simulator to reload the app and see your changes! + +### That's it! + +Congratulations! You've successfully run and modified your first React Native app. + +
+ ## Now what? -Now, it's time to run your app. +- If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md). -Run Your React Native Application +If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started). diff --git a/website/versioned_docs/version-0.73/_getting-started-windows-android.md b/website/versioned_docs/version-0.73/_getting-started-windows-android.md index 5b8ca7fe12c..197f306a333 100644 --- a/website/versioned_docs/version-0.73/_getting-started-windows-android.md +++ b/website/versioned_docs/version-0.73/_getting-started-windows-android.md @@ -1,5 +1,5 @@ import RemoveGlobalCLI from './\_remove-global-cli.md'; -import BoxLink from '@site/src/theme/BoxLink'; +import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';

Installing dependencies

@@ -151,10 +151,79 @@ If you have recently installed Android Studio, you will likely need to [create a > If you don't have HAXM installed, click on "Install HAXM" or follow [these instructions](https://github.com/intel/haxm/wiki/Installation-Instructions-on-Windows) to set it up, then go back to the AVD Manager. -Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it. +Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it, then proceed to the next step. -## Now what? +

Running your React Native application

-Now, it's time to run your app. +

Step 1: Start Metro

-Run Your React Native Application +[**Metro**](https://metrobundler.dev/) is the JavaScript build tool for React Native. To start the Metro development server, run the following from your project folder: + + + + +```shell +npm start +``` + + + + +```shell +yarn start +``` + + + + +:::note +If you're familiar with web development, Metro is similar to bundlers such as Vite and webpack, but is designed end-to-end for React Native. For instance, Metro uses [Babel](https://babel.dev/) to transform syntax such as JSX into executable JavaScript. +::: + +

Step 2: Start your application

+ +Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following: + + + + +```shell +npm run android +``` + + + + +```shell +yarn android +``` + + + + +If everything is set up correctly, you should see your new app running in your Android emulator shortly. + +![AwesomeProject on Android](/docs/assets/GettingStartedAndroidSuccessWindows.png) + +This is one way to run your app - you can also run it directly from within Android Studio. + +> If you can't get this to work, see the [Troubleshooting](troubleshooting.md) page. + +

Modifying your app

+ +Now that you have successfully run the app, let's modify it. + +- Open `App.tsx` in your text editor of choice and edit some lines. +- Press the R key twice or select `Reload` from the Dev Menu (Ctrl + M) to see your changes! + +

That's it!

+ +Congratulations! You've successfully run and modified your first React Native app. + +
+ +

Now what?

+ +- If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md). + +If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started). diff --git a/website/versioned_docs/version-0.73/_integration-with-existing-apps-java.md b/website/versioned_docs/version-0.73/_integration-with-existing-apps-java.md index 3c6af29a9f0..98916e337c9 100644 --- a/website/versioned_docs/version-0.73/_integration-with-existing-apps-java.md +++ b/website/versioned_docs/version-0.73/_integration-with-existing-apps-java.md @@ -12,7 +12,7 @@ The keys to integrating React Native components into your Android application ar ## Prerequisites -Follow the guide on using [React Native without a framework](get-started-without-a-framework) to configure your development environment for building React Native apps for Android. +Follow the React Native CLI Quickstart in the [environment setup guide](environment-setup) to configure your development environment for building React Native apps for Android. ### 1. Set up directory structure @@ -440,4 +440,4 @@ Now, create a release build of your native app from within Android Studio as usu At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native. -[metro]: https://facebook.github.io/metro/ +[metro]: https://metrobundler.dev/ diff --git a/website/versioned_docs/version-0.73/_integration-with-existing-apps-kotlin.md b/website/versioned_docs/version-0.73/_integration-with-existing-apps-kotlin.md index 43132b706df..98f0612ef66 100644 --- a/website/versioned_docs/version-0.73/_integration-with-existing-apps-kotlin.md +++ b/website/versioned_docs/version-0.73/_integration-with-existing-apps-kotlin.md @@ -12,7 +12,7 @@ The keys to integrating React Native components into your Android application ar ## Prerequisites -Follow the guide on using [React Native without a framework](get-started-without-a-framework) to configure your development environment for building React Native apps for Android. +Follow the React Native CLI Quickstart in the [environment setup guide](environment-setup) to configure your development environment for building React Native apps for Android. ### 1. Set up directory structure @@ -416,4 +416,4 @@ Now, create a release build of your native app from within Android Studio as usu At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native. -[metro]: https://facebook.github.io/metro/ +[metro]: https://metrobundler.dev/ diff --git a/website/versioned_docs/version-0.73/_integration-with-existing-apps-objc.md b/website/versioned_docs/version-0.73/_integration-with-existing-apps-objc.md index 9ed23cf31a2..722b562c3ea 100644 --- a/website/versioned_docs/version-0.73/_integration-with-existing-apps-objc.md +++ b/website/versioned_docs/version-0.73/_integration-with-existing-apps-objc.md @@ -14,7 +14,7 @@ The keys to integrating React Native components into your iOS application are to ## Prerequisites -Follow the guide on using [React Native without a framework](get-started-without-a-framework) to configure your development environment for building React Native apps for iOS. +Follow the React Native CLI Quickstart in the [environment setup guide](environment-setup) to configure your development environment for building React Native apps for iOS. ### 1. Set up directory structure @@ -400,4 +400,4 @@ Here is the _React Native_ high score screen: At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native. -[metro]: https://facebook.github.io/metro/ +[metro]: https://metrobundler.dev/ diff --git a/website/versioned_docs/version-0.73/_integration-with-existing-apps-swift.md b/website/versioned_docs/version-0.73/_integration-with-existing-apps-swift.md index 59d1daf324b..3fa945a9743 100644 --- a/website/versioned_docs/version-0.73/_integration-with-existing-apps-swift.md +++ b/website/versioned_docs/version-0.73/_integration-with-existing-apps-swift.md @@ -14,7 +14,7 @@ The keys to integrating React Native components into your iOS application are to ## Prerequisites -Follow the guide on using [React Native without a framework](get-started-without-a-framework) to configure your development environment for building React Native apps for iOS. +Follow the React Native CLI Quickstart in the [environment setup guide](environment-setup) to configure your development environment for building React Native apps for iOS. ### 1. Set up directory structure @@ -378,4 +378,4 @@ Here is the _React Native_ high score screen: At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native. -[metro]: https://facebook.github.io/metro/ +[metro]: https://metrobundler.dev/ diff --git a/website/versioned_docs/version-0.73/getting-started.md b/website/versioned_docs/version-0.73/getting-started.md index 7db85534747..07fad84c79a 100644 --- a/website/versioned_docs/version-0.73/getting-started.md +++ b/website/versioned_docs/version-0.73/getting-started.md @@ -1,49 +1,168 @@ --- id: environment-setup -title: Get Started with React Native +title: Setting up the development environment hide_table_of_contents: true --- -import PlatformSupport from '@site/src/theme/PlatformSupport'; -import BoxLink from '@site/src/theme/BoxLink'; +import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; -**React Native allows developers who know React to create genuine native apps. At the same time, native developers can use React Native to gain parity between native platforms by writing common features once.** +import GuideLinuxAndroid from './\_getting-started-linux-android.md'; import GuideMacOSAndroid from './\_getting-started-macos-android.md'; import GuideWindowsAndroid from './\_getting-started-windows-android.md'; import GuideMacOSIOS from './\_getting-started-macos-ios.md'; -We believe that the best way to experience React Native is through a Framework, a toolbox with all the necessaries APIs to let you build production ready apps. +This page will help you install and build your first React Native app. -You can also use React Native without a Framework, however we’ve found that most developers benefit from using a React Native Framework like Expo. Expo provides features like file-based routing, high quality universal libraries, and the ability to write plugins that modify native code without having to manage native files. +**If you are new to mobile development**, the easiest way to get started is with Expo Go. Expo is a set of tools and services built around React Native and, while it has many [features](https://docs.expo.dev), the most relevant feature for us right now is that it can get you writing a React Native app within minutes. You will only need a recent version of Node.js and a phone or emulator. If you'd like to try out React Native directly in your web browser before installing any tools, you can try out [Snack](https://snack.expo.dev/). -
-Can I use React Native without a Framework? +**If you are already familiar with mobile development**, you may want to use React Native CLI. It requires Xcode or Android Studio to get started. If you already have one of these tools installed, you should be able to get up and running within a few minutes. If they are not installed, you should expect to spend about an hour installing and configuring them. -Yes. You can use React Native without a Framework. **However, if you’re building a new app with React Native, we recommend using a Framework.** + + -In short, you’ll be able to spend time writing your app instead of writing an entire Framework yourself in addition to your app. +Run the following command to create a new React Native project called "AwesomeProject": -The React Native community has spent years refining approaches to navigation, accessing native APIs, dealing with native dependencies, and more. Most apps need these core features. A React Native Framework provides them from the start of your app. + + -Without a Framework, you’ll either have to write your own solutions to implement core features, or you’ll have to piece together a collection of pre-existing libraries to create a skeleton of a Framework. This takes real work, both when starting your app, then later when maintaining it. +```shell +npx create-expo-app AwesomeProject -If your app has unusual constraints that are not served well by a Framework, or you prefer to solve these problems yourself, you can make a React Native app without a Framework using Android Studio, Xcode, and React Native CLI. If you’re interested in this path, [learn how to get started](get-started-without-a-framework). +cd AwesomeProject +npx expo start +``` -
+ + -## Start a new React Native project with Expo +```shell +yarn create expo-app AwesomeProject - +cd AwesomeProject +yarn expo start +``` -Expo is a production-grade React Native Framework. Expo provides developer tooling that makes developing apps easier, such as file-based routing, a standard library of native modules, and much more. + + -Expo's Framework is open source and free, with an active community on [GitHub](https://github.com/expo) and [Discord](https://chat.expo.dev). +This will start a development server for you. -The team behind Expo also provides Expo Application Services (EAS), an optional set of services that complements the Framework in each step of the development process. +

Running your React Native application

-To create a new Expo project, run the following in your terminal: +Install the [Expo Go](https://expo.dev/client) app on your iOS or Android phone and connect to the same wireless network as your computer. On Android, use the Expo Go app to scan the QR code from your terminal to open your project. On iOS, use the built-in QR code scanner of the default iOS Camera app. -```shell -npx create-expo-app@latest -``` +

Modifying your app

+ +Now that you have successfully run the app, let's modify it. Open `App.js` in your text editor of choice and edit some lines. The application should reload automatically once you save your changes. + +

That's it!

+ +Congratulations! You've successfully run and modified your first React Native app. + +
+ +

Now what?

+ +Expo also has [docs](https://docs.expo.dev) you can reference if you have questions specific to the tool. You can also ask for help on the [Expo Discord](https://chat.expo.dev). + +If you have a problem with Expo, before creating a new issue, please see if there's an existing issue about it in the [Expo issues](https://github.com/expo/expo/issues). + +If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started). + +

Running your app on a simulator or virtual device

+ +Expo Go allows you to run your React Native app on a physical device without installing iOS and Android native SDKs. If you want to run your app on the iOS Simulator or an Android Virtual Device, please refer to the instructions for "React Native CLI Quickstart" to learn how to install Xcode or set up your Android development environment. + +Once you've set these up, you can launch your app on an Android Virtual Device by running `npm run android`, or on the iOS Simulator by running `npm run ios` (macOS only). + +

Caveats

+ +The Expo Go app is a great tool to get started — it exists to help developers quickly get projects off the ground, to experiment with ideas (such as on [Snack](https://snack.expo.dev/)) and share their work with minimal friction. Expo Go makes this possible by including a feature-rich native runtime made up of every module in the [Expo SDK](https://docs.expo.dev/versions/latest/), so all you need to do to use a module is install the package with `npx expo install` and reload your app. + +The tradeoff is that the Expo Go app does not allow you to add custom native code — you can only use native modules built into the Expo SDK. There are many great libraries available outside of the Expo SDK, and you may even want to build your own native library. You can leverage these libraries with [development builds](https://docs.expo.dev/develop/development-builds/introduction/), or by using ["prebuild"](https://docs.expo.dev/workflow/prebuild/) to generate the native projects, or both. [Learn more about adding native code to projects created with `create-expo-app`](https://docs.expo.dev/workflow/customizing/). + +`create-expo-app` configures your project to use the most recent React Native version that is supported by the Expo SDK. The Expo Go app usually gains support for a given React Native version with new SDK versions (released quarterly). You can check [this document](https://docs.expo.dev/versions/latest/#each-expo-sdk-version-depends-on-a) to find out what versions are supported. + +If you're integrating React Native into an existing project, [you can use the Expo SDK](https://docs.expo.dev/bare/installing-expo-modules/) and [development builds](https://docs.expo.dev/develop/development-builds/introduction/), but you will need to set up a native development environment. Select "React Native CLI Quickstart" above for instructions on configuring a native build environment for React Native. + + + + +

Follow these instructions if you need to build native code in your project. For example, if you are integrating React Native into an existing application, or if you ran "prebuild" from Expo to generate your project's native code, you'll need this section.

+ +The instructions are a bit different depending on your development operating system, and whether you want to start developing for iOS or Android. If you want to develop for both Android and iOS, that's fine - you can pick one to start with, since the setup is a bit different. + +#### Development OS + + + + +#### Target OS + + + + +[//]: # 'macOS, Android' + + + + + + +[//]: # 'macOS, iOS' + + + + + + + + + +#### Target OS + + + + +[//]: # 'Windows, Android' + + + + + + +[//]: # 'Windows, iOS' + +## Unsupported + +> A Mac is required to build projects with native code for iOS. You can follow the **Expo Go Quickstart** to learn how to build your app using Expo instead. + + + + + + + +#### Target OS + + + + +[//]: # 'Linux, Android' + + + + + + +[//]: # 'Linux, iOS' + +## Unsupported + +> A Mac is required to build projects with native code for iOS. You can follow the **Expo Go Quickstart** to learn how to build your app using Expo instead. + + + -Once you’ve created your app, check out the rest of Expo’s getting started guide to start developing your app. + + -Continue with Expo + + diff --git a/website/versioned_docs/version-0.73/introduction.md b/website/versioned_docs/version-0.73/introduction.md index 728c8ba2d00..0122df1b2d4 100644 --- a/website/versioned_docs/version-0.73/introduction.md +++ b/website/versioned_docs/version-0.73/introduction.md @@ -7,7 +7,7 @@ description: This helpful guide lays out the prerequisites for learning React Na import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
- Welcome to the very start of your React Native journey! If you're looking for how to get started, they've moved to their own section. Continue reading for an introduction to the documentation, Native Components, React, and more! + Welcome to the very start of your React Native journey! If you're looking for environment setup instructions, they've moved to their own section. Continue reading for an introduction to the documentation, Native Components, React, and more!
@@ -49,7 +49,7 @@ export default YourApp; The above is a Snack Player. It’s a handy tool created by Expo to embed and run React Native projects and share how they render in platforms like Android and iOS. The code is live and editable, so you can play directly with it in your browser. Go ahead and try changing the "Try editing me!" text above to "Hello, world!" -> Optionally, if you want to set up a local development environment, [you can follow our guide to setting up your environment on your local machine](environment-setup) and paste the code examples into your project. (If you are a web developer, you may already have a local environment set up for mobile browser testing!) +> Optionally, if you want to setup a local development environment, [you can follow our guide to setting up your environment on your local machine](environment-setup) and paste the code examples into your `App.js` file there. (If you are a web developer, you may already have a local environment set up for mobile browser testing!) ## Developer Notes diff --git a/website/versioned_docs/version-0.73/typescript.md b/website/versioned_docs/version-0.73/typescript.md index 391c1eaee9d..3c791b3ff36 100644 --- a/website/versioned_docs/version-0.73/typescript.md +++ b/website/versioned_docs/version-0.73/typescript.md @@ -9,7 +9,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con ## Getting Started with TypeScript -New projects created by the [React Native CLI](/docs/get-started-without-a-framework?os=macos&platform=ios#creating-a-new-application) or popular templates like [Ignite][ignite] will use TypeScript by default. +New projects created by the [React Native CLI](/docs/environment-setup#creating-a-new-application) or popular templates like [Ignite][ignite] will use TypeScript by default. TypeScript may also be used with [Expo][expo], which maintains TypeScript templates, or will prompt you to automatically install and configure TypeScript when a `.ts` or `.tsx` file is added to your project. diff --git a/website/versioned_sidebars/version-0.73-sidebars.json b/website/versioned_sidebars/version-0.73-sidebars.json index ec7e1807e7f..4ea087ec988 100644 --- a/website/versioned_sidebars/version-0.73-sidebars.json +++ b/website/versioned_sidebars/version-0.73-sidebars.json @@ -13,7 +13,6 @@ ], "Environment setup": [ "environment-setup", - "get-started-without-a-framework", "integration-with-existing-apps", "integration-with-android-fragment", "building-for-tv", From 7233abb1c2612fcc780237fe7209f0c26729dd6d Mon Sep 17 00:00:00 2001 From: Jon Samp Date: Sun, 21 Apr 2024 00:07:34 -0500 Subject: [PATCH 08/20] apply feedback --- docs/_getting-started-linux-android.md | 32 ----- docs/_getting-started-macos-android.md | 32 ----- docs/_getting-started-macos-ios.md | 44 ------- docs/_getting-started-windows-android.md | 32 ----- docs/_integration-with-existing-apps-java.md | 2 +- .../_integration-with-existing-apps-kotlin.md | 2 +- docs/_integration-with-existing-apps-objc.md | 2 +- docs/_integration-with-existing-apps-swift.md | 2 +- docs/get-started-without-a-framework.md | 117 +++++++++++------- docs/getting-started.md | 8 +- docs/running-your-application.md | 80 ------------ docs/set-up-your-environment.md | 104 ++++++++++++++++ docs/typescript.md | 2 +- website/sidebars.json | 2 +- website/src/theme/Badge/styles.module.css | 9 +- 15 files changed, 190 insertions(+), 280 deletions(-) delete mode 100644 docs/running-your-application.md create mode 100644 docs/set-up-your-environment.md diff --git a/docs/_getting-started-linux-android.md b/docs/_getting-started-linux-android.md index 845697b982b..2d53f206f1d 100644 --- a/docs/_getting-started-linux-android.md +++ b/docs/_getting-started-linux-android.md @@ -74,32 +74,6 @@ Follow the [Watchman installation guide](https://facebook.github.io/watchman/doc > [Watchman](https://facebook.github.io/watchman/docs/install) is a tool by Facebook for watching changes in the filesystem. It is highly recommended you install it for better performance and increased compatibility in certain edge cases (translation: you may be able to get by without installing this, but your mileage may vary; installing this now may save you from a headache later). -

React Native Command Line Interface

- -React Native has a built-in command line interface. Rather than install and manage a specific version of the CLI globally, we recommend you access the current version at runtime using `npx`, which ships with Node.js. With `npx react-native `, the current stable version of the CLI will be downloaded and executed at the time the command is run. - -

Creating a new application

- - - -React Native has a built-in command line interface, which you can use to generate a new project. You can access it without installing anything globally using `npx`, which ships with Node.js. Let's create a new React Native project called "AwesomeProject": - -```shell -npx react-native@latest init AwesomeProject -``` - -This is not necessary if you are integrating React Native into an existing application, or if you've installed [Expo](https://docs.expo.dev/bare/installing-expo-modules/) in your project, or if you're adding Android support to an existing React Native project (see [Integration with Existing Apps](integration-with-existing-apps.md)). You can also use a third-party CLI to init your React Native app, such as [Ignite CLI](https://github.com/infinitered/ignite). - -

[Optional] Using a specific version or template

- -If you want to start a new project with a specific React Native version, you can use the `--version` argument: - -```shell -npx react-native@X.XX.X init AwesomeProject --version X.XX.X -``` - -You can also start a project with a custom React Native template with the `--template` argument. -

Preparing the Android device

You will need an Android device to run your React Native Android app. This can be either a physical Android device, or more commonly, you can use an Android Virtual Device which allows you to emulate an Android device on your computer. @@ -121,9 +95,3 @@ If you have recently installed Android Studio, you will likely need to [create a > We recommend configuring [VM acceleration](https://developer.android.com/studio/run/emulator-acceleration.html#vm-linux) on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager. Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it. - -## Now what? - -Now, it's time to run your app. - -Run Your React Native Application diff --git a/docs/_getting-started-macos-android.md b/docs/_getting-started-macos-android.md index 0986c65dbf1..9e7b3bc2038 100644 --- a/docs/_getting-started-macos-android.md +++ b/docs/_getting-started-macos-android.md @@ -91,32 +91,6 @@ Run `source ~/.zprofile` (or `source ~/.bash_profile` for `bash`) to load the co > Please make sure you use the correct Android SDK path. You can find the actual location of the SDK in the Android Studio "Settings" dialog, under **Languages & Frameworks** → **Android SDK**. -

React Native Command Line Interface

- -React Native has a built-in command line interface. Rather than install and manage a specific version of the CLI globally, we recommend you access the current version at runtime using `npx`, which ships with Node.js. With `npx react-native `, the current stable version of the CLI will be downloaded and executed at the time the command is run. - -

Creating a new application

- - - -React Native has a built-in command line interface, which you can use to generate a new project. You can access it without installing anything globally using `npx`, which ships with Node.js. Let's create a new React Native project called "AwesomeProject": - -```shell -npx react-native@latest init AwesomeProject -``` - -This is not necessary if you are integrating React Native into an existing application, or if you've installed [Expo](https://docs.expo.dev/bare/installing-expo-modules/) in your project, or if you're adding Android support to an existing React Native project (see [Integration with Existing Apps](integration-with-existing-apps.md)). You can also use a third-party CLI to init your React Native app, such as [Ignite CLI](https://github.com/infinitered/ignite). - -

[Optional] Using a specific version or template

- -If you want to start a new project with a specific React Native version, you can use the `--version` argument: - -```shell -npx react-native@X.XX.X init AwesomeProject --version X.XX.X -``` - -You can also start a project with a custom React Native template with the `--template` argument. -

Preparing the Android device

You will need an Android device to run your React Native Android app. This can be either a physical Android device, or more commonly, you can use an Android Virtual Device which allows you to emulate an Android device on your computer. @@ -136,9 +110,3 @@ If you use Android Studio to open `./AwesomeProject/android`, you can see the li If you have recently installed Android Studio, you will likely need to [create a new AVD](https://developer.android.com/studio/run/managing-avds.html). Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the **UpsideDownCake** API Level 34 image. Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it. - -## Now what? - -Now, it's time to run your app. - -Run Your React Native Application diff --git a/docs/_getting-started-macos-ios.md b/docs/_getting-started-macos-ios.md index a400d33ce54..efcf1b9bab1 100644 --- a/docs/_getting-started-macos-ios.md +++ b/docs/_getting-started-macos-ios.md @@ -44,44 +44,6 @@ If you are using Xcode version 14.0 or greater than to install a simulator, open For more information, please visit [CocoaPods Getting Started guide](https://guides.cocoapods.org/using/getting-started.html). -### React Native Command Line Interface - -React Native has a built-in command line interface. Rather than install and manage a specific version of the CLI globally, we recommend you access the current version at runtime using `npx`, which ships with Node.js. With `npx react-native `, the current stable version of the CLI will be downloaded and executed at the time the command is run. - -## Creating a new application - - - -You can use React Native's built-in command line interface to generate a new project. Let's create a new React Native project called "AwesomeProject": - -```shell -npx react-native@latest init AwesomeProject -``` - -This is not necessary if you are integrating React Native into an existing application, or if you've installed [Expo](https://docs.expo.dev/bare/installing-expo-modules/) in your project, or if you're adding iOS support to an existing React Native project (see [Integration with Existing Apps](integration-with-existing-apps.md)). You can also use a third-party CLI to init your React Native app, such as [Ignite CLI](https://github.com/infinitered/ignite). - -:::info - -If you are having trouble with iOS, try to reinstall the dependencies by running: - -1. `cd ios` to navigate to the `ios` folder. -2. `bundle install` to install [Bundler](https://bundler.io/) -3. `bundle exec pod install` to install the iOS dependencies managed by CocoaPods. - -::: - -### [Optional] Using a specific version or template - -If you want to start a new project with a specific React Native version, you can use the `--version` argument: - -```shell -npx react-native@X.XX.X init AwesomeProject --version X.XX.X -``` - -You can also start a project with a custom React Native template with the `--template` argument. - -> **Note** If the above command is failing, you may have old version of `react-native` or `react-native-cli` installed globally on your pc. Try uninstalling the cli and run the cli using `npx`. - ### [Optional] Configuring your environment Starting from React Native version 0.69, it is possible to configure the Xcode environment using the `.xcode.env` file provided by the template. @@ -101,9 +63,3 @@ export NVM_DIR="$HOME/.nvm" You might also want to ensure that all "shell script build phase" of your Xcode project, is using `/bin/zsh` as its shell. ::: - -## Now what? - -Now, it's time to run your app. - -Run Your React Native Application diff --git a/docs/_getting-started-windows-android.md b/docs/_getting-started-windows-android.md index 5b8ca7fe12c..4743fd9782b 100644 --- a/docs/_getting-started-windows-android.md +++ b/docs/_getting-started-windows-android.md @@ -105,32 +105,6 @@ The default location for this folder is: %LOCALAPPDATA%\Android\Sdk\platform-tools ``` -

React Native Command Line Interface

- -React Native has a built-in command line interface. Rather than install and manage a specific version of the CLI globally, we recommend you access the current version at runtime using `npx`, which ships with Node.js. With `npx react-native `, the current stable version of the CLI will be downloaded and executed at the time the command is run. - -

Creating a new application

- - - -React Native has a built-in command line interface, which you can use to generate a new project. You can access it without installing anything globally using `npx`, which ships with Node.js. Let's create a new React Native project called "AwesomeProject": - -```shell -npx react-native@latest init AwesomeProject -``` - -This is not necessary if you are integrating React Native into an existing application, or if you've installed [Expo](https://docs.expo.dev/bare/installing-expo-modules/) in your project, or if you're adding Android support to an existing React Native project (see [Integration with Existing Apps](integration-with-existing-apps.md)). You can also use a third-party CLI to init your React Native app, such as [Ignite CLI](https://github.com/infinitered/ignite). - -

[Optional] Using a specific version or template

- -If you want to start a new project with a specific React Native version, you can use the `--version` argument: - -```shell -npx react-native@X.XX.X init AwesomeProject --version X.XX.X -``` - -You can also start a project with a custom React Native template with the `--template` argument. -

Preparing the Android device

You will need an Android device to run your React Native Android app. This can be either a physical Android device, or more commonly, you can use an Android Virtual Device which allows you to emulate an Android device on your computer. @@ -152,9 +126,3 @@ If you have recently installed Android Studio, you will likely need to [create a > If you don't have HAXM installed, click on "Install HAXM" or follow [these instructions](https://github.com/intel/haxm/wiki/Installation-Instructions-on-Windows) to set it up, then go back to the AVD Manager. Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it. - -## Now what? - -Now, it's time to run your app. - -Run Your React Native Application diff --git a/docs/_integration-with-existing-apps-java.md b/docs/_integration-with-existing-apps-java.md index 3c6af29a9f0..cf86df06a40 100644 --- a/docs/_integration-with-existing-apps-java.md +++ b/docs/_integration-with-existing-apps-java.md @@ -12,7 +12,7 @@ The keys to integrating React Native components into your Android application ar ## Prerequisites -Follow the guide on using [React Native without a framework](get-started-without-a-framework) to configure your development environment for building React Native apps for Android. +Follow the guide on using [React Native without a framework](set-up-your-environment) to configure your development environment for building React Native apps for Android. ### 1. Set up directory structure diff --git a/docs/_integration-with-existing-apps-kotlin.md b/docs/_integration-with-existing-apps-kotlin.md index 43132b706df..ae9a66cfc77 100644 --- a/docs/_integration-with-existing-apps-kotlin.md +++ b/docs/_integration-with-existing-apps-kotlin.md @@ -12,7 +12,7 @@ The keys to integrating React Native components into your Android application ar ## Prerequisites -Follow the guide on using [React Native without a framework](get-started-without-a-framework) to configure your development environment for building React Native apps for Android. +Follow the guide on using [React Native without a framework](set-up-your-environment) to configure your development environment for building React Native apps for Android. ### 1. Set up directory structure diff --git a/docs/_integration-with-existing-apps-objc.md b/docs/_integration-with-existing-apps-objc.md index 9ed23cf31a2..95e0d2cf64b 100644 --- a/docs/_integration-with-existing-apps-objc.md +++ b/docs/_integration-with-existing-apps-objc.md @@ -14,7 +14,7 @@ The keys to integrating React Native components into your iOS application are to ## Prerequisites -Follow the guide on using [React Native without a framework](get-started-without-a-framework) to configure your development environment for building React Native apps for iOS. +Follow the guide on using [React Native without a framework](set-up-your-environment) to configure your development environment for building React Native apps for iOS. ### 1. Set up directory structure diff --git a/docs/_integration-with-existing-apps-swift.md b/docs/_integration-with-existing-apps-swift.md index 59d1daf324b..d758d463dbc 100644 --- a/docs/_integration-with-existing-apps-swift.md +++ b/docs/_integration-with-existing-apps-swift.md @@ -14,7 +14,7 @@ The keys to integrating React Native components into your iOS application are to ## Prerequisites -Follow the guide on using [React Native without a framework](get-started-without-a-framework) to configure your development environment for building React Native apps for iOS. +Follow the guide on using [React Native without a framework](set-up-your-environment) to configure your development environment for building React Native apps for iOS. ### 1. Set up directory structure diff --git a/docs/get-started-without-a-framework.md b/docs/get-started-without-a-framework.md index df5f3acccde..e2fa1ee5f60 100644 --- a/docs/get-started-without-a-framework.md +++ b/docs/get-started-without-a-framework.md @@ -8,90 +8,111 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; -import GuideLinuxAndroid from './\_getting-started-linux-android.md'; -import GuideMacOSAndroid from './\_getting-started-macos-android.md'; -import GuideWindowsAndroid from './\_getting-started-windows-android.md'; -import GuideMacOSIOS from './\_getting-started-macos-ios.md'; +import RemoveGlobalCLI from './\_remove-global-cli.md'; If you have constraints that are not served well by a Framework, or you prefer to write your own Framework, you can create a React Native app without using a Framework. -:::note -This guide requires Android Studio or Xcode. If you already have one of these programs installed, you should be able to get up and running within a few minutes. If they are not installed, you should expect to spend about an hour installing and configuring them. +To do so, you'll first need to [set up your environment](set-up-your-environment). Once you're set up, continue with the steps below to create an application and start developing. + +### Step 1: Creating a new application + + + +You can use [React Native Community CLI](https://github.com/react-native-community/cli) to generate a new project. Let's create a new React Native project called "AwesomeProject": + +```shell +npx react-native@latest init AwesomeProject +``` + +This is not necessary if you are integrating React Native into an existing application, or if you've installed [Expo](https://docs.expo.dev/bare/installing-expo-modules/) in your project, or if you're adding Android support to an existing React Native project (see [Integration with Existing Apps](integration-with-existing-apps.md)). You can also use a third-party CLI to init your React Native app, such as [Ignite CLI](https://github.com/infinitered/ignite). + +:::info + +If you are having trouble with iOS, try to reinstall the dependencies by running: + +1. `cd ios` to navigate to the `ios` folder. +2. `bundle install` to install [Bundler](https://bundler.io/) +3. `bundle exec pod install` to install the iOS dependencies managed by CocoaPods. + ::: -The instructions are a bit different depending on your operating system, and whether you want to start developing for iOS or Android. If you want to develop for both Android and iOS, that's fine - you can pick one to start with, since the setup is a bit different. +#### [Optional] Using a specific version or template -#### Development OS +If you want to start a new project with a specific React Native version, you can use the `--version` argument: - - +```shell +npx react-native@X.XX.X init AwesomeProject --version X.XX.X +``` -#### Target OS +You can also start a project with a custom React Native template with the `--template` argument. - - +### Step 2: Start Metro -[//]: # 'macOS, Android' +[**Metro**](https://metrobundler.dev/) is the JavaScript build tool for React Native. To start the Metro development server, run the following from your project folder: - + + - - +```shell +npm start +``` -[//]: # 'macOS, iOS' + + - +```shell +yarn start +``` - - +:::note +If you're familiar with web development, Metro is similar to bundlers such as Vite and webpack, but is designed end-to-end for React Native. For instance, Metro uses [Babel](https://babel.dev/) to transform syntax such as JSX into executable JavaScript. +::: -#### Target OS +### Step 3: Start your application - - +Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following: -[//]: # 'Windows, Android' + + - +```shell +npm run android +``` - + -[//]: # 'Windows, iOS' - -## Unsupported - -> A Mac is required to build projects with native code for iOS. You can follow the **Expo Go Quickstart** to learn how to build your app using Expo instead. +```shell +yarn android +``` - - +If everything is set up correctly, you should see your new app running in your Android emulator shortly. -#### Target OS +This is one way to run your app - you can also run it directly from within Android Studio. - - +> If you can't get this to work, see the [Troubleshooting](troubleshooting.md) page. -[//]: # 'Linux, Android' +### Step 4: Modifying your app - +Now that you have successfully run the app, let's modify it. - - +- Open `App.tsx` in your text editor of choice and edit some lines. +- Press the R key twice or select `Reload` from the Dev Menu (Ctrl + M) to see your changes! -[//]: # 'Linux, iOS' +### That's it! -## Unsupported +Congratulations! You've successfully run and modified your first React Native app. -> A Mac is required to build projects with native code for iOS. You can follow the **Expo Go Quickstart** to learn how to build your app using Expo instead. +
- - +### Now what? - - +- If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md). + +If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started). diff --git a/docs/getting-started.md b/docs/getting-started.md index 7db85534747..349a885cdd8 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -7,11 +7,11 @@ hide_table_of_contents: true import PlatformSupport from '@site/src/theme/PlatformSupport'; import BoxLink from '@site/src/theme/BoxLink'; -**React Native allows developers who know React to create genuine native apps. At the same time, native developers can use React Native to gain parity between native platforms by writing common features once.** +**React Native allows developers who know React to create native apps. At the same time, native developers can use React Native to gain parity between native platforms by writing common features once.** We believe that the best way to experience React Native is through a Framework, a toolbox with all the necessaries APIs to let you build production ready apps. -You can also use React Native without a Framework, however we’ve found that most developers benefit from using a React Native Framework like Expo. Expo provides features like file-based routing, high quality universal libraries, and the ability to write plugins that modify native code without having to manage native files. +You can also use React Native without a Framework, however we’ve found that most developers benefit from using a React Native Framework like Expo. Expo provides features like file-based routing, high-quality universal libraries, and the ability to write plugins that modify native code without having to manage native files.
Can I use React Native without a Framework? @@ -24,7 +24,7 @@ The React Native community has spent years refining approaches to navigation, ac Without a Framework, you’ll either have to write your own solutions to implement core features, or you’ll have to piece together a collection of pre-existing libraries to create a skeleton of a Framework. This takes real work, both when starting your app, then later when maintaining it. -If your app has unusual constraints that are not served well by a Framework, or you prefer to solve these problems yourself, you can make a React Native app without a Framework using Android Studio, Xcode, and React Native CLI. If you’re interested in this path, [learn how to get started](get-started-without-a-framework). +If your app has unusual constraints that are not served well by a Framework, or you prefer to solve these problems yourself, you can make a React Native app without a Framework using Android Studio, Xcode. If you’re interested in this path, learn how to [set up your environment](set-up-your-environment) and how to [get started without a framework](get-started-without-a-framework).
@@ -46,4 +46,4 @@ npx create-expo-app@latest Once you’ve created your app, check out the rest of Expo’s getting started guide to start developing your app. -Continue with Expo +Continue with Expo diff --git a/docs/running-your-application.md b/docs/running-your-application.md deleted file mode 100644 index 03864232391..00000000000 --- a/docs/running-your-application.md +++ /dev/null @@ -1,80 +0,0 @@ ---- -id: running-your-application -title: Running Your React Native Application -hide_table_of_contents: true ---- - -import Tabs from '@theme/Tabs'; -import TabItem from '@theme/TabItem'; -import constants from '@site/core/TabsConstants'; - -### Step 1: Start Metro - -[**Metro**](https://metrobundler.dev/) is the JavaScript build tool for React Native. To start the Metro development server, run the following from your project folder: - - - - -```shell -npm start -``` - - - - -```shell -yarn start -``` - - - - -:::note -If you're familiar with web development, Metro is similar to bundlers such as Vite and webpack, but is designed end-to-end for React Native. For instance, Metro uses [Babel](https://babel.dev/) to transform syntax such as JSX into executable JavaScript. -::: - -### Step 2: Start your application - -Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following: - - - - -```shell -npm run android -``` - - - - -```shell -yarn android -``` - - - - -If everything is set up correctly, you should see your new app running in your Android emulator shortly. - -This is one way to run your app - you can also run it directly from within Android Studio. - -> If you can't get this to work, see the [Troubleshooting](troubleshooting.md) page. - -### Modifying your app - -Now that you have successfully run the app, let's modify it. - -- Open `App.tsx` in your text editor of choice and edit some lines. -- Press the R key twice or select `Reload` from the Dev Menu (Ctrl + M) to see your changes! - -### That's it! - -Congratulations! You've successfully run and modified your first React Native app. - -
- -### Now what? - -- If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md). - -If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started). diff --git a/docs/set-up-your-environment.md b/docs/set-up-your-environment.md new file mode 100644 index 00000000000..f8a614754a2 --- /dev/null +++ b/docs/set-up-your-environment.md @@ -0,0 +1,104 @@ +--- +id: set-up-your-environment +title: Set Up Your Environment +hide_table_of_contents: true +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; +import constants from '@site/core/TabsConstants'; + +import GuideLinuxAndroid from './\_getting-started-linux-android.md'; +import GuideMacOSAndroid from './\_getting-started-macos-android.md'; +import GuideWindowsAndroid from './\_getting-started-windows-android.md'; +import GuideMacOSIOS from './\_getting-started-macos-ios.md'; + +In this guide, you'll learn how to set up your environment, so that you can run your project with Android Studio and Xcode. This will allow you to develop with Android emulators and iOS simulators, build your app locally, and more. + +:::note +This guide requires Android Studio or Xcode. If you already have one of these programs installed, you should be able to get up and running within a few minutes. If they are not installed, you should expect to spend about an hour installing and configuring them.' + +
+Is setting up my environment required? + +Setting up your environment is not required if you're using a Framework. With that, if you prefer to develop with Android Studio and/or Xcode, you'll can set up your local computer while still using a Framework. + +If you have constraints that prevent you from using a Framework, or you'd like to write your own Framework, then setting up your local environment is a requirement. After your environment is set up, learn how to [get started without a framework](get-started-without-a-framework). + +
+::: + +#### Development OS + + + + +#### Target OS + + + + +[//]: # 'macOS, Android' + + + + + + +[//]: # 'macOS, iOS' + + + + + + + + + +#### Target OS + + + + +[//]: # 'Windows, Android' + + + + + + +[//]: # 'Windows, iOS' + +## Unsupported + +> A Mac is required to build projects with native code for iOS. You can follow the **Expo Go Quickstart** to learn how to build your app using Expo instead. + + + + + + + +#### Target OS + + + + +[//]: # 'Linux, Android' + + + + + + +[//]: # 'Linux, iOS' + +## Unsupported + +> A Mac is required to build projects with native code for iOS. You can follow the **Expo Go Quickstart** to learn how to build your app using Expo instead. + + + + + + diff --git a/docs/typescript.md b/docs/typescript.md index 49459912ad6..3c335e3e847 100644 --- a/docs/typescript.md +++ b/docs/typescript.md @@ -9,7 +9,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con ## Getting Started with TypeScript -New projects created by the [React Native CLI](/docs/get-started-without-a-framework?os=macos&platform=ios#creating-a-new-application) or popular templates like [Ignite][ignite] will use TypeScript by default. +New projects created by the [React Native CLI](/docs/set-up-your-environment?os=macos&platform=ios#creating-a-new-application) or popular templates like [Ignite][ignite] will use TypeScript by default. TypeScript may also be used with [Expo][expo], which maintains TypeScript templates, or will prompt you to automatically install and configure TypeScript when a `.ts` or `.tsx` file is added to your project. diff --git a/website/sidebars.json b/website/sidebars.json index 89552fb4d2f..db0ef2534a6 100644 --- a/website/sidebars.json +++ b/website/sidebars.json @@ -13,7 +13,7 @@ ], "Environment setup": [ "environment-setup", - "get-started-without-a-framework", + "set-up-your-environment", "integration-with-existing-apps", "integration-with-android-fragment", "building-for-tv", diff --git a/website/src/theme/Badge/styles.module.css b/website/src/theme/Badge/styles.module.css index 66367117a3c..a7904d90885 100644 --- a/website/src/theme/Badge/styles.module.css +++ b/website/src/theme/Badge/styles.module.css @@ -10,9 +10,14 @@ align-items: center; padding: 0.15rem 0.75rem; gap: 0.25rem; - border: 1px solid var(--ifm-color-gray-600); + border: 1px solid var(--ifm-color-gray-500); border-radius: 99rem; font-size: 0.875rem; font-weight: 500; - color: var(--ifm-color-gray-800); + color: var(--ifm-color-gray-700); +} + +[data-theme="dark"] .container { + border: 1px solid var(--ifm-color-gray-700); + color: var(--ifm-color-gray-500); } From f4fd16cba2f0c3d2eb912f9b82b40f9f43d91b2b Mon Sep 17 00:00:00 2001 From: Jon Samp Date: Sun, 21 Apr 2024 00:33:51 -0500 Subject: [PATCH 09/20] remove unnecessary changes --- docs/_getting-started-linux-android.md | 3 --- docs/_getting-started-macos-android.md | 3 --- docs/_getting-started-macos-ios.md | 3 --- docs/_getting-started-windows-android.md | 3 --- docs/_integration-with-existing-apps-java.md | 2 +- docs/_integration-with-existing-apps-kotlin.md | 2 +- docs/_integration-with-existing-apps-objc.md | 2 +- docs/_integration-with-existing-apps-swift.md | 2 +- docs/introduction.md | 2 +- .../version-0.73/_getting-started-linux-android.md | 2 +- .../version-0.73/_getting-started-macos-android.md | 2 +- .../versioned_docs/version-0.73/_getting-started-macos-ios.md | 2 +- .../version-0.73/_getting-started-windows-android.md | 2 +- .../version-0.73/_integration-with-existing-apps-java.md | 2 +- .../version-0.73/_integration-with-existing-apps-kotlin.md | 2 +- .../version-0.73/_integration-with-existing-apps-objc.md | 2 +- .../version-0.73/_integration-with-existing-apps-swift.md | 2 +- 17 files changed, 13 insertions(+), 25 deletions(-) diff --git a/docs/_getting-started-linux-android.md b/docs/_getting-started-linux-android.md index 2d53f206f1d..f19408426be 100644 --- a/docs/_getting-started-linux-android.md +++ b/docs/_getting-started-linux-android.md @@ -1,6 +1,3 @@ -import RemoveGlobalCLI from './\_remove-global-cli.md'; -import BoxLink from '@site/src/theme/BoxLink'; - ## Installing dependencies You will need Node, the React Native command line interface, a JDK, and Android Studio. diff --git a/docs/_getting-started-macos-android.md b/docs/_getting-started-macos-android.md index 9e7b3bc2038..1e59a9b2ce0 100644 --- a/docs/_getting-started-macos-android.md +++ b/docs/_getting-started-macos-android.md @@ -1,6 +1,3 @@ -import RemoveGlobalCLI from './\_remove-global-cli.md'; -import BoxLink from '@site/src/theme/BoxLink'; - ## Installing dependencies You will need Node, Watchman, the React Native command line interface, a JDK, and Android Studio. diff --git a/docs/_getting-started-macos-ios.md b/docs/_getting-started-macos-ios.md index efcf1b9bab1..2f7dfb8f49b 100644 --- a/docs/_getting-started-macos-ios.md +++ b/docs/_getting-started-macos-ios.md @@ -1,6 +1,3 @@ -import RemoveGlobalCLI from './\_remove-global-cli.md'; -import BoxLink from '@site/src/theme/BoxLink'; - ## Installing dependencies You will need Node, Watchman, the React Native command line interface, Xcode and CocoaPods. diff --git a/docs/_getting-started-windows-android.md b/docs/_getting-started-windows-android.md index 4743fd9782b..babbcbf5267 100644 --- a/docs/_getting-started-windows-android.md +++ b/docs/_getting-started-windows-android.md @@ -1,6 +1,3 @@ -import RemoveGlobalCLI from './\_remove-global-cli.md'; -import BoxLink from '@site/src/theme/BoxLink'; -

Installing dependencies

You will need Node, the React Native command line interface, a JDK, and Android Studio. diff --git a/docs/_integration-with-existing-apps-java.md b/docs/_integration-with-existing-apps-java.md index cf86df06a40..685ff72483e 100644 --- a/docs/_integration-with-existing-apps-java.md +++ b/docs/_integration-with-existing-apps-java.md @@ -440,4 +440,4 @@ Now, create a release build of your native app from within Android Studio as usu At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native. -[metro]: https://facebook.github.io/metro/ +[metro]: https://metrobundler.dev/ diff --git a/docs/_integration-with-existing-apps-kotlin.md b/docs/_integration-with-existing-apps-kotlin.md index ae9a66cfc77..7a6711f1162 100644 --- a/docs/_integration-with-existing-apps-kotlin.md +++ b/docs/_integration-with-existing-apps-kotlin.md @@ -416,4 +416,4 @@ Now, create a release build of your native app from within Android Studio as usu At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native. -[metro]: https://facebook.github.io/metro/ +[metro]: https://metrobundler.dev/ diff --git a/docs/_integration-with-existing-apps-objc.md b/docs/_integration-with-existing-apps-objc.md index 95e0d2cf64b..471c0e727f8 100644 --- a/docs/_integration-with-existing-apps-objc.md +++ b/docs/_integration-with-existing-apps-objc.md @@ -400,4 +400,4 @@ Here is the _React Native_ high score screen: At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native. -[metro]: https://facebook.github.io/metro/ +[metro]: https://metrobundler.dev/ diff --git a/docs/_integration-with-existing-apps-swift.md b/docs/_integration-with-existing-apps-swift.md index d758d463dbc..8b839a8346b 100644 --- a/docs/_integration-with-existing-apps-swift.md +++ b/docs/_integration-with-existing-apps-swift.md @@ -378,4 +378,4 @@ Here is the _React Native_ high score screen: At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native. -[metro]: https://facebook.github.io/metro/ +[metro]: https://metrobundler.dev/ diff --git a/docs/introduction.md b/docs/introduction.md index 728c8ba2d00..2bb828ebf09 100644 --- a/docs/introduction.md +++ b/docs/introduction.md @@ -49,7 +49,7 @@ export default YourApp; The above is a Snack Player. It’s a handy tool created by Expo to embed and run React Native projects and share how they render in platforms like Android and iOS. The code is live and editable, so you can play directly with it in your browser. Go ahead and try changing the "Try editing me!" text above to "Hello, world!" -> Optionally, if you want to set up a local development environment, [you can follow our guide to setting up your environment on your local machine](environment-setup) and paste the code examples into your project. (If you are a web developer, you may already have a local environment set up for mobile browser testing!) +> Optionally, if you want to set up a local development environment, [you can follow our guide to setting up your environment on your local machine](set-up-your-environment) and paste the code examples into your project. (If you are a web developer, you may already have a local environment set up for mobile browser testing!) ## Developer Notes diff --git a/website/versioned_docs/version-0.73/_getting-started-linux-android.md b/website/versioned_docs/version-0.73/_getting-started-linux-android.md index 1137ec5bd22..782a7c70c18 100644 --- a/website/versioned_docs/version-0.73/_getting-started-linux-android.md +++ b/website/versioned_docs/version-0.73/_getting-started-linux-android.md @@ -126,7 +126,7 @@ Click "Next" then "Finish" to create your AVD. At this point you should be able

Step 1: Start Metro

-[**Metro**](https://metrobundler.dev/) is the JavaScript build tool for React Native. To start the Metro development server, run the following from your project folder: +[**Metro**](https://facebook.github.io/metro/) is the JavaScript build tool for React Native. To start the Metro development server, run the following from your project folder: diff --git a/website/versioned_docs/version-0.73/_getting-started-macos-android.md b/website/versioned_docs/version-0.73/_getting-started-macos-android.md index a666ae40c6a..12941e39656 100644 --- a/website/versioned_docs/version-0.73/_getting-started-macos-android.md +++ b/website/versioned_docs/version-0.73/_getting-started-macos-android.md @@ -141,7 +141,7 @@ Click "Next" then "Finish" to create your AVD. At this point you should be able

Step 1: Start Metro

-[**Metro**](https://metrobundler.dev/) is the JavaScript build tool for React Native. To start the Metro development server, run the following from your project folder: +[**Metro**](https://facebook.github.io/metro/) is the JavaScript build tool for React Native. To start the Metro development server, run the following from your project folder: diff --git a/website/versioned_docs/version-0.73/_getting-started-macos-ios.md b/website/versioned_docs/version-0.73/_getting-started-macos-ios.md index c2e6b85dd84..faf7349f5f8 100644 --- a/website/versioned_docs/version-0.73/_getting-started-macos-ios.md +++ b/website/versioned_docs/version-0.73/_getting-started-macos-ios.md @@ -106,7 +106,7 @@ You might also want to ensure that all "shell script build phase" of your Xcode ### Step 1: Start Metro -[**Metro**](https://metrobundler.dev/) is the JavaScript build tool for React Native. To start the Metro development server, run the following from your project folder: +[**Metro**](https://facebook.github.io/metro/) is the JavaScript build tool for React Native. To start the Metro development server, run the following from your project folder: diff --git a/website/versioned_docs/version-0.73/_getting-started-windows-android.md b/website/versioned_docs/version-0.73/_getting-started-windows-android.md index 197f306a333..390e9bf406d 100644 --- a/website/versioned_docs/version-0.73/_getting-started-windows-android.md +++ b/website/versioned_docs/version-0.73/_getting-started-windows-android.md @@ -157,7 +157,7 @@ Click "Next" then "Finish" to create your AVD. At this point you should be able

Step 1: Start Metro

-[**Metro**](https://metrobundler.dev/) is the JavaScript build tool for React Native. To start the Metro development server, run the following from your project folder: +[**Metro**](https://facebook.github.io/metro/) is the JavaScript build tool for React Native. To start the Metro development server, run the following from your project folder: diff --git a/website/versioned_docs/version-0.73/_integration-with-existing-apps-java.md b/website/versioned_docs/version-0.73/_integration-with-existing-apps-java.md index 98916e337c9..d198147ba47 100644 --- a/website/versioned_docs/version-0.73/_integration-with-existing-apps-java.md +++ b/website/versioned_docs/version-0.73/_integration-with-existing-apps-java.md @@ -440,4 +440,4 @@ Now, create a release build of your native app from within Android Studio as usu At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native. -[metro]: https://metrobundler.dev/ +[metro]: https://facebook.github.io/metro/ diff --git a/website/versioned_docs/version-0.73/_integration-with-existing-apps-kotlin.md b/website/versioned_docs/version-0.73/_integration-with-existing-apps-kotlin.md index 98f0612ef66..787de1b7812 100644 --- a/website/versioned_docs/version-0.73/_integration-with-existing-apps-kotlin.md +++ b/website/versioned_docs/version-0.73/_integration-with-existing-apps-kotlin.md @@ -416,4 +416,4 @@ Now, create a release build of your native app from within Android Studio as usu At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native. -[metro]: https://metrobundler.dev/ +[metro]: https://facebook.github.io/metro/ diff --git a/website/versioned_docs/version-0.73/_integration-with-existing-apps-objc.md b/website/versioned_docs/version-0.73/_integration-with-existing-apps-objc.md index 722b562c3ea..a361d981b00 100644 --- a/website/versioned_docs/version-0.73/_integration-with-existing-apps-objc.md +++ b/website/versioned_docs/version-0.73/_integration-with-existing-apps-objc.md @@ -400,4 +400,4 @@ Here is the _React Native_ high score screen: At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native. -[metro]: https://metrobundler.dev/ +[metro]: https://facebook.github.io/metro/ diff --git a/website/versioned_docs/version-0.73/_integration-with-existing-apps-swift.md b/website/versioned_docs/version-0.73/_integration-with-existing-apps-swift.md index 3fa945a9743..b1dbd0c05fd 100644 --- a/website/versioned_docs/version-0.73/_integration-with-existing-apps-swift.md +++ b/website/versioned_docs/version-0.73/_integration-with-existing-apps-swift.md @@ -378,4 +378,4 @@ Here is the _React Native_ high score screen: At this point you can continue developing your app as usual. Refer to our [debugging](debugging) and [deployment](running-on-device) docs to learn more about working with React Native. -[metro]: https://metrobundler.dev/ +[metro]: https://facebook.github.io/metro/ From abf64d50753caadb943024edd822d2e207a2f302 Mon Sep 17 00:00:00 2001 From: Jon Samp Date: Sun, 21 Apr 2024 00:37:28 -0500 Subject: [PATCH 10/20] mention env setup and get started on integration docs --- docs/_integration-with-existing-apps-java.md | 2 +- docs/_integration-with-existing-apps-kotlin.md | 2 +- docs/_integration-with-existing-apps-objc.md | 2 +- docs/_integration-with-existing-apps-swift.md | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/_integration-with-existing-apps-java.md b/docs/_integration-with-existing-apps-java.md index 685ff72483e..80e524aebe1 100644 --- a/docs/_integration-with-existing-apps-java.md +++ b/docs/_integration-with-existing-apps-java.md @@ -12,7 +12,7 @@ The keys to integrating React Native components into your Android application ar ## Prerequisites -Follow the guide on using [React Native without a framework](set-up-your-environment) to configure your development environment for building React Native apps for Android. +Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](get-started-without-a-framework) to configure your development environment for building React Native apps for Android. ### 1. Set up directory structure diff --git a/docs/_integration-with-existing-apps-kotlin.md b/docs/_integration-with-existing-apps-kotlin.md index 7a6711f1162..6a188ed9b8c 100644 --- a/docs/_integration-with-existing-apps-kotlin.md +++ b/docs/_integration-with-existing-apps-kotlin.md @@ -12,7 +12,7 @@ The keys to integrating React Native components into your Android application ar ## Prerequisites -Follow the guide on using [React Native without a framework](set-up-your-environment) to configure your development environment for building React Native apps for Android. +Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](get-started-without-a-framework) to configure your development environment for building React Native apps for Android. ### 1. Set up directory structure diff --git a/docs/_integration-with-existing-apps-objc.md b/docs/_integration-with-existing-apps-objc.md index 471c0e727f8..0dd1869daae 100644 --- a/docs/_integration-with-existing-apps-objc.md +++ b/docs/_integration-with-existing-apps-objc.md @@ -14,7 +14,7 @@ The keys to integrating React Native components into your iOS application are to ## Prerequisites -Follow the guide on using [React Native without a framework](set-up-your-environment) to configure your development environment for building React Native apps for iOS. +Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](get-started-without-a-framework) to configure your development environment for building React Native apps for iOS. ### 1. Set up directory structure diff --git a/docs/_integration-with-existing-apps-swift.md b/docs/_integration-with-existing-apps-swift.md index 8b839a8346b..ee8b0f63d65 100644 --- a/docs/_integration-with-existing-apps-swift.md +++ b/docs/_integration-with-existing-apps-swift.md @@ -14,7 +14,7 @@ The keys to integrating React Native components into your iOS application are to ## Prerequisites -Follow the guide on using [React Native without a framework](set-up-your-environment) to configure your development environment for building React Native apps for iOS. +Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](get-started-without-a-framework) to configure your development environment for building React Native apps for iOS. ### 1. Set up directory structure From b541b2bbccd03277a74c798eece4c1c256ac9d41 Mon Sep 17 00:00:00 2001 From: Jon Samp Date: Sun, 21 Apr 2024 00:40:59 -0500 Subject: [PATCH 11/20] fixing links --- docs/introduction.md | 2 +- docs/typescript.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/introduction.md b/docs/introduction.md index 2bb828ebf09..7e1e2006b55 100644 --- a/docs/introduction.md +++ b/docs/introduction.md @@ -7,7 +7,7 @@ description: This helpful guide lays out the prerequisites for learning React Na import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
- Welcome to the very start of your React Native journey! If you're looking for how to get started, they've moved to their own section. Continue reading for an introduction to the documentation, Native Components, React, and more! + Welcome to the very start of your React Native journey! If you're looking for how to get started, they've moved to their own section. Continue reading for an introduction to the documentation, Native Components, React, and more!
diff --git a/docs/typescript.md b/docs/typescript.md index 3c335e3e847..2db5fa86049 100644 --- a/docs/typescript.md +++ b/docs/typescript.md @@ -9,7 +9,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con ## Getting Started with TypeScript -New projects created by the [React Native CLI](/docs/set-up-your-environment?os=macos&platform=ios#creating-a-new-application) or popular templates like [Ignite][ignite] will use TypeScript by default. +New projects created by the [React Native CLI](/docs/get-started-without-a-framework#step-1-creating-a-new-application) or popular templates like [Ignite][ignite] will use TypeScript by default. TypeScript may also be used with [Expo][expo], which maintains TypeScript templates, or will prompt you to automatically install and configure TypeScript when a `.ts` or `.tsx` file is added to your project. From ae7253b259a513c6b04be2014fa321786e9ebb7d Mon Sep 17 00:00:00 2001 From: Jon Samp Date: Sun, 21 Apr 2024 00:47:24 -0500 Subject: [PATCH 12/20] fix typo --- docs/set-up-your-environment.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/set-up-your-environment.md b/docs/set-up-your-environment.md index f8a614754a2..33e2c9447d4 100644 --- a/docs/set-up-your-environment.md +++ b/docs/set-up-your-environment.md @@ -21,7 +21,7 @@ This guide requires Android Studio or Xcode. If you already have one of these pr
Is setting up my environment required? -Setting up your environment is not required if you're using a Framework. With that, if you prefer to develop with Android Studio and/or Xcode, you'll can set up your local computer while still using a Framework. +Setting up your environment is not required if you're using a Framework. With that, if you prefer to develop with Android Studio and/or Xcode, you can set up your local computer while still using a Framework. If you have constraints that prevent you from using a Framework, or you'd like to write your own Framework, then setting up your local environment is a requirement. After your environment is set up, learn how to [get started without a framework](get-started-without-a-framework). From 9d17f005b4e6ae4f251453a6f0ea5130ab2f6c7b Mon Sep 17 00:00:00 2001 From: Jon Samp Date: Mon, 22 Apr 2024 10:11:36 -0500 Subject: [PATCH 13/20] fix broken link --- docs/typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/typescript.md b/docs/typescript.md index 2db5fa86049..8b256a880bd 100644 --- a/docs/typescript.md +++ b/docs/typescript.md @@ -9,7 +9,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con ## Getting Started with TypeScript -New projects created by the [React Native CLI](/docs/get-started-without-a-framework#step-1-creating-a-new-application) or popular templates like [Ignite][ignite] will use TypeScript by default. +New projects created by the [React Native CLI](get-started-without-a-framework#step-1-creating-a-new-application) or popular templates like [Ignite][ignite] will use TypeScript by default. TypeScript may also be used with [Expo][expo], which maintains TypeScript templates, or will prompt you to automatically install and configure TypeScript when a `.ts` or `.tsx` file is added to your project. From 9605a9cf6448fd09dda5920941c636045a5298c7 Mon Sep 17 00:00:00 2001 From: Jon Samp Date: Mon, 29 Apr 2024 23:35:11 -0500 Subject: [PATCH 14/20] adds platform support to RNC CLI page --- docs/get-started-without-a-framework.md | 3 +++ website/src/theme/PlatformSupport/index.js | 6 ++++++ 2 files changed, 9 insertions(+) diff --git a/docs/get-started-without-a-framework.md b/docs/get-started-without-a-framework.md index e2fa1ee5f60..7834d1b8334 100644 --- a/docs/get-started-without-a-framework.md +++ b/docs/get-started-without-a-framework.md @@ -7,9 +7,12 @@ hide_table_of_contents: true import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants'; +import PlatformSupport from '@site/src/theme/PlatformSupport'; import RemoveGlobalCLI from './\_remove-global-cli.md'; + + If you have constraints that are not served well by a Framework, or you prefer to write your own Framework, you can create a React Native app without using a Framework. To do so, you'll first need to [set up your environment](set-up-your-environment). Once you're set up, continue with the steps below to create an application and start developing. diff --git a/website/src/theme/PlatformSupport/index.js b/website/src/theme/PlatformSupport/index.js index 07273c7a304..8140f1ed0af 100644 --- a/website/src/theme/PlatformSupport/index.js +++ b/website/src/theme/PlatformSupport/index.js @@ -23,8 +23,14 @@ export default function PlatformSupport({platforms}) { } title="Android" /> )} {platforms.includes('ios') && } title="iOS" />} + {platforms.includes('macOS') && ( + } title="macOS" /> + )} {platforms.includes('tv') && } title="TV" />} + {platforms.includes('watchOS') && } {platforms.includes('web') && } title="Web" />} + {platforms.includes('windows') && } + {platforms.includes('visionOS') && }
); From 6a826ae6d21c6d3844e9d411415f2d2b4633c057 Mon Sep 17 00:00:00 2001 From: Jon Samp Date: Tue, 30 Apr 2024 00:05:10 -0500 Subject: [PATCH 15/20] incorporate feedback pt 1 --- docs/_getting-started-linux-android.md | 11 +++++++++++ docs/_getting-started-macos-android.md | 11 +++++++++++ docs/_getting-started-macos-ios.md | 11 +++++++++++ docs/_getting-started-windows-android.md | 11 +++++++++++ docs/_integration-with-existing-apps-java.md | 2 +- docs/_integration-with-existing-apps-kotlin.md | 2 +- docs/_integration-with-existing-apps-objc.md | 2 +- docs/_integration-with-existing-apps-swift.md | 2 +- docs/get-started-without-a-framework.md | 15 +++++++-------- docs/getting-started.md | 12 ++++++------ docs/introduction.md | 2 +- docs/set-up-your-environment.md | 10 +++++----- docs/typescript.md | 2 +- 13 files changed, 68 insertions(+), 25 deletions(-) diff --git a/docs/_getting-started-linux-android.md b/docs/_getting-started-linux-android.md index f19408426be..a03a28e0608 100644 --- a/docs/_getting-started-linux-android.md +++ b/docs/_getting-started-linux-android.md @@ -92,3 +92,14 @@ If you have recently installed Android Studio, you will likely need to [create a > We recommend configuring [VM acceleration](https://developer.android.com/studio/run/emulator-acceleration.html#vm-linux) on your system to improve performance. Once you've followed those instructions, go back to the AVD Manager. Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it. + +

That's it!

+ +Congratulations! You successfully set up your development environment. + +
+ +

Now what?

+ +- If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md). +- If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started). diff --git a/docs/_getting-started-macos-android.md b/docs/_getting-started-macos-android.md index 1e59a9b2ce0..65762d52621 100644 --- a/docs/_getting-started-macos-android.md +++ b/docs/_getting-started-macos-android.md @@ -107,3 +107,14 @@ If you use Android Studio to open `./AwesomeProject/android`, you can see the li If you have recently installed Android Studio, you will likely need to [create a new AVD](https://developer.android.com/studio/run/managing-avds.html). Select "Create Virtual Device...", then pick any Phone from the list and click "Next", then select the **UpsideDownCake** API Level 34 image. Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it. + +

That's it!

+ +Congratulations! You successfully set up your development environment. + +
+ +

Now what?

+ +- If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md). +- If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started). diff --git a/docs/_getting-started-macos-ios.md b/docs/_getting-started-macos-ios.md index 2f7dfb8f49b..eb6fbd8d791 100644 --- a/docs/_getting-started-macos-ios.md +++ b/docs/_getting-started-macos-ios.md @@ -60,3 +60,14 @@ export NVM_DIR="$HOME/.nvm" You might also want to ensure that all "shell script build phase" of your Xcode project, is using `/bin/zsh` as its shell. ::: + +

That's it!

+ +Congratulations! You successfully set up your development environment. + +
+ +

Now what?

+ +- If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md). +- If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started). diff --git a/docs/_getting-started-windows-android.md b/docs/_getting-started-windows-android.md index babbcbf5267..15d61eaa500 100644 --- a/docs/_getting-started-windows-android.md +++ b/docs/_getting-started-windows-android.md @@ -123,3 +123,14 @@ If you have recently installed Android Studio, you will likely need to [create a > If you don't have HAXM installed, click on "Install HAXM" or follow [these instructions](https://github.com/intel/haxm/wiki/Installation-Instructions-on-Windows) to set it up, then go back to the AVD Manager. Click "Next" then "Finish" to create your AVD. At this point you should be able to click on the green triangle button next to your AVD to launch it. + +

That's it!

+ +Congratulations! You successfully set up your development environment. + +
+ +

Now what?

+ +- If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md). +- If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started). diff --git a/docs/_integration-with-existing-apps-java.md b/docs/_integration-with-existing-apps-java.md index 80e524aebe1..ecd86142a8e 100644 --- a/docs/_integration-with-existing-apps-java.md +++ b/docs/_integration-with-existing-apps-java.md @@ -12,7 +12,7 @@ The keys to integrating React Native components into your Android application ar ## Prerequisites -Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](get-started-without-a-framework) to configure your development environment for building React Native apps for Android. +Follow the guide on [setting up your development environment](set-up-your-environment) to configure your development environment for building React Native apps for Android. ### 1. Set up directory structure diff --git a/docs/_integration-with-existing-apps-kotlin.md b/docs/_integration-with-existing-apps-kotlin.md index 6a188ed9b8c..ea724ce54e0 100644 --- a/docs/_integration-with-existing-apps-kotlin.md +++ b/docs/_integration-with-existing-apps-kotlin.md @@ -12,7 +12,7 @@ The keys to integrating React Native components into your Android application ar ## Prerequisites -Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](get-started-without-a-framework) to configure your development environment for building React Native apps for Android. +Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](getting-started-without-a-framework) to configure your development environment for building React Native apps for Android. ### 1. Set up directory structure diff --git a/docs/_integration-with-existing-apps-objc.md b/docs/_integration-with-existing-apps-objc.md index 0dd1869daae..1f5cb59bff7 100644 --- a/docs/_integration-with-existing-apps-objc.md +++ b/docs/_integration-with-existing-apps-objc.md @@ -14,7 +14,7 @@ The keys to integrating React Native components into your iOS application are to ## Prerequisites -Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](get-started-without-a-framework) to configure your development environment for building React Native apps for iOS. +Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](getting-started-without-a-framework) to configure your development environment for building React Native apps for iOS. ### 1. Set up directory structure diff --git a/docs/_integration-with-existing-apps-swift.md b/docs/_integration-with-existing-apps-swift.md index ee8b0f63d65..90d2a2a4475 100644 --- a/docs/_integration-with-existing-apps-swift.md +++ b/docs/_integration-with-existing-apps-swift.md @@ -14,7 +14,7 @@ The keys to integrating React Native components into your iOS application are to ## Prerequisites -Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](get-started-without-a-framework) to configure your development environment for building React Native apps for iOS. +Follow the guide on [setting up your development environment](set-up-your-environment) and using [React Native without a framework](getting-started-without-a-framework) to configure your development environment for building React Native apps for iOS. ### 1. Set up directory structure diff --git a/docs/get-started-without-a-framework.md b/docs/get-started-without-a-framework.md index 7834d1b8334..6cf49d881a7 100644 --- a/docs/get-started-without-a-framework.md +++ b/docs/get-started-without-a-framework.md @@ -1,5 +1,5 @@ --- -id: get-started-without-a-framework +id: getting-started-without-a-framework title: Get Started Without a Framework hide_table_of_contents: true --- @@ -24,10 +24,10 @@ To do so, you'll first need to [set up your environment](set-up-your-environment You can use [React Native Community CLI](https://github.com/react-native-community/cli) to generate a new project. Let's create a new React Native project called "AwesomeProject": ```shell -npx react-native@latest init AwesomeProject +npx react-native-community@latest init AwesomeProject ``` -This is not necessary if you are integrating React Native into an existing application, or if you've installed [Expo](https://docs.expo.dev/bare/installing-expo-modules/) in your project, or if you're adding Android support to an existing React Native project (see [Integration with Existing Apps](integration-with-existing-apps.md)). You can also use a third-party CLI to init your React Native app, such as [Ignite CLI](https://github.com/infinitered/ignite). +This is not necessary if you are integrating React Native into an existing application, or if you've installed [Expo](https://docs.expo.dev/bare/installing-expo-modules/) in your project, or if you're adding Android support to an existing React Native project (see [Integration with Existing Apps](integration-with-existing-apps.md)). You can also use a third-party CLI to set up your React Native app, such as [Ignite CLI](https://github.com/infinitered/ignite). :::info @@ -44,10 +44,10 @@ If you are having trouble with iOS, try to reinstall the dependencies by running If you want to start a new project with a specific React Native version, you can use the `--version` argument: ```shell -npx react-native@X.XX.X init AwesomeProject --version X.XX.X +npx react-native-community@X.XX.X init AwesomeProject --version X.XX.X ``` -You can also start a project with a custom React Native template with the `--template` argument. +You can also start a project with a custom React Native template with the `--template` argument, read more [here](https://github.com/react-native-community/cli/blob/main/docs/init.md#initializing-project-with-custom-template). ### Step 2: Start Metro @@ -110,12 +110,11 @@ Now that you have successfully run the app, let's modify it. ### That's it! -Congratulations! You've successfully run and modified your first React Native app. +Congratulations! You've successfully run and modified your first barebone React Native app.
### Now what? - If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md). - -If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started). +- If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started). diff --git a/docs/getting-started.md b/docs/getting-started.md index 349a885cdd8..8adf835030a 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -7,11 +7,11 @@ hide_table_of_contents: true import PlatformSupport from '@site/src/theme/PlatformSupport'; import BoxLink from '@site/src/theme/BoxLink'; -**React Native allows developers who know React to create native apps. At the same time, native developers can use React Native to gain parity between native platforms by writing common features once.** +**React Native allows developers who know React to create native apps.** At the same time, native developers can use React Native to gain parity between native platforms by writing common features once. -We believe that the best way to experience React Native is through a Framework, a toolbox with all the necessaries APIs to let you build production ready apps. +We believe that the best way to experience React Native is through a **Framework**, a toolbox with all the necessaries APIs to let you build production ready apps. -You can also use React Native without a Framework, however we’ve found that most developers benefit from using a React Native Framework like Expo. Expo provides features like file-based routing, high-quality universal libraries, and the ability to write plugins that modify native code without having to manage native files. +You can also use React Native without a Framework, however we’ve found that most developers benefit from using a React Native Framework like [Expo](https://expo.dev). Expo provides features like file-based routing, high-quality universal libraries, and the ability to write plugins that modify native code without having to manage native files.
Can I use React Native without a Framework? @@ -24,7 +24,7 @@ The React Native community has spent years refining approaches to navigation, ac Without a Framework, you’ll either have to write your own solutions to implement core features, or you’ll have to piece together a collection of pre-existing libraries to create a skeleton of a Framework. This takes real work, both when starting your app, then later when maintaining it. -If your app has unusual constraints that are not served well by a Framework, or you prefer to solve these problems yourself, you can make a React Native app without a Framework using Android Studio, Xcode. If you’re interested in this path, learn how to [set up your environment](set-up-your-environment) and how to [get started without a framework](get-started-without-a-framework). +If your app has unusual constraints that are not served well by a Framework, or you prefer to solve these problems yourself, you can make a React Native app without a Framework using Android Studio, Xcode. If you’re interested in this path, learn how to [set up your environment](set-up-your-environment) and how to [get started without a framework](getting-started-without-a-framework).
@@ -34,9 +34,9 @@ If your app has unusual constraints that are not served well by a Framework, or Expo is a production-grade React Native Framework. Expo provides developer tooling that makes developing apps easier, such as file-based routing, a standard library of native modules, and much more. -Expo's Framework is open source and free, with an active community on [GitHub](https://github.com/expo) and [Discord](https://chat.expo.dev). +Expo's Framework is free and open source, with an active community on [GitHub](https://github.com/expo) and [Discord](https://chat.expo.dev). The Expo team works in close collaboration with the React Native team at Meta to bring the latest React Native features to the Expo SDK. -The team behind Expo also provides Expo Application Services (EAS), an optional set of services that complements the Framework in each step of the development process. +The team at Expo also provides Expo Application Services (EAS), an optional set of services that complements Expo, the Framework, in each step of the development process. To create a new Expo project, run the following in your terminal: diff --git a/docs/introduction.md b/docs/introduction.md index 7e1e2006b55..cd807674a16 100644 --- a/docs/introduction.md +++ b/docs/introduction.md @@ -7,7 +7,7 @@ description: This helpful guide lays out the prerequisites for learning React Na import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
- Welcome to the very start of your React Native journey! If you're looking for how to get started, they've moved to their own section. Continue reading for an introduction to the documentation, Native Components, React, and more! + Welcome to the very start of your React Native journey! If you're looking for getting started instructions, they've moved to their own section. Continue reading for an introduction to the documentation, Native Components, React, and more!
diff --git a/docs/set-up-your-environment.md b/docs/set-up-your-environment.md index 33e2c9447d4..bbdc45efc83 100644 --- a/docs/set-up-your-environment.md +++ b/docs/set-up-your-environment.md @@ -16,14 +16,14 @@ import GuideMacOSIOS from './\_getting-started-macos-ios.md'; In this guide, you'll learn how to set up your environment, so that you can run your project with Android Studio and Xcode. This will allow you to develop with Android emulators and iOS simulators, build your app locally, and more. :::note -This guide requires Android Studio or Xcode. If you already have one of these programs installed, you should be able to get up and running within a few minutes. If they are not installed, you should expect to spend about an hour installing and configuring them.' +This guide requires Android Studio or Xcode. If you already have one of these programs installed, you should be able to get up and running within a few minutes. If they are not installed, you should expect to spend about an hour installing and configuring them.
Is setting up my environment required? -Setting up your environment is not required if you're using a Framework. With that, if you prefer to develop with Android Studio and/or Xcode, you can set up your local computer while still using a Framework. +Setting up your environment is not required if you're using [a Framework](environment-setup#start-a-new-react-native-project-with-expo). With a React Native Framework, you don't need to setup Android Studio or XCode as a Framework will take care of building the native app for you. -If you have constraints that prevent you from using a Framework, or you'd like to write your own Framework, then setting up your local environment is a requirement. After your environment is set up, learn how to [get started without a framework](get-started-without-a-framework). +If you have constraints that prevent you from using a Framework, or you'd like to write your own Framework, then setting up your local environment is a requirement. After your environment is set up, learn how to [get started without a framework](getting-started-without-a-framework).
::: @@ -71,7 +71,7 @@ If you have constraints that prevent you from using a Framework, or you'd like t ## Unsupported -> A Mac is required to build projects with native code for iOS. You can follow the **Expo Go Quickstart** to learn how to build your app using Expo instead. +> A Mac is required to build projects with native code for iOS. You can use [Expo Go](https://expo.dev/go) from [Expo](environment-setup#start-a-new-react-native-project-with-expo) to develop your app on your iOS device. @@ -95,7 +95,7 @@ If you have constraints that prevent you from using a Framework, or you'd like t ## Unsupported -> A Mac is required to build projects with native code for iOS. You can follow the **Expo Go Quickstart** to learn how to build your app using Expo instead. +> A Mac is required to build projects with native code for iOS. You can use [Expo Go](https://expo.dev/go) from [Expo](environment-setup#start-a-new-react-native-project-with-expo) to develop your app on your iOS device. diff --git a/docs/typescript.md b/docs/typescript.md index 8b256a880bd..e25b0f3b4eb 100644 --- a/docs/typescript.md +++ b/docs/typescript.md @@ -9,7 +9,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con ## Getting Started with TypeScript -New projects created by the [React Native CLI](get-started-without-a-framework#step-1-creating-a-new-application) or popular templates like [Ignite][ignite] will use TypeScript by default. +New projects created by the [React Native CLI](getting-started-without-a-framework#step-1-creating-a-new-application) or popular templates like [Ignite][ignite] will use TypeScript by default. TypeScript may also be used with [Expo][expo], which maintains TypeScript templates, or will prompt you to automatically install and configure TypeScript when a `.ts` or `.tsx` file is added to your project. From 51cb0522ca0eb274e1847dba356cda323aacb246 Mon Sep 17 00:00:00 2001 From: Jon Samp Date: Tue, 30 Apr 2024 00:14:08 -0500 Subject: [PATCH 16/20] adds framework definition --- docs/get-started-without-a-framework.md | 2 +- docs/set-up-your-environment.md | 2 +- website/architecture/architecture-glossary.md | 10 ++++++++++ 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/docs/get-started-without-a-framework.md b/docs/get-started-without-a-framework.md index 6cf49d881a7..86f31d89328 100644 --- a/docs/get-started-without-a-framework.md +++ b/docs/get-started-without-a-framework.md @@ -13,7 +13,7 @@ import RemoveGlobalCLI from './\_remove-global-cli.md'; -If you have constraints that are not served well by a Framework, or you prefer to write your own Framework, you can create a React Native app without using a Framework. +If you have constraints that are not served well by a [Framework](architecture/glossary#react-native-framework), or you prefer to write your own Framework, you can create a React Native app without using a Framework. To do so, you'll first need to [set up your environment](set-up-your-environment). Once you're set up, continue with the steps below to create an application and start developing. diff --git a/docs/set-up-your-environment.md b/docs/set-up-your-environment.md index bbdc45efc83..efa6a0b5815 100644 --- a/docs/set-up-your-environment.md +++ b/docs/set-up-your-environment.md @@ -21,7 +21,7 @@ This guide requires Android Studio or Xcode. If you already have one of these pr
Is setting up my environment required? -Setting up your environment is not required if you're using [a Framework](environment-setup#start-a-new-react-native-project-with-expo). With a React Native Framework, you don't need to setup Android Studio or XCode as a Framework will take care of building the native app for you. +Setting up your environment is not required if you're using a [Framework](architecture/glossary#react-native-framework). With a React Native Framework, you don't need to setup Android Studio or XCode as a Framework will take care of building the native app for you. If you have constraints that prevent you from using a Framework, or you'd like to write your own Framework, then setting up your local environment is a requirement. After your environment is set up, learn how to [get started without a framework](getting-started-without-a-framework). diff --git a/website/architecture/architecture-glossary.md b/website/architecture/architecture-glossary.md index f6b12305a52..10c876f09bd 100644 --- a/website/architecture/architecture-glossary.md +++ b/website/architecture/architecture-glossary.md @@ -44,6 +44,16 @@ React Components whose view implementation is provided by a host view (e.g., ` Date: Tue, 30 Apr 2024 00:44:06 -0500 Subject: [PATCH 17/20] fix links --- docs/get-started-without-a-framework.md | 2 +- docs/set-up-your-environment.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/get-started-without-a-framework.md b/docs/get-started-without-a-framework.md index 86f31d89328..cc12293c003 100644 --- a/docs/get-started-without-a-framework.md +++ b/docs/get-started-without-a-framework.md @@ -13,7 +13,7 @@ import RemoveGlobalCLI from './\_remove-global-cli.md'; -If you have constraints that are not served well by a [Framework](architecture/glossary#react-native-framework), or you prefer to write your own Framework, you can create a React Native app without using a Framework. +If you have constraints that are not served well by a [Framework](/architecture/glossary#react-native-framework), or you prefer to write your own Framework, you can create a React Native app without using a Framework. To do so, you'll first need to [set up your environment](set-up-your-environment). Once you're set up, continue with the steps below to create an application and start developing. diff --git a/docs/set-up-your-environment.md b/docs/set-up-your-environment.md index efa6a0b5815..cd4a388de63 100644 --- a/docs/set-up-your-environment.md +++ b/docs/set-up-your-environment.md @@ -21,7 +21,7 @@ This guide requires Android Studio or Xcode. If you already have one of these pr
Is setting up my environment required? -Setting up your environment is not required if you're using a [Framework](architecture/glossary#react-native-framework). With a React Native Framework, you don't need to setup Android Studio or XCode as a Framework will take care of building the native app for you. +Setting up your environment is not required if you're using a [Framework](/architecture/glossary#react-native-framework). With a React Native Framework, you don't need to setup Android Studio or XCode as a Framework will take care of building the native app for you. If you have constraints that prevent you from using a Framework, or you'd like to write your own Framework, then setting up your local environment is a requirement. After your environment is set up, learn how to [get started without a framework](getting-started-without-a-framework). From 16d65b872ae5981a78b4579c81a51f684932aa75 Mon Sep 17 00:00:00 2001 From: Jon Samp Date: Tue, 30 Apr 2024 23:52:42 -0500 Subject: [PATCH 18/20] fix lint --- website/architecture/architecture-glossary.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/architecture/architecture-glossary.md b/website/architecture/architecture-glossary.md index 10c876f09bd..75b005e3cd7 100644 --- a/website/architecture/architecture-glossary.md +++ b/website/architecture/architecture-glossary.md @@ -46,7 +46,7 @@ A _React Element Tree_ is created by React in JavaScript and consists of React E ## React Native Framework -React Native allows developers to use the [React programming paradigm](https://react.dev/learn/thinking-in-react) to ship applications to native targets. The React Native team is focused on creating **core APIs** and **functionalities** that fit the most general use case when developing native apps (not just restricted to Android and iOS). +React Native allows developers to use the [React programming paradigm](https://react.dev/learn/thinking-in-react) to ship applications to native targets. The React Native team is focused on creating **core APIs** and **functionalities** that fit the most general use case when developing native apps. Shipping native apps to production usually requires a set of tools and libraries that are not provided by default as part of React Native, but are still crucial to ship an app to production. Examples of such tools are: support for publishing applications to a dedicated store or support for routing and navigation mechanisms. From 2004fb29aa705df33dd6ecf2bcc5171a2be2c10b Mon Sep 17 00:00:00 2001 From: Nicola Corti Date: Tue, 7 May 2024 01:46:07 +0100 Subject: [PATCH 19/20] Update docs/getting-started.md --- docs/getting-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/getting-started.md b/docs/getting-started.md index 8adf835030a..5033146cf95 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -9,7 +9,7 @@ import BoxLink from '@site/src/theme/BoxLink'; **React Native allows developers who know React to create native apps.** At the same time, native developers can use React Native to gain parity between native platforms by writing common features once. -We believe that the best way to experience React Native is through a **Framework**, a toolbox with all the necessaries APIs to let you build production ready apps. +We believe that the best way to experience React Native is through a **Framework**, a toolbox with all the necessary APIs to let you build production ready apps. You can also use React Native without a Framework, however we’ve found that most developers benefit from using a React Native Framework like [Expo](https://expo.dev). Expo provides features like file-based routing, high-quality universal libraries, and the ability to write plugins that modify native code without having to manage native files. From bd7577d5c7b8ccc827f70b91fdd39b8f7d05cad6 Mon Sep 17 00:00:00 2001 From: Jon Samp Date: Fri, 10 May 2024 22:34:30 -0500 Subject: [PATCH 20/20] Update docs/getting-started.md Co-authored-by: Bartosz Kaszubowski --- docs/getting-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/getting-started.md b/docs/getting-started.md index 5033146cf95..35ca76f5638 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -46,4 +46,4 @@ npx create-expo-app@latest Once you’ve created your app, check out the rest of Expo’s getting started guide to start developing your app. -Continue with Expo +Continue with Expo