Getting started with React Native

Getting Started

This page will help you install and build your first React Native app. If you already have React Native installed, you can skip ahead to the Tutorial.

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 Create React Native App, 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 iOS and Android, that’s fine – you just have to pick one to start with, since the setup is a bit different.

Development OS: macOS Windows Linux Target OS: iOS Android

Installing dependencies

You will need Node, the React Native command line interface, Python2, a JDK, and Android Studio.

While you can use any editor of your choice to develop your app, you will need to install Android Studio in order to set up the necessary tooling to build your React Native app for Android.

Node, Python2, JDK

We recommend installing Node and Python2 via Chocolatey, a popular package manager for Windows.

React Native also requires a recent version of the Java SE Development Kit (JDK), as well as Python 2. Both can be installed using Chocolatey.

Open an Administrator Command Prompt (right click Command Prompt and select “Run as Administrator”), then run the following command:

choco install -y nodejs.install python2 jdk8

If you have already installed Node on your system, make sure it is version 6 or newer. If you already have a JDK on your system, make sure it is version 8 or newer.

You can find additional installation options on Node’s Downloads page.

The React Native CLI

Node comes with npm, which lets you install the React Native command line interface.

Run the following command in a Command Prompt or shell:

npm install -g react-native-cli

If you get an error like Cannot find module 'npmlog', try installing npm directly: curl -0 -L https://npmjs.org/install.sh | sudo sh.

Android development environment

Setting up your development environment can be somewhat tedious if you’re new to Android development. If you’re already familiar with Android development, there are a few things you may need to configure. In either case, please make sure to carefully follow the next few steps.

1. Install Android Studio

Download and install Android Studio. Choose a “Custom” setup when prompted to select an installation type. Make sure the boxes next to all of the following are checked:

  • Android SDK
  • Android SDK Platform
  • Performance (Intel ® HAXM)
  • Android Virtual Device

Then, click “Next” to install all of these components.

If the checkboxes are grayed out, you will have a chance to install these components later on.

Once setup has finalized and you’re presented with the Welcome screen, proceed to the next step.

2. Install the Android SDK

Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 6.0 (Marshmallow) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.

The SDK Manager can be accessed from the “Welcome to Android Studio” screen. Click on “Configure”, then select “SDK Manager”.

Android Studio Welcome

The SDK Manager can also be found within the Android Studio “Preferences” dialog, under Appearance & Behavior → System Settings → Android SDK.

Select the “SDK Platforms” tab from within the SDK Manager, then check the box next to “Show Package Details” in the bottom right corner. Look for and expand the Android 6.0 (Marshmallow)entry, then make sure the following items are all checked:

  • Google APIs
  • Android SDK Platform 23
  • Intel x86 Atom_64 System Image
  • Google APIs Intel x86 Atom_64 System Image

Android SDK Manager

Next, select the “SDK Tools” tab and check the box next to “Show Package Details” here as well. Look for and expand the “Android SDK Build-Tools” entry, then make sure that 23.0.1 is selected.

Android SDK Manager - 23.0.1 Build Tools

Finally, click “Apply” to download and install the Android SDK and related build tools.

Android SDK Manager - Installs

3. Configure the ANDROID_HOME environment variable

The React Native tools require some environment variables to be set up in order to build apps with native code.

Open the System pane under System and Security in the Control Panel, then click on Change settings…. Open the Advanced tab and click on Environment Variables…. Click on New… to create a new ANDROID_HOME user variable that points to the path to your Android SDK:

ANDROID_HOME Environment Variable

The SDK is installed, by default, at the following location:

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk

You can find the actual location of the SDK in the Android Studio “Preferences” dialog, under Appearance & Behavior → System Settings → Android SDK.

Open a new Command Prompt window to ensure the new environment variable is loaded before proceeding to the next step.

Creating a new application

Use the React Native command line interface to generate a new React Native project called “AwesomeProject”:

react-native init AwesomeProject

This is not necessary if you are integrating React Native into an existing application, if you “ejected” from Create React Native App, or if you’re adding Android support to an existing React Native project (see Platform Specific Code).

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.

Either way, you will need to prepare the device to run Android apps for development.

