In accordance with the ancient traditions of our people, our first React VR project doesn't do much other than display "hello" over a panorama. You can look at its source code file
index.vr.js in the starter project folder. This file is the entry point for your React VR application.
React applications are divided into components – structural elements that define the rendering of parts of your application and update themselves in response to changes in input.
This code declares your top-level component,
WelcomeToVR, and determines how to render it.
Our code begins by importing dependencies. Next, it declares the
WelcomeToVR component, including how it renders. Our code ends by registering with the
AppRegistry. This last part is only necessary for the top-level component in your application and you can safely ignore it otherwise.
You might notice that the contents of the
Declarations such as
JSX tags allow you to cleanly describe your UI; we talk more about them below.
Let's examine the structure of our component. We return a
View component, which has two children: a
Pano and a
Panocreates a box around your world that renders a 360 photo. It is this component that renders the environment you see when you look around this sample.
Textrenders strings in 3D space. This particular
Texttag has been styled to place a large word in the middle of your world. We cover the style attribute in more detail elsewhere.
Viewcomponents are typically used as containers; they hold other components and can be used to provide the spacing and style your UI needs. Our component creates a
Textwrapped in a
Each React component must return a single element when it renders, so our component with two children needs to wrap them in a
With a better understanding of what this code does, you can make some changes.
In Getting Started, we created a project called WelcomeToVR, so let's change the greeting from “hello” to “welcome.”
Nested between the opening and closing
<Text> tags is the text string that gets rendered. Change this to “welcome”.
Assuming that npm is running, you can refresh your web page to see the results.
extends, and the
() =>syntax in the example above are all ES2015 features. This page has a good overview of ES2015 features.
The statements such as
Our Hello World sample defines
WelcomeToVR as a new
Component and registers it with the
AppRegistry tells React VR which component is the root for the whole application.
You don't need to think about
AppRegistry a lot, as there will probably just be one call to
AppRegistry.registerComponent in the whole app.
It is included above so that you can paste the whole thing into your
index.vr.js file and get it running.
When you're building a React VR app, you'll be making lots of new components. Anything you see on the screen is some sort of component. A component can be very simple; the only thing that's required is a
render function that returns some JSX to render.
You can file an issue on GitHub if you see a typo or error on this page!