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 (
      <View>
				<Pano source={asset('water-view.jpeg')}></Pano>
				<View>
				  style={{
				    transform: [{translate: [0, 0, -3]}],
				    layoutOrigin: [0.5, 0.5]
				  }}>
          <Heading head='Beach Items' />
          <Beach text='Towel' />
          <Beach text='Sunscreen' />
          <Beach text='Beverage' />
				</View>
			</View>
		)
	}
};
  

You should see something like this:

Women in Tech:


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


Questions? Contact me on my social media:

YouTube

GitHub

Facebook

Instagram

Twitter

T-shirt Shop

Coding Commanders Newsletter



Back to Exercise 4 | Continue to Exercise 6