Skip to content

Commit ccdfe1b

Browse files
jonsampcortinicoSimek
authored
Adds getting started docs with React Native Frameworks (#4086)
* updates getting started doc * adds react native without a framework, updates to "get started" * adds platform support * updates 0.73 sidebar * remove redirects * revert unneeded changes * use unversioned * apply feedback * remove unnecessary changes * mention env setup and get started on integration docs * fixing links * fix typo * fix broken link * adds platform support to RNC CLI page * incorporate feedback pt 1 * adds framework definition * fix links * fix lint * Update docs/getting-started.md * Update docs/getting-started.md Co-authored-by: Bartosz Kaszubowski <gosimek@gmail.com> --------- Co-authored-by: Nicola Corti <corti.nico@gmail.com> Co-authored-by: Bartosz Kaszubowski <gosimek@gmail.com>
1 parent 18b7e78 commit ccdfe1b

25 files changed

Lines changed: 575 additions & 548 deletions

‎docs/_getting-started-linux-android.md‎

Lines changed: 3 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
import RemoveGlobalCLI from './\_remove-global-cli.md';
2-
import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
3-
41
## Installing dependencies
52

63
You will need Node, the React Native command line interface, a JDK, and Android Studio.
@@ -74,32 +71,6 @@ Follow the [Watchman installation guide](https://facebook.github.io/watchman/doc
7471

7572
> [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).
7673
77-
<h3>React Native Command Line Interface</h3>
78-
79-
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 <command>`, the current stable version of the CLI will be downloaded and executed at the time the command is run.
80-
81-
<h2>Creating a new application</h2>
82-
83-
<RemoveGlobalCLI />
84-
85-
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":
86-
87-
```shell
88-
npx react-native@latest init AwesomeProject
89-
```
90-
91-
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).
92-
93-
<h3>[Optional] Using a specific version or template</h3>
94-
95-
If you want to start a new project with a specific React Native version, you can use the `--version` argument:
96-
97-
```shell
98-
npx react-native@X.XX.X init AwesomeProject --version X.XX.X
99-
```
100-
101-
You can also start a project with a custom React Native template with the `--template` argument.
102-
10374
<h2>Preparing the Android device</h2>
10475

10576
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.
@@ -120,77 +91,15 @@ If you have recently installed Android Studio, you will likely need to [create a
12091

12192
> 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.
12293
123-
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.
124-
125-
<h2>Running your React Native application</h2>
126-
127-
<h3>Step 1: Start Metro</h3>
128-
129-
[**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:
130-
131-
<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
132-
<TabItem value="npm">
133-
134-
```shell
135-
npm start
136-
```
137-
138-
</TabItem>
139-
<TabItem value="yarn">
140-
141-
```shell
142-
yarn start
143-
```
144-
145-
</TabItem>
146-
</Tabs>
147-
148-
:::note
149-
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.
150-
:::
151-
152-
<h3>Step 2: Start your application</h3>
153-
154-
Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following:
155-
156-
<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
157-
<TabItem value="npm">
158-
159-
```shell
160-
npm run android
161-
```
162-
163-
</TabItem>
164-
<TabItem value="yarn">
165-
166-
```shell
167-
yarn android
168-
```
169-
170-
</TabItem>
171-
</Tabs>
172-
173-
If everything is set up correctly, you should see your new app running in your Android emulator shortly.
174-
175-
This is one way to run your app - you can also run it directly from within Android Studio.
176-
177-
> If you can't get this to work, see the [Troubleshooting](troubleshooting.md) page.
178-
179-
<h3>Modifying your app</h3>
180-
181-
Now that you have successfully run the app, let's modify it.
182-
183-
- Open `App.tsx` in your text editor of choice and edit some lines.
184-
- Press the <kbd>R</kbd> key twice or select `Reload` from the Dev Menu (<kbd>Ctrl</kbd> + <kbd>M</kbd>) to see your changes!
94+
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.
18595

18696
<h3>That's it!</h3>
18797

188-
Congratulations! You've successfully run and modified your first React Native app.
98+
Congratulations! You successfully set up your development environment.
18999

190100
<center><img src="/docs/assets/GettingStartedCongratulations.png" width="150"></img></center>
191101

192102
<h2>Now what?</h2>
193103

194104
- If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md).
195-
196-
If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started).
105+
- If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started).

‎docs/_getting-started-macos-android.md‎

Lines changed: 3 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
import RemoveGlobalCLI from './\_remove-global-cli.md';
2-
import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
3-
41
## Installing dependencies
52

63
You will need Node, Watchman, the React Native command line interface, a JDK, and Android Studio.
@@ -90,32 +87,6 @@ Run `source ~/.zprofile` (or `source ~/.bash_profile` for `bash`) to load the co
9087

9188
> 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**.
9289
93-
<h3>React Native Command Line Interface</h3>
94-
95-
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 <command>`, the current stable version of the CLI will be downloaded and executed at the time the command is run.
96-
97-
<h2>Creating a new application</h2>
98-
99-
<RemoveGlobalCLI />
100-
101-
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":
102-
103-
```shell
104-
npx react-native@latest init AwesomeProject
105-
```
106-
107-
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).
108-
109-
<h3>[Optional] Using a specific version or template</h3>
110-
111-
If you want to start a new project with a specific React Native version, you can use the `--version` argument:
112-
113-
```shell
114-
npx react-native@X.XX.X init AwesomeProject --version X.XX.X
115-
```
116-
117-
You can also start a project with a custom React Native template with the `--template` argument.
118-
11990
<h2>Preparing the Android device</h2>
12091

12192
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.
@@ -134,77 +105,15 @@ If you use Android Studio to open `./AwesomeProject/android`, you can see the li
134105

135106
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.
136107

137-
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.
138-
139-
<h2>Running your React Native application</h2>
140-
141-
<h3>Step 1: Start Metro</h3>
142-
143-
[**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:
144-
145-
<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
146-
<TabItem value="npm">
147-
148-
```shell
149-
npm start
150-
```
151-
152-
</TabItem>
153-
<TabItem value="yarn">
154-
155-
```shell
156-
yarn start
157-
```
158-
159-
</TabItem>
160-
</Tabs>
161-
162-
:::note
163-
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.
164-
:::
165-
166-
<h3>Step 2: Start your application</h3>
167-
168-
<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
169-
<TabItem value="npm">
170-
171-
```shell
172-
npm run android
173-
```
174-
175-
</TabItem>
176-
<TabItem value="yarn">
177-
178-
```shell
179-
yarn android
180-
```
181-
182-
</TabItem>
183-
</Tabs>
184-
185-
If everything is set up correctly, you should see your new app running in your Android emulator shortly.
186-
187-
![AwesomeProject on Android](/docs/assets/GettingStartedAndroidSuccessMacOS.png)
188-
189-
This is one way to run your app - you can also run it directly from within Android Studio.
190-
191-
> If you can't get this to work, see the [Troubleshooting](troubleshooting.md) page.
192-
193-
<h3>Modifying your app</h3>
194-
195-
Now that you have successfully run the app, let's modify it.
196-
197-
- Open `App.tsx` in your text editor of choice and edit some lines.
198-
- Press the <kbd>R</kbd> key twice or select `Reload` from the Dev Menu (<kbd>Cmd ⌘</kbd> + <kbd>M</kbd>) to see your changes!
108+
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.
199109

200110
<h3>That's it!</h3>
201111

202-
Congratulations! You've successfully run and modified your first React Native app.
112+
Congratulations! You successfully set up your development environment.
203113

204114
<center><img src="/docs/assets/GettingStartedCongratulations.png" width="150"></img></center>
205115

206116
<h2>Now what?</h2>
207117

208118
- If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md).
209-
210-
If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started).
119+
- If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started).