Using a physical device

If you have a physical Android device, you can use it for development in place of an AVD by plugging it in to your computer using a USB cable and following the instructions here.

Using a virtual device

You can see the list of available Android Virtual Devices (AVDs) by opening the “AVD Manager” from within Android Studio. Look for an icon that looks like this:

Android Studio AVD Manager

If you have just installed Android Studio, you will likely need to create a new AVD. Select “Create Virtual Device…”, then pick any Phone from the list and click “Next”.

Android Studio AVD Manager

Select the “x86 Images” tab, then look for the Marshmallow API Level 23, x86_64 ABI image with a Android 6.0 (Google APIs) target.

Install HAXM

If you don’t have HAXM installed, click on “Install HAXM” or follow these instructions to set it up, then go back to the AVD Manager.

AVD List

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.

Running your React Native application

Run react-native run-android inside your React Native project folder:

cd AwesomeProject
react-native run-android

If everything is set up correctly, you should see your new app running in your Android emulator shortly.

AwesomeProject on Android

react-native run-android is just one way to run your app – you can also run it directly from within Android Studio or Nuclide.

If you can’t get this to work, see the Troubleshooting page.

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.
  • Press the R key twice or select Reload from the Developer Menu (Ctrl + M) to see your changes!

That’s it!

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

Now what?

  • Turn on Live Reload in the Developer Menu. Your app will now reload automatically whenever you save any changes!
  • If you want to add this new React Native code to an existing application, check out the Integration guide.

If you’re curious to learn more about React Native, continue on to the Tutorial.

How to Install Chocolatey on Windows

 

Requirements
Windows 7+ / Windows Server 2003+
PowerShell v2+
.NET Framework 4+ (the installation will attempt to install .NET 4.0 if you do not have it installed)
That’s it! All you need is choco.exe (that you get from the installation scripts) and you are good to go! No Visual Studio required.

Chocolatey installs in seconds. You are just a few steps from running choco right now!

First, ensure that you are using an administrative shell – you can also install as a non-admin, check out Non-Administrative Installation.
Copy the text specific to your command shell – cmd.exe or powershell.exe.
Paste the copied text into your shell and press Enter.
Wait a few seconds for the command to complete.
If you don’t see any errors, you are ready to use Chocolatey! Type choco or choco -? now.
NOTES:

If you are behind a proxy, please see Installing behind a proxy.
Need completely offline solution? See Completely Offline Install.
Installing the licensed edition? See install licensed edition.
More Options / Troubleshooting
Install with cmd.exe
Run the following command: (copy command text)

