Home Linux HTML/CSS PHP T-shirt Shop React VR Blog PHP Fiddle

React VR Props








Quick Copy Boxes

JavaScriptReact VRprops

React VR is a JavaScript framework used to create Virtual Reality applications. In this lesson, we will learn about props.

In this lesson we will use props to create a list.

Visit Setting up React VR to set up.

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


Props VS State

Components use two types of data: props and state.

Props are the creation of a component's parameters. This allows us to reuse the same component, even if you have to alter its properties. However, props are only used for static data.

State is used for variable data.

Step 1: Create Directories

Create a sections directory. Inside sections, create a sub-directory called pano

$ cd reactVR/Basics/
$ mkdir sections
$ cd sections
$ mkdir pano

Step 2: Copy/Paste index.vr.js

Copy and paste the index.vr.js into the new pano directory.

Step 3: Beach Class

Next, we will create a class called "Beach" and add "Text" component.


import React, { Component } from 'react';
import { AppRegistry, asset, Pano, View, Text} from 'react-vr';
// new class
class Beach extends Component {
}
export default class Basics extends Component {
 	render() {
		return (
			<View>
				<Pano source={asset('water-view.JPEG')}></Pano>
			</View>
		)
	}
};
AppRegistry.registerComponent('Basics',() => Basics);
    

Text - add text component
Beach class - create Beach class


Step 4: Render Function

Create the render() function for your new Beach component.


class Beach extends Component {
	render() {
		return (
			<Text>Beach Items: Towel</Text>
		)
	}
};
    

text component -

To display the text, you have to format it and add a view.

Step 5: Format Text

Next we will center the text and define its color and size.

**Note, ReactVR measures size in meters (not pixels).


class Beach extends Component {
	render() {
		return (
			<Text style={{textAlign: "center", fontSize: 0.4, color: 'black'}}>Beach Items: Towel</Text>
		)
	}
};
    

align - centered
font size - .4
color - black

Fiverr

Step 6: Create a New Sub-View

Create a new sub-View below your Pano component. Add 3 of your Beach components to the new View. Center all the text.


export default class Basics extends Component {

 	render() {
		return (
			<View>
				<Pano source={asset('water-view.JPEG')}></Pano>
				<View
				  style={{
				    transform: [{translate: [0, 0, -3]}],
				    layoutOrigin: [0.5, 0.5]
				  }}>
					<Beach />
					<Beach />
					<Beach />
				</View>
			</View>
		)
	}
};
    

view - New code creating our subview.
Beach - Our Beach class components


Step 7: Use Props

Use props to change the Beach Items, using the text attribute.

Change:


<Text style={{textAlign: 'center', fontSize: 0.4, color: 'yellow'}}>Beach Items: Towel</Text>
     

To:


<Text style={{textAlign: 'center', fontSize: 0.4, color: 'yellow'}}>Beach Items: {this.props.text}</Text>
  

Change:


<Beach />
<Beach />
<Beach />
  

To:


<Beach text='Towel' />
<Beach text='Sun Screen' />
<Beach text='Beverage' />
  

Below Photo by Pok Rie from Pexels






Full Code

Your code should look like this:


import React, { Component } from 'react';
import { AppRegistry, asset, Pano, View, Text } from 'react-vr';

class Beach extends Component {
  render() {
    return (
      <Text style={{textAlign: 'center', fontSize: 0.4, color: 'yellow'}}>Beach Items: {this.props.text}</Text>
    )
  }
}

export default class Basics extends Component {
  render() {
    return (
      <View>
        <Pano source={asset('water-view.JPEG')}></Pano>
        <View
          style={{
            transform: [{translate: [0, 0, -3]}],
            layoutOrigin: [0.5, 0.5]
          }}>
          <Beach text='Towel' />
          <Beach text='Sun Screen' />
          <Beach text='Beverage' />
        </View>
      </View>
    )
  }
};

AppRegistry.registerComponent('Basics',() => Basics);
  
Women in Tech:

Coding Commanders Newsletter



Color Selector



Hex:


RBG:


If you find my tutorials helpful, please consider donating to support my free web development resources.

The more money I raise, the more content I can produce.

Thank you,
Commander Candy

DONATE




Back to Exercise 3 | Continue to Exercise 5