Hello, everyone. I'm Hamza Hawi, mobile and web VR developer and founder of HYO. As you know, I'm going to talk about virtual reality with React and how can we create new VR experiences using React 360 framework and run it into our web browser and all the VR devices. To get started, what is React 360? React 360 is JavaScript framework created by Facebook for the creation of 3D and VR user interfaces built on the top of React. This library is designed to simplify the creation of complex UI. And as you know, React 360 allows us to use the familiar concepts and tools of React and React Native. To get started, all what you have to do is install the React 360 CLI via npm, then init a new project and do an npm start to make sure that everything is going fine and you will have your default project into your web browser. For the folder structure, we have the static assets folder, which contains our 3D objects files and the material files, sounds, images, videos, all the media files should be here. And we have the client.js file and here where we create our locations and surfaces. And we have the index file, which is our main file. For the components, we have four main components. First, the views, which is kind of like divs, and text component and the image component and the VR button, which is a normal button, but on VR. The most important thing on VR is surfaces. We use surfaces to render the 2D UI components and we have two types of surfaces, cylinder surface and the flat surface. We have two angles, the yaw angle and the pitch angle. And every surface should have a width and height that should be given by the developer. For the location, locations are used to render 3D UI components. And we use the Cartesian coordinate, x, y and z. And at the end, we create a new route, which will help us to connect our surface to the upper registry on the index file. As you see here, we have the z-axis and here if z is negative, the object will be on the front. If z is positive, the object will be on the back. And we have the x for the pitch and y for the yaw. Here is an example. So here we like to add 3D objects into our VR application. All what we have to do is import the entity from entity. Entity is used to render the 3D objects on React360. We use here the, if you like, you will use the ambient light for the light intensity. And we use the source to give the link to our object. Here our object have two extensions, the object and the material, and we can style it as you see here. We have transforms and too many options to style our 3D object. If you like to run this application on your web browser, just scan the following QR code and you will have this application on your phone or your web browser, on computer, on any VR device. And now we will move to the code. Let's see what we have. Here is what this looks like. It's similar to React Native and React as you see here. We use the flexbox for the styling and we have the client file. As you see here, we have a new surface and we give it a root, which is a slide root. And if you go to the index file, you will see here we have the app registry with the slide root and the class name, which is slides. Here it is. And for the 3D objects, we have a model, the model class, and as you see here, we have the entity object with an asset, which is a Porsche car, and we give it texture, which is a default image that we have here. So let's run it into our web browser. Let's do localhost and run it and wait until it's fresh. And here we are in our React 360 application. As you see here, we have the slides and we can change between them. We have video here and we can change our background image. I think it's all what you have to know about React 360 to get started. For further questions or help, just contact me on Twitter or GitHub, Facebook, email, and thank you for watching. I hope that you enjoyed the talk and thank you for everything. Bye.