facebookarchive / react-360

Create amazing 360 and VR content using React
https://facebook.github.io/react-360
Other
8.73k stars 1.22k forks source link

How exactly do I incorporate react 360 into a larger js app (create-react-app) #730

Open drubio1989 opened 5 years ago

drubio1989 commented 5 years ago

Description

I need clarification to integrating react 360 into a larger application. For example, what files do I need to place in create-react-app? The documentation is not specific as to what to place where?

Reproduction

I have a fresh create-react-app folder structure: Screen Shot 2019-08-21 at 12 23 23 PM

The following are quotes from the documentation:

If you want to add your runtime code into part of a larger JS application, you can take the code found in your client.js file and place it into your app.

My issue is WHERE exactly do I place the client.js code in the application. Does it go in the src folder? In public? in its own separate folder?

  1. What about my index.js file? Where exactly do I place that file? Can I copy the contents of the index.js file and incoporate it into create-react-app's index.js file? It's not clear to me how that works.

  2. Do I need to create a separate div to attach?

This is what create-react-app attaches to <div id="root"></div>. How do I get my react 360 code to attach to that? Or do I need to create a separate attachment div inside of that one like the following?

`<div id="root">
    <div id="container"></div> #attach react code?
</div>`

Also, what is meant by this quote:

The recommended manner of embedding React 360 content into a larger web page is to use an Iframe. Point the src attribute of your