Write text using the React 360 Text component
In this lesson we are going to learn how to write text using <Text/> component in React 360 and how to style it using style property.
Instructor: [00:00] Start by removing all the boilerplate. This travelVR component is going to render null, and we are not going to have any styles. Next, render a view component. Inside of this view, we're going to have a text component, like this. I am going to type in "Hello, Egghead" inside of this text component.
[00:15] After we save and refresh this, we're going to see this text, "Hello, Egghead," appearing over here. We would like to be able to style both view -- view is basically like a div -- and a text component. To do that, we're going to have a mainView and a greetings object.
[00:31] Inside of the mainView, we're going to have a height of 600, width of 600, as well as padding of 10, and we're going to set the background color to this shade of gray. Inside of the greetings object, font size of 40. We're going to set the width to 50 percent, margin top to 5, background color to this shade of blue, and the color of the text to white.
[00:59] Each React 360 component takes a style property. We're going to set the style of this view to be equal to styles.mainView. We're going to set the style of this text to styles.greetings. After I save and refresh that, we're going to see the result over here.
[01:16] We can see both the view and the text component styled using the CSS that we've defined over here. We can use the same styles for multiple components. If I were to have another text component over here, and I would set the text to "Hello again," after I save, refresh that, we're going to have two text components with exactly the same styles applied.