‎docs/_getting-started-macos-ios.md‎

Lines changed: 4 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
import RemoveGlobalCLI from './\_remove-global-cli.md';
2-
import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import constants from '@site/core/TabsConstants';
3-
41
## Installing dependencies
52

63
You will need Node, Watchman, the React Native command line interface, Xcode and CocoaPods.
@@ -44,44 +41,6 @@ If you are using Xcode version 14.0 or greater than to install a simulator, open
4441

4542
For more information, please visit [CocoaPods Getting Started guide](https://guides.cocoapods.org/using/getting-started.html).
4643

47-
### React Native Command Line Interface
48-
49-
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 <command>`, the current stable version of the CLI will be downloaded and executed at the time the command is run.
50-
51-
## Creating a new application
52-
53-
<RemoveGlobalCLI />
54-
55-
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":
56-
57-
```shell
58-
npx react-native@latest init AwesomeProject
59-
```
60-
61-
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).
62-
63-
:::info
64-
65-
If you are having trouble with iOS, try to reinstall the dependencies by running:
66-
67-
1. `cd ios` to navigate to the `ios` folder.
68-
2. `bundle install` to install [Bundler](https://bundler.io/)
69-
3. `bundle exec pod install` to install the iOS dependencies managed by CocoaPods.
70-
71-
:::
72-
73-
### [Optional] Using a specific version or template
74-
75-
If you want to start a new project with a specific React Native version, you can use the `--version` argument:
76-
77-
```shell
78-
npx react-native@X.XX.X init AwesomeProject --version X.XX.X
79-
```
80-
81-
You can also start a project with a custom React Native template with the `--template` argument.
82-
83-
> **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`.
84-
8544
### [Optional] Configuring your environment
8645

8746
Starting from React Native version 0.69, it is possible to configure the Xcode environment using the `.xcode.env` file provided by the template.
@@ -102,81 +61,13 @@ export NVM_DIR="$HOME/.nvm"
10261
You might also want to ensure that all "shell script build phase" of your Xcode project, is using `/bin/zsh` as its shell.
10362
:::
10463

105-
## Running your React Native application
106-
107-
### Step 1: Start Metro
108-
109-
[**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:
110-
111-
<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
112-
<TabItem value="npm">
113-
114-
```shell
115-
npm start
116-
```
117-
118-
</TabItem>
119-
<TabItem value="yarn">
120-
121-
```shell
122-
yarn start
123-
```
124-
125-
</TabItem>
126-
</Tabs>
127-
128-
:::note
129-
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.
130-
:::
131-
132-
### Step 2: Start your application
64+
<h3>That's it!</h3>
13365

134-
Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following:
135-
136-
<Tabs groupId="package-manager" queryString defaultValue={constants.defaultPackageManager} values={constants.packageManagers}>
137-
<TabItem value="npm">
138-
139-
```shell
140-
npm run ios
141-
```
142-
143-
</TabItem>
144-
<TabItem value="yarn">
145-
146-
```shell
147-
yarn ios
148-
```
149-
150-
</TabItem>
151-
</Tabs>
152-
153-
You should see your new app running in the iOS Simulator shortly.
154-
155-
![AwesomeProject on iOS](/docs/assets/GettingStartediOSSuccess.png)
156-
157-
This is one way to run your app. You can also run it directly from within Xcode.
158-
159-
> If you can't get this to work, see the [Troubleshooting](troubleshooting.md) page.
160-
161-
### Running on a device
162-
163-
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).
164-
165-
### Modifying your app
166-
167-
Now that you have successfully run the app, let's modify it.
168-
169-
- Open `App.tsx` in your text editor of choice and edit some lines.
170-
- Hit <kbd>Cmd ⌘</kbd> + <kbd>R</kbd> in your iOS Simulator to reload the app and see your changes!
171-
172-
### That's it!
173-
174-
Congratulations! You've successfully run and modified your first React Native app.
66+
Congratulations! You successfully set up your development environment.
17567

17668
<center><img src="/docs/assets/GettingStartedCongratulations.png" width="150"></img></center>
17769

178-
## Now what?
70+
<h2>Now what?</h2>
17971

18072
- If you want to add this new React Native code to an existing application, check out the [Integration guide](integration-with-existing-apps.md).
181-
182-
If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started).
73+
- If you're curious to learn more about React Native, check out the [Introduction to React Native](getting-started).

0 commit comments

Comments
 (0)