Build 360 and VR website with React 360

React 360

What is React 360?

React 360 is a framework that let’s you create 3D and VR user interfaces. It’s built on top of React framework. React 360 is optimised for the creation of user interfaces that power rich multimedia experiences.

Let’s understand it’s usage with this small react 360 app.

Building Basic React 360 App

Prerequisite:

Before getting started, you’ll need to have Node.js install in your system. While React 360 runs in your web browser, the build pipeline that bundles up your code relies on Node.

Starting with it:

Installing React 360 CLI tool that will be used to create and manage react 360 apps. Open terminal and run this command.

npm install -g react-360-cli

Now you have React 360 CLI install, So let’s create an app with name “my360app”. Run command below in terminal:

react-360 init my360app

When you build React 360 applications, you have a number of source code and library files that need to be bundled into a single file for a web browser to load. Metro is the JS bundler used by projects like React 360 and React Native, and is designed to meet their needs.

Go to project directory.

cd my360app

Start the App using

npm start

After starting the app go to http://localhost:8081/index.html, It will take some time to bundle files after that you will see one screen like below.

React 360 Template Screen

Now you have default template of React 360. When you open the directory, you’ll see that few files already created. We’ll explore what each file does, and how it fits into the whole.

Exploring the Code:

index.js
This is the main code of your application, it is where all of your React code lives. This is the code that makes your application unique, and determines how it looks. Any code imported by index.js will also become a part of your app, allowing you to organise your app into many different files.

client.js
This is the code that connects your browser to your React application — the Runtime. This file does three things. First, it creates a new instance of React 360, loading your React code and attaching it to a specific place in the DOM. This is also where your application can pass a variety of initialization options, which will be discussed later.

index.html
This is the web page you load when viewing your application. All it does is provide a point to mount your JavaScript code. Most functionality is left out of HTML, so that you can easily integrate your React 360 application into server-render pages or existing web apps.

That’s it for our super-simple introduction to the React 360 library. Explore the code and make awesome 360 VR experience.

Repo: https://github.com/icpsoni/blog-react-360