Start a Virtual Reality project with React 360

Tomasz Łakomy
InstructorTomasz Łakomy
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 3 years ago

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.

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.

Samuel Suther
Samuel Suther
~ 5 years ago

You are talk way to fast on this Tutorial. Please think about, that not all people who join the workshop are English native speaker

Tomasz Łakomy
Tomasz Łakomyinstructor
~ 5 years ago

Hey!

As a non-native English speaker I can absolutely relate!

Sorry about that, if you have an egghead subscription you can decrease the speed if you like, enabling subtitles and going through the transcript might also help.

Samuel Suther
Samuel Suther
~ 5 years ago

yep, I still done this. But your intro-lesson is still way to fast. On second Video it's a bit better now. Will see how it works with the rest of the Videos. Sometimes it's much easier to follow if there are small interrupts so that the stuff you told could be settle down in mind :). Anyway. thanks for sharing this introduction in 360 Video.

Markdown supported.
Become a member to join the discussionEnroll Today