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

    Start a Virtual Reality project with React 360

    Tomasz ŁakomyTomasz Łakomy
    reactReact
    ^16.3.2

    React allows us to create web, native and... VR applications with React 360

    In this lesson we are going to learn how to start a Virtual Reality project with React 360 (previously known as React VR) and start making first changes to a "hello world" VR React application.

    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: 0:00 In order to get started with React 360, first install React 360 CLI from npm. Once this is done, create a new product. Use the init command. We're going to call our product Travel VR because our app will allow people to travel.

    0:13 This is going to take a while because React 360 has a lot of dependencies. Once this is done, go to our product directory, and then run npm start. This is going to start React Native packager. This is going to tell us to open our browser at this URL.

    0:25 Once we do that, we need to wait a while in order for all dependencies to be loaded, but once it's done, we can see the result over here.

    0:31 We have this 360 view. We can look around. We have this text, "Welcome to React 360," in front of us. Let's take a look inside of the code. The important thing to know about React 360 is that even though it runs inside of the fancy VR environment, it's not that different from React that we know for the Web.

    0:46 We do have index.html. We also have things like React components. We have views, which you may know from React Native. We also have our stylesheet objects, which basically allows us to write CSS and JS in VR.

    0:59 In order to track whether our project has been set up correctly, change this text to, "Welcome to Egghead." Save and refresh that. We can see this change over here, which means that now we are ready to go and implement our app.