Building VR Apps with React360

Evergreen

🌳

Last tended May 14, 2019

Web Development

Illustrated Notes

React

3D objects flying out of a browser

Turns out you can build almost anything in React now... including VR and AR apps inside a web browser.

There's a version of React called

React 360

that simplifies the otherwise niche and overly-complex challenge of making things fly around in virtual 3D space.

Tomasz Lakomy

made an entire egghead course that walks you through building

VR Applications Using React 360

Course illustration of objects in 3D space

Here's all my illustrated notes on the material.

Let's us build 3D and VR apps on the web - without needing to learn crazy complex tools like WebGL. Instead we can just use React

Uses flexbox for layouts. On the web it flexes across rows by default. But in VR it flexes downwards in a stacked columns. To add CSS styles to our views, we make a special React 360 stylesheet and then we pass them to the style tag

Add 3D models to your components with the Entity tag. We can apply CSS transforms to these

Want more illustrated notes on web development?

Take a look at

Building Custom React Hooks

Speaking the GraphQL Query Language

What the Fork is React Suspense?

Linked References

Building Custom React Hooks

Last year the React team released a feature called "hooks" that lets you do some powerful stuff we couldn't do as easily before... Managing state. Accessing DOM elements. Using side effects. It's…

What the Fork is xState?

xState is a snazzy way to manage JavaScript application state using visual state charts. It's a pretty wonderful tool for making sure you think through every possible edge case of an application…

Want to share?

Tell Twitter About It