React VR: Setting Up

React VR is a JavaScript framework used to create Virtual Reality applications. In this lesson we will install and setup React VR.

This lesson was inspired by a workshop I attended: ReactVR - a VR Workshop with Javascript. Thank you to Praveen Yalamanchi and Damian Montero.

Step 1: Install

You will need Node.JS and React VR installed

GOTO: React VR: Getting Started

Follow the instructions.

Step 2: Go to Terminal

➼ mkdir - make a directory called reactVR
➼ cd - Change directory to reactVR
➼ init - Add the Basics code to the directory

Step 3: Open in Text Edior

Open /reactVR/Basics/index.vr.js in text editor

You will see the following JSX components:
✶ Pano Component -- Panoramic Picture
✶ Text Component -- "Hello" centered on the screen
✶ View Component -- Data structure returned by render()

Step 4: Add Hot Reloading

You can add hot reloading, by editing the configuration file. This will automatically update the web browser to reflect saved changes. You will not have to refreash the browser.

Open: /reactVR/Basics/vr/client.js

function init(bundle, parent, options) {
  const vr = new VRInstance(bundle, 'Basics', parent, {
    // Add custom options here
    enableHotReload: true,
    ...options,
  });
  

➼ enableHotReload: true, - We turned on hot reload.

Step 5: Return to Terminal

$ cd Basics/
$ npm start

Step 6: Open Web Browser

✶ Open Google Chrome or Firefox.

✶ Goto: localhost:8081/vr/

✶ The first load will take a while, but don't worry. Subsequent loads are much quicker!

You should see something like the picture below

Continue to React VR Lesson 1