1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Write text using the React 360 Text component

    Tomasz ŁakomyTomasz Łakomy
    reactReact
    ^16.3.2

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 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.

    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.

    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.

    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.

    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.