Home Linux HTML/CSS PHP React VR Blog PHP Fiddle

React VR: Code Practice

Quick Copy Boxes

JavaScriptReact VRCode Practice

React VR is a JavaScript framework used to create Virtual Reality applications. Let's practice editing our code!

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.

Part 1: Background Color

In the example below, I change the background color to yellow. Change the text's background color to anything you like.

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

Part 2: Delete "Beach Items"

Delete the text "Beach Items". Your code should now look like the example below.

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

Part 3: Create Class

Create a new class called "Heading". Use props to have the heading say "Beach Items". Format the text however you like.

// Heading
class Heading extends Component {
  render() {
		return (
			<Text style={{textAlign: "center", fontSize: 0.4, color: 'orange',backgroundColor: 'white',}}>{this.props.head}</Text>

Part 4: Add to Root Component

See the example below.

export default class Basics extends Component {

 	render() {
		return (
				<Pano source={asset('water-view.jpeg')}></Pano>
				    transform: [{translate: [0, 0, -3]}],
				    layoutOrigin: [0.5, 0.5]
          <Heading head='Beach Items' />
          <Beach text='Towel' />
          <Beach text='Sunscreen' />
          <Beach text='Beverage' />

You should see something like this:

Women in Tech:

Color Selector



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


Questions? Contact me on my social media:






T-shirt Shop

Coding Commanders Newsletter

Back to Exercise 4 | Continue to Exercise 6