Visual Studio React



-->

The App Center SDK uses a modular architecture so you can use any or all of the services.

When installing the extension React development could be really fun As VS Code from version 0.10.10 supports React components syntax inside js files the snippets are available for JavaScript language as well. In the following example you can see the usage of a React stateless component with prop types snippets inside a js and not jsx file. React Studio has an advanced visual layout engine that lets you create smart keylines, use relative sizes together with device-independent offsets, and position elements on screen relative to screen edges, keylines, or preceding elements. Launch the command pallete and look for Create React Component. That should create the component code for you in the current file. If the file is Untitled, the default name MyComponent is used. More features and lifecycle hooks will be added soon.

Let's get started with setting up App Center React Native SDK in your app to use App Center Analytics and App Center Crashes.

1. Prerequisites

Before you begin, make sure that the following prerequisites are met:

Studio
  • You're using a React Native project that runs React Native 0.34 or later.
  • You're targeting devices that are running on Android Version 5.0/API level 21 or later, or iOS version 9.0 or later.
  • You're not using any other library that provides Crash Reporting functionality on iOS.
  • For iOS, the default way to use the SDK requires CocoaPods. (If you haven't installed CocoaPods, follow the CocoaPods Getting Started to do so). Nonetheless, it's possible to link the SDK manually.
React

2. Create your app in the App Center Portal to obtain the App Secret

If you've already created your app in the App Center portal, you can skip this step.

  1. Head over to appcenter.ms.
  2. Sign up or log in and hit the blue button on the top right corner of the portal that says Add new and select Add new app from the dropdown menu.
  3. Enter a name and an optional description for your app.
  4. Select the appropriate OS (Android or iOS) and select React Native as the platform.
  5. Hit the button at the bottom right that says Add new app.

Once you've created an app, you can obtain its App Secret on the Settings page on the App Center Portal. At the top right hand corner of the Settings page, click on the triple vertical dots and select Copy app secret to get your App Secret.

3. Add the App Center SDK modules

The default integration of the SDK uses CocoaPods for iOS. If you're not using CocoaPods in your app, you need to integrate the React Native SDK manually for your iOS app.

Open a Terminal and navigate to the root of your React Native project, then enter the following line to add App Center Analytics and Crashes to the app:

In case you prefer yarn over npm, use the following command to install App Center:

The App Center SDK uses a modular approach, where you just add the modules for App Center services that you want to use. appcenter-analytics and appcenter-crashes make sense to add to almost every app, as they provide value with no additional setup required. appcenter provides general purpose App Center APIs, useful for multiple services.

3.1 Integrate the SDK automatically for React Native 0.60

3.1.1 Integrate React Native iOS

  1. Run pod install --repo-update from iOS directory to install CocoaPods dependencies.

  2. Create a new file with the name AppCenter-Config.plist with the following content and replace {APP_SECRET_VALUE} with your app secret value. Don't forget to add this file to the Xcode project (right-click the app in Xcode and click Add files to ...).

  3. Modify the app's AppDelegate.m file to include code for starting SDK:

    • Add these lines to import section above the #if DEBUG or #ifdef FB_SONARKIT_ENABLED declaration (if present):
    • Add these lines to the didFinishLaunchingWithOptions method

3.1.2 Integrate React Native Android

  1. Create a new file with the name appcenter-config.json in android/app/src/main/assets/ with the following content and replace {APP_SECRET_VALUE} with your app secret value.

Note: If the folder named assets doesn't exist, it should be created under 'project_root/android/app/src/main/assets'

  1. Modify the app's res/values/strings.xml to include the following lines:

3.2 Integrate the SDK automatically for React Native lower than 0.60

Visual Studio React Download

Note

If you have your React modules linked using relative path inside your Podfile but not referenced in the project, the linking script will fail because it links App Center using static pod versions. You either must follow the steps from the React Native troubleshooting section if you've already run the linking script, or link it yourself

  1. Link the plugins to the React Native app by using the react-native link command.

    For iOS, it will try to download the App Center SDK for iOS and macOS from CocoaPods, if you see an error like:

    Run the following command:

    And then retry running react-native link.

    Note

    App Center SDK doesn't set up mocks automatically for App Center modules during the linking process. If you're using Jest test framework in your application and experience errors caused by the App Center SDK while running tests with Jest, add the following to the jest section of package.json file (include only modules in use):

    Note

    Whether processing of crashes is automatic or triggered by Javascript methods, crashes are always processed after the restart of the application. Crashes can't be processed at the time the application crashes.

  2. Edit the project's android/app/src/main/assets/appcenter-config.json and replace the YOUR_APP_SECRET placeholder value with your App Center project's application secret.

  3. Edit the project's ios/{YourAppName}/AppCenter-Config.plist file, and replace the YOUR_APP_SECRET placeholder value with your App Center project's application secret. If AppCenter-Config.plist already exists but not part of your Xcode project, you must add it to the Xcode project manually (right-click the app in XCode and click Add files to ...).

3.3 [iOS only] Integrate the SDK manually for React Native without react-native link or CocoaPods

Do this integration, if you don't want to use CocoaPods.We strongly recommend integrating the SDK via CocoaPods as described above. Nonetheless, it's also possible to integrate the iOS native SDK manually.

Note

The latest App Center React Native SDK doesn't necessarily depend on the latest App Center iOS SDK, because the iOS SDK is updated and released before the React Native one.

The consequence is that you must know which version of the iOS SDK the React Native SDK depends on.

  1. Download the App Center SDK for React Native frameworks provided as a zip file and unzip it.

  2. You'll see a folder named AppCenterReactNativeShared which contains a single framework for the required React Native iOS bridge.

  3. Download the corresponding App Center SDK for iOS frameworks provided as a zip file and unzip it.

  4. You'll see a folder called AppCenter-SDK-Apple/iOS that contains different frameworks for each App Center service. The framework called AppCenter is required in the project as it contains code that's shared between the different modules.

  5. [Optional] Create a subdirectory for 3rd-party libraries.

    • As a best practice, 3rd-party libraries usually reside inside a subdirectory (it's often called Vendor), so if you don't have your project organized with a subdirectory for libraries, create a Vendor subdirectory now (under the ios directory of your project).
    • Create a group called Vendor inside your Xcode project to mimic your file structure on disk.

  6. Open Finder and copy the previously unzipped AppCenter-SDK-Apple/iOS and AppCenterReactNativeShared folders into your project's folder at the location where you want it to reside.

  7. Add the SDK frameworks to the project in Xcode:

    • Make sure the Project Navigator is visible (⌘+1).
    • Drag and drop the AppCenter.framework, AppCenterAnalytics.framework, AppCenterCrashes.framework and AppCenterReactNativeShared.framework files from the Finder (in the location from the previous step) into Xcode's Project Navigator. The AppCenter.framework and AppCenterReactNativeShared.framework files are required to start the SDK, make sure they're added to your project, otherwise the other modules won't work and your app won't compile.
    • A dialog will appear, make sure your app target is checked, then click Finish.

  8. Link AppCenter React Native plugins projects to your app's project:

    • Make sure the Project Navigator is visible (⌘+1).

    • For each AppCenter React Native plugin navigate to the folder containing source code. Paths respectively will be

      • /node_modules/appcenter/ios
      • /node_modules/appcenter-analytics/ios
      • /node_modules/appcenter-crashes/ios
      • /node_modules/appcenter-push/ios

    • Drag and drop .xcodeproj files from the Finder into Xcode's Project Navigator. Typically under Libraries group.

  9. Link libraries for AppCenter React Native plugins.Open your project settings and under General tab in the Linked Frameworks and Libraries section add new items referencing target libraries added on the previous step:

    • libAppCenterReactNative.a
    • libAppCenterReactNativeAnalytics.a
    • libAppCenterReactNativeCrashes.a
    • libAppCenterReactNativePush.a

  10. Modify Header Search Paths to find headers from the AppCenter React Native plugins projects.Open your project settings and under Build Settings tab in the Header Search Paths section add new locations for header files:

  • $(SRCROOT)/../node_modules/appcenter/ios/AppCenterReactNative
  • $(SRCROOT)/../node_modules/appcenter-analytics/ios/AppCenterReactNativeAnalytics
  • $(SRCROOT)/../node_modules/appcenter-crashes/ios/AppCenterReactNativeCrashes
  • $(SRCROOT)/../node_modules/appcenter-push/ios/AppCenterReactNativePush

  1. Modify the app's AppDelegate.m file to include code for starting SDK:

    • Add these lines to import section above the #if DEBUG or #ifdef FB_SONARKIT_ENABLED declaration (if present):
    • Add these lines to the didFinishLaunchingWithOptions method

  2. Create new file with the name AppCenter-Config.plist with the following content and replace {APP_SECRET_VALUE} with your app secret value. Don't forget to add this file to the XCode project (right-click the app in XCode and click Add files to ...).

Note

The next two steps are only for the apps that use React Native 0.60 and above.

  1. Disable autolinking for React Native 0.60 and above:

    • Inside the node_modules folder in each App Center package open react-native.config.js and set dependency.platforms.ios to null:

  2. Modify Header Search Paths to find React Native headers from the App Center React Native plugins projects:

    • Make sure the Project Navigator is visible (⌘+1).
    • For each AppCenter React Native plugins project that you've added to the Libraries group in step 8:
      • Select the project and under Build Settings tab in the Header Search Paths section add new locations for header files with a recursive option: ${SRCROOT}/../../../ios/Pods/Headers

3.4 [Android only] Integrate the SDK manually for React Native lower than 0.60 without react-native link

Integration steps without the react-native link command.

  1. Open android/settings.gradle file and insert the following lines. Include the dependencies that you want in your project. Each SDK module needs to be added as a separate dependency in this section. If you want to use App Center Analytics and Crashes, add the following lines:

Note

Due to termination of jCenter support all our assemblies were moved to the Maven Central repository. Please follow this guide about migration from jCenter to Maven Central.

  1. Open the project's app level build.gradle file (android/app/build.gradle) and add the following lines into dependencies section:

  2. Modify the app's MainApplication.java file to include code for starting SDK:

    • Add these lines to the import section
    • Add AppCenter packages to the List<ReactPackage> getPackages() method

  3. Open strings.xml file (android/app/src/main/res/values) and add the following lines inside <resources></resources> tags:

  4. Create a new file with the name appcenter-config.json in android/app/src/main/assets/ with the following content and replace APP_SECRET_VALUE with your app secret value.

3.5 If you use auto-backup to avoid getting incorrect information about device, follow the next steps:

Note

Visual studio react project

Apps that target Android 6.0 (API level 23) or higher have Auto Backup automatically enabled.

Note

If you already have a custom file with backup rule, switch to the third step.

a. Create appcenter_backup_rule.xml file in the android/app/src/main/res/xml folder.

b. Open the project's AndroidManifest.xml file. Add the android:fullBackupContent attribute to the <application> element. It should point to the appcenter_backup_rule.xml resource file.

c. Add the following backup rules to the appcenter_backup_rule.xml file:

4. Start the SDK

Now you can build and launch your application either from command line or Xcode/Android Studio.

4.1 Build and run your application from command line

You may build and launch your iOS application by the following command:

Tip

You can launch it on an iOS simulator or iOS device by specifying the iOS device name in react-native run-ios --device 'myDeviceName'.

You may build and launch your Android application by the following command:

Tip

You can launch it on an android emulator or android device by specifying the device id in react-native run-android --deviceId 'myDeviceId' (deviceId from adb devices command).

4.2 Build and run your application from Xcode or Android Studio

For iOS, open your project's ios/{appname}.xcworkspace or ios/{appname}.xcodeproj file in Xcode and build from there.

Note

If you linked App Center automatically via react-native link (as in step 3.1), you should open the project's ios/{appname}.xcworkspace file in Xcode. Because App Center CocoaPods dependencies only works with xcworkspace not xcodeproj, and the ios/{appname}.xcodeproj file won't have App Center CocoaPods dependencies linked.

For Android, import your android project in Android Studio and build from there.

Visual

You're all set to visualize Analytics and Crashes data on the portal that the SDK collects automatically. There's no additional setup required. Look at Analytics and Crashes section for APIs guides and walkthroughs to learn what App Center can do.

React is a popular JavaScript library developed by Facebook for building web application user interfaces. The Visual Studio Code editor supports React.js IntelliSense and code navigation out of the box.

Welcome to React

We'll be using the create-react-appgenerator for this tutorial. To install and use the generator as well as run the React application server, you'll need the Node.js JavaScript runtime and npm (the Node.js package manager) installed. npm is included with Node.js which you can install from here.

Tip: To test that you have Node.js and npm correctly install on your machine, you can type node --version and npm --version.

To install the create-react-app generator, in a terminal or command prompt type:

This may take a few minutes to install. You can now create a new React application by typing:

where my-app is the name of the folder for your application. This may take a few minutes to create the React application and install it's dependencies.

Let's quickly run our React application by navigating to the new folder and typing npm start to start the web server and open the application in a browser:

You should see 'Welcome to React' on http://localhost:3000 in your browser. We'll leave the web server running while we look at the application with VS Code.

To open your React application in VS Code, open another terminal (or command prompt) and navigate to the my-app folder and type code .:

Markdown Preview

In the File Explorer, one file you'll see is the application README.md Markdown file. This has lots of great information about the application and React in general. A nice way to review the README is by using the VS Code Markdown Preview. You can open the preview in either the current editor group (Markdown: Open Previewkb(markdown.showPreview)) or in a new editor group to the side (Markdown: Open Preview to the Sidekb(markdown.showPreviewToSide)). You'll get nice formatting, hyperlink navigation to headers, and syntax highlighting in code blocks.

Syntax highlighting and bracket matching

Now expand the src folder and select the index.js file. You'll notice that VS Code has syntax highlighting for the various source code elements and, if you put the cursor on a parentheses, the matching bracket is also selected.

IntelliSense

As you start typing in index.js, you'll see smart suggestions or completions.

After you select a suggestion and type ., you see the types and methods on the object through IntelliSense.

Visual Studio React

VS Code uses the TypeScript language service for it's JavaScript code intelligence and it has a feature called Automatic Type Acquisition (ATA). ATA pulls down the npm Type Declaration files (*.d.ts) for the npm modules referenced in the package.json.

If you select a method, you'll also get parameter help:

Go to Definition, Peek definition

Through the TypeScript language service, VS Code can also provide type definition information in the editor through Go to Definition (kb(editor.action.gotodeclaration)) or Peek Definition (kb(editor.action.peekImplementation)). Put the cursor over the App, right click and select Peek Definition. A Peek window will open showing the App definition from App.js.

Press kbstyle(Escape) to close the Peek window.

Hello World!

Let's update the sample application to 'Hello World!'. Add the link to declare a new H1 header and replace the <App /> tag in ReactDOM.render with element.

Once you save the index.js file, the running instance of the server will update the web page and you'll see 'Hello World!'.

Visual Studio Reactjs

Tip: VS Code supports Auto Save, which by default saves your files after a delay. Check the Auto Save option in the File menu to turn on Auto Save or directly configure the files.autoSave user setting.

Debugging React

To debug the client side React code, we'll need to install the Debugger for Chrome extension.

Note: This tutorial assumes you have the Chrome browser installed. The builders of the Debugger for Chrome extension also have versions for the Safari on iOS and Edge browsers.

Open the Extensions view (kb(workbench.view.extensions)) and type 'chrome` in the search box. You'll see several extensions which reference Chrome.

Press the Install button for Debugger for Chrome. The button will change to Installing then, after completing the installation, it will change to Reload. Press Reload to restart VS Code and activate the extension.

Set a breakpoint

To set a breakpoint in index.js, click on the gutter to the left of the line numbers. This will set a breakpoint which will be visible as a red circle.

Configure the Chrome debugger

We need to initially configure the debugger. To do so, go to the Debug view (kb(workbench.view.debug)) and click on gear button to create a launch.json debugger configuration file. Choose Chrome from the Select Environment dropdown. This will create a launch.json file in a new .vscode folder in your project which includes configuration to both launch the website or attach to a running instance.

We need to make one change for our example: change the port from 8080 to 3000. Your launch.json should look like this:

Ensure that your development server is running ('npm start'). Then press kb(workbench.action.debug.start) or the green arrow to launch the debugger and open a new browser instance. The source code where the breakpoint is set runs on startup before the debugger was attached so we won't hit the breakpoint until we refresh the web page. Refresh the page and you should hit your breakpoint.

You can step through your source code (kb(workbench.action.debug.stepOver)), inspect variables such as element, and see the call stack of the client side React application.

The Debugger for Chrome extension README has lots of information on other configurations, working with sourcemaps, and troubleshooting. You can review it directly within VS Code from the Extensions view by clicking on the extension item and opening the Details view.

Linting

Linters analyze your source code and can warn you about potential problems before you run your application. The JavaScript language services included with VS Code has syntax error checking support by default which you can see in action in the Problems panel (View > Problemskb(workbench.actions.view.problems)).

Try making a small error in your React source code and you'll see a red squiggle and an error in the Problems panel.

Linters can provide more sophisticated analysis, enforcing coding conventions and detecting anti-patterns. A popular JavaScript linter is ESLint. ESLint when combined with the ESLint VS Code extension provides a great in-product linting experience.

First install the ESLint command line tool:

Then install the ESLint extension by going to the Extensions view and typing 'eslint'.

Once the ESLint extension is installed and VS Code reloaded, you'll want to create an ESLint configuration file eslintrc.json. You can create one using the extension's ESLint: Create 'eslintrc.json' File command from the Command Palette (kb(workbench.action.showCommands)).

The command will create a .eslintrc.json file in your project root:

ESLint will now analyze open files and shows a warning in index.js about 'App' being defined but never used.

You can modify the ESLint rules and the ESLint extension provides IntelliSense in eslintrc.json.

Let's add an error rule for extra semi-colons:

Now when you mistakenly have multiple semicolons on a line, you'll see an error (red squiggle) in the editor and error entry in the Problems panel.

Visual Studio React Plugin

Popular Starter Kits

In this tutorial, we used the create-react-app generator to create a simple React application. There are lots of great samples and starter kits available to help build your first React application.

VS Code React Sample

This is a sample React application used for a demo at this year's //Build conference. The sample creates a simple TODO application and includes the source code for a Node.js Express server. It also shows how to use the Babel ES6 transpiler and then use webpack to bundle the site assets.

MERN Starter

If you'd like to see a full MERN (MongoDB, Express, React, Node.js) stack example, look at the MERN Starter. You'll need to install and start MongoDB but you'll quickly have a MERN application running. There is helpful VS Code-specific documentation at vscode-recipes which details setting up Node.js server debugging.

Visual Studio React App

TypeScript React

If you're curious about TypeScript and React, you can also create a TypeScript version of the create-react-app application. See the details at TypeScript-React-Starter on the TypeScript Quick Start site.

Angular

Angular is another popular web framework. If you'd like to see an example of Angular working with VS Code, check out the Chrome Debugging with Angular CLI recipe. It will walk you through creating an Angular application and configuring the launch.json file for the Debugger for Chrome extension.

Common Questions

Q: Can I get IntelliSense within declarative JSX?

A: Yes. For example, if you open the create-react-app project's app.js file, you can see IntelliSense within the React JSX in the render() method.