In this section, we highlight some of key benefits and concepts of React VR.
One feature that makes React appealing is that it combines declarative UI elements with code that manipulates them in an elegant way.
UI elements are described by component tags that look similar to HTML. For example, the tag
<Greeting name='Joe'/> may describe a greeting
While using JSX is not mandatory, it is recommended for readability. The React website contains further details on JSX.
Working with React requires knowledge of some terminology and key concepts. Here is a quick summary of the most important concepts and how they interact:
Components - Components are reusable UI elements that can be used in tags, such as
<Greeting/>. React Native provides built-in
components such as
Image. Additional components are declared by deriving a class from
React.Component. Each user
component has an implementation that includes a
render() function which returns a set of child sub-components that fully
describe its contents.
Props - Components can take arguments such as a
<Greeting name='Rexxar'/>. Such arguments are known as properties or props and are accessed through the
name, from the above example, is accessible as
You can read more about this interaction under Components, Props and State.
State - Components can maintain an internal state that affects component display. When state data changes, the component re-renders itself. By React convention, all modifiable state is organized inside of a
this.state object within the component and can only be modified through
setState function, for example:
Events - Components can generate events that are raised when certain UI action occur. For example, the
View component generates
onExit events when the cursor enters and exits its area, respectively. Such events can be handled within the
component declaration to properly processes the interaction, for example:
Layout - React uses the flexbox algorithm and layout rules to automatically position components within a 2D plane. This layout
considers component dimensions, which are either computed or specified through width and height, as well as control style attributes
alignItems. This is further described in Layout and Style.
Style - Style objects control the look and layout of the component. They are generally specified through a style object. For example:
Instead of specifying all component attributes inline, style objects can be pulled out and declared externally with the help of StyleSheet.create. Such external stylesheets simplify component reuse. Although React StyleSheet objects share some attribute names with CSS, they are not directly related.
The following sections describe these items in more detail.
While originally developed to simplify development for the web, the React ecosystem has grown to include several varieties:
Although it runs in the browser, React VR has structurally more in common with React Native than React, as it supports many of the same tags such as <View> and <Text>. In addition to the 2D layout, it also introduces the concepts of 3D scenes, transformations, and panoramas, allowing objects to be placed in 3D space and rendered in VR.
Key concepts of the React Native framework are also valid for React VR. Here are some of these key concepts and links to further, more detailed information.
For React VR we use two key commands.
npm start starts the packager. This is a shortcut for the following command:
For static websites, you need save the generated content.
npm run bundle accomplishes this with a command similar to:
Due to the scope of the project, we only discuss our usage. For more general information on the Packager, see React Native Packager.
React VR uses the Fetch API for fetching resources across a network. If you have used
XMLHttpRequest or other networking APIs before, Fetch will seem familiar.
For information and examples about using Fetch with React Native, see Networking.
For the full list of Fetch properties, see the Fetch Request documentation.
For general information about Fetch, see the Fetch API documentation.
You can file an issue on GitHub if you see a typo or error on this page!