diff --git a/packages/react-native/template/README.md b/packages/react-native/template/README.md new file mode 100644 index 00000000000000..e2ad0710bb13da --- /dev/null +++ b/packages/react-native/template/README.md @@ -0,0 +1,78 @@ +This is a [**React Native**](https://reactnative.dev) project bootstrapped with [`npx react-native@latest init`](https://github.com/react-native-community/cli/tree/main#creating-a-new-react-native-project). + +# Getting Started + +>**Note:** Make sure you have completed the [React Native - Environment Setup](https://reactnative.dev/docs/environment-setup) instructions till [Creating a new application](https://reactnative.dev/docs/environment-setup#:~:text=Creating%20a%20new%20application) step, before proceeding. + +## Step 1: Start the Metro Server + +First, you will need to start Metro, the JavaScript _bundler_ that ships _with_ React Native. Metro "takes in an entry file and various options, and returns a single JavaScript file that includes all your code and its dependencies."—[Metro Docs](https://facebook.github.io/metro/docs/concepts) + +To start Metro, run `yarn start` _inside your React Native project folder_: + +```bash +yarn start +``` + +Doing so, will starts the **Metro Bundler**. + +>**Note:** You can use `npx` instead of `yarn` when running React Native commands inside an existing project. Just replace `yarn` with `npx` and follow the commands (syntax) provided in `package.json` **`scripts`**. + +## 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: + +```bash +# For Android +yarn android + +# For iOS +yarn ios +``` + +If everything is set up _correctly_, you should see your new app running in your _Android Emulator_ or _iOS Simulator_ shortly provided you have set up your emulator correctly. + +`yarn android` and `yarn ios` is one way to run your app - you can also run it directly from within Android Studio and Xcode respectively. + + +## Step 3: Modifying your App + +Now that you have successfully run the app, let's modify it. + +1. Open `App.tsx` in your text editor of choice and edit some lines. +2. For _Android_: Press the R key twice or select **"Reload"** from the **Developer Menu** (Ctrl + M or ⌘ + M) to see your changes! + + For _iOS_: Hit ⌘ + R in your iOS Simulator to reload the app and see your changes! + +That's it! +Congratulations! :tada: You've successfully run and modified your first React Native app. :partying_face: + +### Now what? + +- If you want to add this new React Native code to an existing application, check out the [Integration guide](https://reactnative.dev/docs/integration-with-existing-apps). +- If you're curious to learn more about React Native, check out the [Introduction to React Native](https://reactnative.dev/docs/getting-started). + +# Troubleshooting + +If you can't get this to work, see the [Troubleshooting](https://reactnative.dev/docs/troubleshooting) page. + +# Learn More + +To learn more about React Native, take a look at the following resources: + +- [Getting Started](https://reactnative.dev/docs/getting-started) - an **overview** of React Native and how setup your environment. +- [Learn the Basics](https://reactnative.dev/docs/getting-started) - a **guided tour** of the React Native **basics**. +- [Core Components](https://reactnative.dev/docs/components-and-apis) - a guided tour of the React Native **Core Components**. +- [API Reference](https://reactnative.dev/docs/accessibilityinfo) - a complete description of the React Native **APIs**. +- [Hooks Reference](https://reactnative.dev/docs/usecolorscheme) - a complete guide to React Native **Hooks**. +- [Android APIs](https://reactnative.dev/docs/backhandler) - a description of the React Native **Android APIs**. +- [iOS APIs](https://reactnative.dev/docs/actionsheetios) - a description of the React Native **iOS APIs**. +- [Blog](https://reactnative.dev/blog) - read the latest official React Native **Blog** posts. +- [Architecture](https://reactnative.dev/architecture/overview) - explains how React Native works under the hood. +- [Contributing](https://reactnative.dev/contributing/overview) - learn how to **contribute** to React Native. +- [Community](https://reactnative.dev/community/overview) - more **resources** for help and support. + +You can check out [the React Native GitHub repository](https://github.com/facebook/react-native) - your feedback and contributions are welcome! +And, if you :heart: React Native don't forget to :star: + +![GitHub Repo stars](https://img.shields.io/github/stars/facebook/react-native?style=social)