diff --git a/docs/getting-started.md b/docs/getting-started.md
index 41b42bdcec5..507ece0ed96 100644
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@@ -3,24 +3,19 @@ id: environment-setup
title: Setting up the development environment
---
+import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';
+
This page will help you install and build your first React Native app.
If you are new to mobile development, the easiest way to get started is with Expo CLI. Expo is a set of tools built around React Native and, while it has many [features](https://expo.io/features), 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.io/).
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.
-
-
-
- Expo CLI Quickstart
-
-
- React Native CLI Quickstart
-
-
-
+
+
+
-
+
Assuming that you have [Node 12 LTS](https://nodejs.org/en/download/) or greater installed, you can use npm to install the Expo CLI command line utility:
@@ -82,28 +77,101 @@ Expo CLI configures your project to use the most recent React Native version tha
If you're integrating React Native into an existing project, you'll want to skip Expo CLI and go directly to setting up the native build 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 "ejected" from Expo, 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:
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
Installing dependencies
+
+You will need Node, Watchman, the React Native command line interface, and Xcode.
+
+While you can use any editor of your choice to develop your app, you will need to install Xcode in order to set up the necessary tooling to build your React Native app for iOS.
+
+
+
+
+
+
+
+> Android developers may be familiar with this concept.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Unsupported
+
+
A Mac is required to build projects with native code for iOS. You can follow the Quick Start to learn how to build your app using Expo instead.
+
+
+
+
+
+
+
+> Android developers may be familiar with this concept.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Unsupported
+
+
A Mac is required to build projects with native code for iOS. You can follow the Quick Start to learn how to build your app using Expo instead.
+
+
+
+
+
+
+
+> Android developers may be familiar with this concept.
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/introduction.md b/docs/introduction.md
index e80dfc549c5..050d2cb7b54 100644
--- a/docs/introduction.md
+++ b/docs/introduction.md
@@ -4,6 +4,8 @@ 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';
+
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!
@@ -54,18 +56,9 @@ With React, you can make components using either classes or functions. Originall
[Hooks were introduced in React Native 0.58.](/blog/2019/03/12/releasing-react-native-059), and because Hooks are the future-facing way to write your React components, we wrote this introduction using function component examples. Where useful, we also cover class components under a toggle like so:
-
-
-
- Function Component Example
-
-
- Class Component Example
-
-
-
+
-
+
```SnackPlayer name=Hello%20World%20Function%20Component
import React from 'react';
@@ -86,7 +79,9 @@ const HelloWorldApp = () => {
export default HelloWorldApp;
```
-
+
+
+
```SnackPlayer name=Hello%20World%20Class%20Component
import React, { Component } from 'react';
@@ -109,7 +104,9 @@ class HelloWorldApp extends Component {
export default HelloWorldApp;
```
-
+
+
+
You can find more examples of class components in [previous versions of this documentation](/versions).
@@ -117,28 +114,27 @@ You can find more examples of class components in [previous versions of this doc
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:
-
- Developer Notes
-
-
-
-
-
-
+
-
+
> Web developers may be familiar with this concept.
-
+
+
+
> Android developers may be familiar with this concept.
-
+
+
+
> iOS developers may be familiar with this concept.
-
+
+
+
## Formatting
diff --git a/website/core/RemarkPlugins.js b/website/core/RemarkPlugins.js
new file mode 100644
index 00000000000..ff292a79e79
--- /dev/null
+++ b/website/core/RemarkPlugins.js
@@ -0,0 +1,128 @@
+'use strict';
+
+const hljs = require('highlight.js');
+const visit = require('unist-util-visit-parents');
+const u = require('unist-builder');
+
+function parseParams(paramString) {
+ var params = {};
+
+ if (paramString) {
+ var pairs = paramString.split('&');
+ for (var i = 0; i < pairs.length; i++) {
+ var pair = pairs[i].split('=');
+ params[pair[0]] = pair[1];
+ }
+ }
+
+ if (!params.platform) {
+ params.platform = 'web';
+ }
+
+ return params;
+}
+
+function htmlForCodeBlock(code) {
+ return (
+ '