In this video Emmanuel Henri shows the project file and folder structure and explains their uses. He also adds the src folder where you will start adding new files soon.
- [Instructor] So we just created a brand new React VR project. Let's explore the folder structure and the main files. So go inside of your editor and if you don't have it loaded, make sure that you go inside of explorer and then you'll have a blue button and then load the specific project files, but we did that on the last video so you should have them too. Let's explore this a little bit. So the entry point for an application is always the index.vr.js. So if you take a look at this particular file and the project here, you see that there's hello and then there's a background image, basically the 360 that we're seeing here.
So if we go back inside of our editor, you'll see that this is the panoramic picture here that is the chess world and that's the 360 background that we see. The text hello is exactly this particular component here and we can change this to, for example, cool VR. And then save this and go back to our browser and refresh it, you'll see that now we have Cool VR as the text. And you can even change the CSS styles of that specific component and so these are the styles.
We also have in the folder structure, we have the package.json so if you're curious to see what our dependencies are that React VR uses, these are all the packages that we installed. So you also have a test folder where you have a few, well in this case, just one test. We're not going to cover tests for React VR, but this is very similar to what you would do in a React application. You have the node modules. And this is where the static assets are.
So right now we have only the background image that we're seeing, but all these static assets such as 3D models, other backgrounds, sound files, all the stuff that our media files, for example, are going to go inside of that folder. And then we have a VR folder with the index.html file and the configurations for React VR. So there's a bunch of options that you can set. We're not going to cover this in this course because this is an introduction to React VR.
If you want to have more information about these options, feel free to take a look at the documentation. So we have also a whole bunch of files. So the babel, flow configs, git ignore so these are all set up files. For example, this is for type checking. These are very similar files that you would get from a React or a React Native project. So one thing that I want to add in here is a source folder so let's go ahead and click on new folder and add source.
And I think I did it inside of the VR. Yeah so let's move that out. So basically the source folder is where we're going to put our new components and where we're going to call them from the index.vr.js, which is the entry point. If you've worked with React before, or especially with React Native, most of this will be familiar to you and you'll be able to jump right in and work on your React VR experience. Alright so let's move on.
- Finding inspiration on the web
- Testing projects with a Gear VR headset
- Working with 3D coordinates and transforms
- Building a 360-degree background
- Adding primate components and 3D models
- Adding sound and interactivity