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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!