@”%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe” -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command “iex ((New-Object System.Net.WebClient).DownloadString(‘https://chocolatey.org/install.ps1’))” && SET “PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin”
Install with PowerShell.exe
With PowerShell, there is an additional step. You must ensure Get-ExecutionPolicy is not Restricted. We suggest using Bypass to bypass the policy to get things installed or AllSigned for quite a bit more security.

Run Get-ExecutionPolicy. If it returns Restricted, then run Set-ExecutionPolicy AllSigned or Set-ExecutionPolicy Bypass -Scope Process.
Now run the following command: (copy command text)
Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString(‘https://chocolatey.org/install.ps1’))
Additional considerations
NOTE: Please inspect https://chocolatey.org/install.ps1 prior to running any of these scripts to ensure safety. We already know it’s safe, but you should verify the security and contents of any script from the internet you are not familiar with. All of these scripts download a remote PowerShell script and execute it on your machine.

We take security very seriously. Learn more.

More Install Options
Troubleshooting? Proxy? Need more options?
More Options

Upgrading Chocolatey
Once installed, Chocolatey can be upgraded in exactly the same way as any other package that has been installed using Chocolatey. Simply use the command to upgrade to the latest stable release of Chocolatey:

choco upgrade chocolatey
Uninstalling Chocolatey
See uninstall.

FAQs
I’m having trouble installing Chocolatey
Make sure you’ve reviewed More Install Options and looked over Troubleshooting. If you’ve done those things, reach out over the mailing list or over the chat (Gitter). The links to those can be found in the open source section of https://chocolatey.org/support.

I’m getting a 403 attempting to install
This is addressed in Troubleshooting.

Why isn’t there an MSI?
tl;dr – Chocolatey installs as a nupkg like everything else, a PowerShell install script just ensures that.

Chocolatey was born out of providing automation for Windows and doing that with packages, packages that could surround an installer but didn’t necessarily need to. The Chocolatey install scripts use the Chocolatey package (a nupkg file itself) to be installed and upgraded as just another package. This means Chocolatey is “eating its own dogfood” and it is unlikely we’d offer it as an MSI (native installer)as it would fly a bit in the face of what Chocolatey represents (although it is something that we would not rule out).

The installation actually ensures a couple of things:

PowerShell is installed and is set up properly.

PowerShell is a requirement for using Chocolatey, not just for install. It is what drives the package installation process in most cases. Every package can have binaries and/or installation/uninstallation scripts (written in PowerShell). Chocolatey is the framework and each package gets to define how it is installed, upgraded, and uninstalled. It’s an extremely flexible framework that has been proven to meet the insanity that is the Windows software installation ecosystem. That flexibility would not be easily achieved without PowerShell.

We do recognize there are a few organizations that disable PowerShell, so it’s very likely in the future our Business Edition will meet that need. PowerShell is a staple of Windows automation, so it is not the norm for an organization in this day and age to disable PowerShell.

Having an install process that uses PowerShell helps you determine quickly if Chocolatey will be able to be used in your environment.

You are open to doing things in a slightly different way, e.g. working with packages as opposed to installers.

You are open to the concept of using packages. Some folks might say this means we are asking folks to learn to ‘do things “our way” because we know better’. It’s less about “knowing better” and more about learning that Chocolatey does things in a slightly different way. It does that because the world of software is not just installers. Software goes beyond Programs and Features and a system that can track all of that also needs to as well. Package management is not a new concept in the world of software, perhaps just newer to Windows. If folks are not open to that, then they are probably not going to be open to Chocolatey. And that’s completely fine. Chocolatey is not for everyone. We may eventually get to more of a masses approach. Right now we are targeting a specific type of audience – those that are looking for better ways to manage software on Windows and open to looking for the best process of doing that.

 

______

Chocolatey – like yum or apt-get, but for Windows

You can just call me choco.

Or, you can find us in IRC at #chocolatey on freenode. IRC is not as often checked by committers, so it is recommended you stick to Gitter if you need more timely assistance.

Please make sure you’ve read over and agree with the etiquette regarding communication.

Support Chocolatey!

See Chocolatey In Action

Chocolatey FOSS install showing tab completion and refreshenv (a way to update environment variables without restarting your shell):

install

Chocolatey Pro showing private CDN download cache and virus scan protection:

install w/pro

Etiquette Regarding Communication

If you are an open source user requesting support, please remember that most folks in the Chocolatey community are volunteers that have lives outside of open source and are not paid to ensure things work for you, so please be considerate of others’ time when you are asking for things. Many of us have families that also need time as well and only have so much time to give on a daily basis. A little consideration and patience can go a long way. After all, you are using a pretty good tool without cost. It may not be perfect (yet), and we know that.

If you are using a commercial edition of Chocolatey, you have different terms! Please see support.

Information

Documentation

Ethereum Solidity contracts extension

How to install it

  • Install Visual Studio Code
  • Press Ctrl + P and type “ext install “. Note: The trailing space.
  • Type “Solidity”, click in the extension and you are done.

 

Solidity support for Visual Studio code

Solidity is the language used in Ethereum to create smart contracts, this extension provides:

  • Syntax highlighting
  • Snippets
  • Compilation of the current contract (Press F1 Solidity : Compile Current Solidity Contract), or F5
  • Compilation of all the contracts (Press F1 Solidity : Compile all Solidity Contracts), or Ctrl+F5 / Cmd+F5
  • Code completion for all contracts / libraries in the current file and all referenced imports
  • Default project structure (solidity files needs to be in the ‘src’ directory, and libraries in the ‘lib’ directory). Libraries will follow the same structure.
  • Compilation supporting EIP82 (dappfile and dependency packages)
  • Support for different solidity versions (Remote and local)
  • Code generation using https://github.com/Nethereum/abi-code-gen, it includes currently the default template for Nethereum service, dtos generation. (Open ‘contractName.json’ after compilation from the bin folder. Press F1 and press Solidity: Code generate from compilation output..) Please contribute more templates.
  • Linting using Solhint or Solium

Instructions

Using a different version of the solidity compiler

Sometimes you may want to use a different compiler than the one provided. All the different versions of the solidity compiler can be found in this repository: You can find all the different versions in the solc-bin repository https://github.com/ethereum/solc-bin/tree/gh-pages/bin

Currently we support three ways supported to use a different version of the solidity compiler.

Remote download

To compile using a remote version, you need to change the following user setting, with the version required, for example ‘latest’ or ‘v0.4.3+commit.2353da71’

"solidity.compileUsingRemoteVersion" : "latest"

Using Local file

If you don’t have an internet connection, you can download the compiler and change your user settings to use this. The local file will be use instead of remote.

"solidity.compileUsingLocalVersion" : "C:\\Users\\JuanFran\\Downloads\\soljson-v0.4.15%2Bcommit.bbb8e64f.js"

Npm / node installation

If you need to use an specific version for a project, you can also install solc locally in your solidity project folder.

npm install solc 

Default project structure

A default project / library dependency structure is supported as follows: Screenshot

Libraries will have the same name as their folder they are included. Solidity files will be in the ‘src’ folder. Libraries will be included in the ‘lib’ folder.

Currently there is no name conflicting resolution, so the first library found matching a name, will be the first one used.

Code completion

Just press Ctlr + Space or Command + Space to autocomplete statements, currently supported all the storage variables, functions and events (with snippets) included in the current document and every document in the import chain. Also supported all the global variables, global functions, types and units.

Screenshot

Auto compilation and error highlighting

Auto compilation of files and error highlighting can be enabled or disabled using user settings. Also a default delay is implemented for all the validations (compilation and linting) as solidity compilation can be slow when you have many dependencies.

"solidity.enabledAsYouTypeCompilationErrorCheck": true,
"solidity.validationDelay": 1500

Linting

Solhint

To lint Solidity code you can use the Solhint linter https://github.com/protofire/solhint, the linter can be configured it using the following user settings:

"solidity.linter": "solhint",
"solidity.solhintRules": {
  "avoid-sha3": "warn"
}

This extension supports .solhint.json configuration file. It must be placed to project root directory. After any changes in .solhint.json it will be synchronized with current IDE configuration.

Solium

Solium is the default linter of supported by the extesion https://github.com/duaraghav8/Solium, you can configure it using the following user settings:

"solidity.linter": "solium",
"solidity.soliumRules": {
    "quotes": ["error", "double"],
    "indentation": ["error", 4]
},

soliumrc.json support will be included in the near future, for specific project linting requirements.

Contributing / Issues / Requests

For ideas, issues, additions, modifications please raise an issue or a pull request at https://github.com/juanfranblanco/vscode-solidity/ and send a message on gitter at https://gitter.im/vscode-solidity/Lobby or https://gitter.im/Nethereum/Nethereum to get an instant notification.

Credits

Many thanks to:

Christian Reitwiessner and the Ethereum team for Solidity https://github.com/ethereum/solidity

Raghav Dua and everyone that contributed to Solium, the solidity linter, and the solidity parser.

Ilya Drabenia for creating the Solhint linter and the integration into the extension.

Nexus team for the original creation of the dappfile to structure contracts in projects https://github.com/nexusdev/dapple.

Beau Gunderson for contributing the initial integration of solium https://github.com/juanfranblanco/vscode-solidity/issues/24, the initial server and error mappings.

Bram Hoven for starting the multiple package dependency support for different environments (node_modules, lib)

Nick Addison, Elazar Gershuni, Joe Whittles for their contributions.

Sebastian Bürgel for keeping reminding me of the offline installation suppport

David Krmpotic and Ralph Pichler for the original Sublime extension https://github.com/davidhq/SublimeEthereum

Everyone for their support and feedback!