Book Image

Getting Started with React VR

By : John Gwinner
Book Image

Getting Started with React VR

By: John Gwinner

Overview of this book

This book takes you on a journey to create intuitive and interactive Virtual Reality experiences by creating your first VR application using React VR 2.0.0. It starts by getting you up to speed with Virtual Reality (VR) and React VR components. It teaches you what Virtual Reality (VR) really is, why it works, how to describe 3D objects, the installation of Node.js (version 9.2.0) and WebVR browser. You will learn 3D polygon modeling, texturing, animating virtual objects and adding sound to your VR world. You will also discover ways to extend React VR with new features and native Three.js. You will learn how to include existing high-performance web code into your VR app. This book will also take you through upgrading and publishing your app. By the end of this book, you'll have a deep knowledge of Virtual Reality and a full-fledged working VR app to add to your profile!
Table of Contents (20 chapters)
Title Page
About the Author
About the Reviewers
Customer Feedback

JSX - the syntax of React VR

React VR will look familiar to HTML; this makes it easy to read, edit, and deploy. Behind the scenes, the UI syntactical glue that React and React VR use will be compiled into JSX or JavaScript eXtension. JSX is a React grammar extension to allow coding in a blend of HTML and JavaScript. You can also code JSX directly.

An example of React JSX is as follows:

constelement=<h1>My title!</h1>;

This is not a string, as it's not in quotes, and it's also not JavaScript. It's much more readable and easier to use than coding in JavaScript directly. JSX makes programming faster and more declarative.


It is useful, but all of this readability and easy-to-program nature comes with a few pitfalls. One of them is that semicolons will automatically get entered. Just like with HTML, you can include extra lines, but your code may get extra semicolons that you didn't intend.  Put parentheses around your code to avoid this--I also highly recommend reading up on the...