What is React VR?

Trước khi bắt đầu với first project của React VR, bạn cần phải cài đặt dependencies sử dụng để build và manage ReactVR apps: Node.js và React VR CLI

Installing Node.js

Nếu bạn đã cài đặt Node.js, thì cần xem lại phiên bản của nó, ít nhất là từ version 4.0

• Mac: On Mac, Các bạn nên cài đặt Node.js qua Homebrew
• Windows: Get Windows installer từ trang download của node.js
• Linux: Đi đến trang nodejs.org package manager page để xem hướng dẫn cụ thể cho Linux distribution của bạn

Creating you first project

Chúng ta có thể sử dụng React VR command line interface tool để generate một project mới là WelcomeToVR. Một folder mới được tạo ra bao gồm bộ khung cho một React VR project và tìm ra những thứ cần thiết bên ngoài dependencies.

1. Nếu bạn đã running npm ở trong terminal window, nhấn CTRL + C để stop.
2. Chuyển tới thư mục chứa project của bạn
3. Cài đặt React VR CLI tool, sử dụng:

     npm install -g react-vr-cli
   

4. Use React VR CLI tool để create một ứng dụng mới ở trong WelcomeToVR folder và cài đặt required dependencies, sử dụng:

     react-vr init WelcomeToVR
   

5. Chuyển tới thư mục WelcomeToVR

     cd WelcomeToVR
   

6. Sử dụng start command để init local development server của bạn, sử dụng:

     npm start
   

7. Sử dụng web browser đi tới http://localhost:8081/vr/index.html, bạn sẽ nhìn thấy những thứ tương tự như sau:

Như chúng ta đã thấy, first project ở trên khá đơn giản với việc hiển thị chữ hello.Bạn có thể xem source code trong file index.vr.js ở trong folder start project.Ở đó có một file là điểm khởi đầu cho ứng dụng React VR.

import React from 'react';
import { AppRegistry, asset, Pano, Text, View } from 'react-vr';

class WelcomeToVR extends React.Component {
  render() {
    // Displays "hello" text on top of a loaded 360 panorama image.
    // Text is 0.8 meters in size and is centered three meters in front of you.
    return (
      <View>
        <Pano source={asset('chess-world.jpg')}/>
        <Text
          style={{
            backgroundColor: '#777879',
            fontSize: 0.8,
            layoutOrigin: [0.5, 0.5],
            paddingLeft: 0.2,
            paddingRight: 0.2,
            textAlign: 'center',
            textAlignVertical: 'center',
            transform: [{translate: [0, 0, -3]}],
          }}>
          hello
        </Text>
      </View>
    );
  }
};

AppRegistry.registerComponent('WelcomeToVR', () => WelcomeToVR);

React application được chia thành các phần tử thành phần cấu tạo để khai báo rendering của những phần trong ứng dụng và update chính nó trong response để thay đổi trong input.Đoạn code trên định nghĩa top-level component, WelcomeToVR, và xác định cách làm thế nào để render nó.Source code của chúng ta bắt đầu bằng việc importing denpendencies.Tiếp đó nó xác nhận WelcomeToVR component, bao gồm việc nó sẽ được render thế nào.Source code kết thúc bằng việc đăng kí với AppRegistry.Phần cuối cùng đó chỉ cần thiết cho top-level component trong application và mặc dù bạn có thể bỏ qua nó một cách an toàn.Bạn cần theo dõi nội dung của trạng thái return không hẳn là JavaScript.Khai báo giống như <View>, <Pano> và <Text> là sử dụng JSX, một kiểu syntax cho việc nhúng XML vào JavaScript.JSX tags cho phép bạn khai báo một cách khá gọn gàng, chúng ta sẽ tìm hiểu thêm ở phần dưới đây: Chúng ta hãy xem xét cấu trúc các components.Return một View component, nó sẽ có 2 con là Pano và Text:

• Pano tạo ra một box quanh world vào render một ảnh 360.Đó chính là component render ra môi trường mà bạn nhìn thấy quanh ví dụ trên
• Text render ra string trong không gian 3D.Nó cụ thể là Text tag được styled tới vị trí như trong hình trên.Tất nhiên có thể cover style của nó một cách chi tiết rồi.
• View component thường được sử dụng như là containers, chúng chứa các component khác và có thể được sử dụng để cung cấp khoảng cách cũng như style mà UI cần.Component của chúng ta tạo một Pano và một Text bọc trong một View. Mỗi một React component phải return một single element khi nó renders, vì thế component của bạn với 2 children cần bọc chúng trong một View.Để hiểu rõ hơn về ý nghĩa của các dòng code trên, bạn có thể thực hiện một số sự thay đổi, ở phần trước chúng ta đã tạo một project là WelcomeToVR, vì vậy hãy thử change text hello thành wellcome.Phần nằm trong cặp thẻ đóng mở <Text> là text string được rendered.Thay đổi nó thành well come.Nếu npm đang chạy, bạn cần refresh web page để xem được kết quả.

JSX and ES6 - What's going on?

Phát triển web hiện đại dựa chủ yếu vào các công cụ phân tích cú pháp và xử lý tiền xử lý JavaScript.Điều này được thực hiện bởi một số lí do, chẳng hạn như để gói nhiều tệp JavaScript với nhau hoặc để triển khai các tính năng ngôn ngữ mới.Đó chính xác là cách mà React command line interface làm, dịch nó để cài đặt JSX và ES6.

• JSX extends JavaScript với XML tag, cho phép bạn tổ chức document như một nested set của components trong một kiểu tương tự với HTML.JSX khiến cho việc viết ứng dụng React trở nên dễ dàng hơn nhiều.Bạn có thể tìm hiểu nhiều hơn về nó ở React's web site. Nếu bạn chắc chắn muốn sự liên kết chặt chẽ của JavaScript trong app của bạn, nó cũng có khả năng sử dụng React without JSX
• ES6, cũng được biết tới như là ES2015, viết tắt của ECMA Script 6, đó là một bộ cải tiến ngôn ngữ thành JavaScript.Bây giờ nó đã là một phần của chuẩn chính thức, nhưng không được hỗ trợ bởi tất cả các browsers, vì vậy một bước biên dịch là thường xuyên cần thiết.React Native với sự hỗ trợ của ES2015, vì thế bạn có thể sử dụng nó mà không cần lo lắng về sự tương thích.import, from, class, extends, và syntax () => trong ví dụ bên trên là các tính năng của ES2015.Learn ES2015 có một overview tốt của các tính năng trong ES2015. Các trạng thái như là <Text style={{ fontSize: 0.8, ...}}>hello</Text> bên trên được sử dụng trong JSX, mà cuối cùng được dịch sang JavaScript.Để tham khảo thêm có thể đọc trong React VR Overview

AppRegistry

App Hello World ở trên của chúng ta định nghĩa WelcomeToVR như một Component mới và đăng kí với AppRegistry.AppRegistry nói với React VR Thành phần nào là gốc rễ cho toàn bộ ứng dụng.Bạn không cần nghĩ về AppRegistry thêm nữa, giống như nó chỉ gọi một lần tới AppRegistry.registerComponent trong mỗi app.Nó đã bao gồm những thứ bên trên vì thế bạn cần paste bất cứ thứ gì đó vào file index.vr.js và chạy nó thôi. Khi bạn đã build một React VR app, bạn sẽ tạo ra rất nhiều components mới.Bất kì thứ gì bạn nhìn thấy trên màn hình là một vài sự sắp xếp của component.Một component có thể rất đơn giản, chỉ có thứ được required là một render function trả về JSX để render.

Understanding the project structure

Khi bạn bắt đầu chạy tool react-vr, nó đã tạo một nhóm các files trong thư mục project.Các file đó là gì?

• index.vr.js là điểm khởi đầu cho React VR app của bạn.Nó bao gồm code ứng dụng của bạn.
• static_assets bao gồm các resource ở bên ngoài.Textures, models và các objects khác bạn import có thể đặt ở đây.Chúng ta có thể reference với asset(path) method và nó sẽ tự động tìm tới vị trí chính xác.
• vr chứa support code cần thiết cho việc running app.Rất có thể là bạn không cần phải thay đổi những files này.Thư mục chứa index.html đó là trang khởi chạy ứng dụng của bạn.
• package.json là một file config cho ứng dụng của bạn.Nó nói với npm là làm thế nào để cài đặt dependencies ngoài project của bạn giống như React VR và OVRUI libraries.

Building a production release

Như vậy là bạn đã có chút kinh nghiệm để build một project rồi đúng không, và tiếp theo là thế nào để chia sẻ nó trên web.React VR đi với một tập lệnh để gói tất cả mọi thứ vào một vài files mà bạn có thể đặt trên máy chủ web của bạn.Từ thư mục gốc của project, run dòng dưới đây:

npm run bundle

Nó sẽ tạo ra một thư mục mới ở trong vr gọi build.Bên trong là các phiên bản đã được biên dịch của các application files của bạn.Chúng có thể được đặt trên máy chủ web và phải hoạt động mà không có bất kỳ thay đổi nào miễn là chúng được đặt trong cùng một thư mục.
Nếu bạn dùng assets ngoài (asset()), bạn cũng muốn copy thư mục static_assets bên cạnh files của bạn vì vậy nó có thể refer bởi ứng dụng của bạn.Tại thời điểm này, cấu trúc thư mục của bạn sẽ có dạng như sau:

Web Server
├─ static_assets/
│
├─ index.html
├─ index.bundle.js
└─ client.bundle.js

Nếu bạn muốn host các files JavaScript từ một location riêng, bạn có thể làm việc đó bằng cách sửa nội dung của index.html.Chắc chắn rằng script tag ở top chỉ tới đúng location cho client.bundle.js, và lời gọi tới ReactVR.init() chứa cả path chính xác tới index.bundle.js Nếu bạn muốn host các files asset của bạn từ location riêng như là một dedicated CDN, bạn có thể pass thư mục gốc tại ReacVR.init() call.Ví dụ nếu files của bạn được hosted tại https://cdn.example.com/vr_assets/, bạn cần thay đổi call method và indcluding third argument:

ReactVR.init(
  'path/to/index.bundle.js',
  document.body,
  { assetRoot: 'https://cdn.example.com/vr_assets/' }
);

Integrating with an existing web page

Nếu bạn mà muốn nhúng code VR, method không nên sử dụng ví dụ như <iframe> tag.Set thuộc tính src để chỉ tới project của bạn index.html và set một size thích hợp trên iframe

React là một open-source JavaScript từ Facebook có thể giúp tạo ra được nhiều giao diện tương tác với người dùng.React VR đặt nó ở trong level tiếp theo tạo UIs và 3D tạo bối cảnh thực tế ảo. Ở trong section này, chúng ta highlight một số vấn đề chính: lợi ích và khái niệm của React VR.

JSX and Declarative UIs.

Một tính năng khiến cho React hấp dẫn là nó kết hợp các thành phần UI khai báo với code thao tác chúng một cách mềm dẻo.Các thành phần UI được mô tả bởi component tag trông gần tương tự như là HTML.Ví dụ, tag <Greeting name='Joe'/> có thể miêu tả một greeting UI component cũng đặt một tên như một parameter.Những tags đó được insert trong JavaScript với sự trợ giúp của JSX. JSX là một syntax extension cho JavaScript, nó là pre-process trong React Native pakager để trở thành JavaScript.JSX cho phép miêu tả UI mềm dẻo hơn sau đó có thể thực thi với đoạn code sau:

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

compile thành:

React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

Việc sử dụng JSX là không bắt buộc, đó chỉ là một đề nghị để cho dễ đọc code.React website có phần chi tiết về JSX

Key React Concepts

Làm việc với React đòi hỏi kiến thức về một số thuật ngữ và khái niệm quan trọng.Đây là một bảng tóm tắt nhanh các khái niệm quan trọng nhất và cách chúng tương tác:

• Components -Components là một thành phần UI có thể tái sử dụng, có thể được dùng trong tags, giống như <Greeting/>.React Native cung cấp built-in components như là Text và Image.Components được thêm vào được khai báo bắt nguồn từ một class trong React.Component.Mỗi một user component có một cài đặt mà nó bao gồm một render() function trả về một tập con các sub-components mô tả đầy đủ các nội dung của nó.
• Props -Components có thể lấy các đối số như là name ở trong <Greeting name='Rexxar'/>.Những arguments được biết tới như là các thuộc tính hoặc props và được access thông qua biến this.props.name từ ví dụ bên trên được access như là {this.props.name}.Bạn có thể đọc nhiều về sự tương tác ở phần sau: Components, Props and State.
• State -Components có thể duy trì trạng thái nội bộ ảnh hưởng đến hiện thị component.Khi trạng thái dữ liệu thay đổi, component tự render lại chính nó.Theo React convention, mọi trạng thái thay đổi được tổ chức trong một object this.state bên trong component và chỉ có thể được modified thông qua dedicated setState function, ví dụ:

  this.setState({myStateVariableCounter : 10})

• Events -Components có thể generate sự kiện được raise khi action UI nhất định xảy ra.Ví dụ, View components generates các sự kiện onEnter và onExit khi con trỏ trỏ tới và thoát khỏi khu vực của nó.Như việc các events có thể được handle trong khai báo component xử lí đúng sự tương tác, ví dụ:

  <View onEnter={() => this.setState({hasFocus: true})}>

• Layout -React sử dụng giải thuật flexbox và layout rules để tự động đặt components ở trong mặt phẳng 2D.Cách bố trí này xem xét kích thước thành phần, được tính toán hoặc xác định thông qua chiều dài, chiều rộng, cũng như kiểu thuộc tính điều khiển như alignItems.Điều này được mô tả chi tiết trong phần Layout and Style.
• Style -Style objects kiểm soát giao diện và bố cục của component.Chúng thường được chỉ định thông qua một đối tượng kiểu. Ví dụ:

  <View style={{awidth: 100, height: 100, backgroundColor: 'skyblue'}}/>

Thay vì chỉ định tất cả component attributes inline, Style objects có thể được kéo ra và thông báo với bên ngoài với sự trợ giúp của StyleSheet.create.Bảng định kiểu ngoài như vậy sẽ giúp đơn giản hóa việc tái sử dụng lại các thành phần.Mặc dù các đối tượng React StyleSheet chia sẻ một số tên thuộc tính với CSS nhưng chúng không liên quan trực tiếp tới nhau.Phần dưới đây sẽ mô tả các items trên một cách chi tiết hơn.

React Ecosystem

Mặc dù ban đầu được phát triển để đơn giản hóa việc phát triển web, hệ sinh React đã phát triển bao gồm nhiều loại:

• React -Thư viện gốc được sử dụng để nhắm mục tiêu phát triển web bằng cách tạo DOM và được render bởi trình duyệt.
• React Native -Nhắm tới mục tiêu phát triển ứng dụng trên nền tảng iOS và Android thông qua việc sử dụng các thành phần native.React Native được xây dựng dựa trên các nội dung cốt lõi của React.
• React VR -Thư viện mới mà chúng ta đang nói đến ở đây, cho phép phát triển giao diện người dùng trong VR.React VR được xây dựng dựa trên các nội dung cốt lõi của React Native. Mặc dù chạy trên browser, React VR có cấu trúc giống với React Native hơn React, như là việc nhiều tag được support giống như <View> và <Text>.Ngoài bố cục 2D, nó cũng giới thiệu các khái niệm về 3D scenes, transformations, và panoramas, cho phép objects được đặt trong không gian 3D và hiển thị trong VR. React VR sử dụng một thư viện OVRUI đơn giản, sử dụng một công nghệ JavaScript 3D phổ biến đó là Three.js.Three.js chạy bên trong trình duyệt và hiển thị cảnh thông qua WebGL.Sử dụng tai nghe VR được cung cấp qua web VR API, cho phép hiển thị trên Rift, GearVR hoặc các thiết bị khác.React VR không yêu cầu bộ tai nghe VR chạy, nó cũng có thể được sử dụng để tạo ra trải nghiệm 360 tương tác chạy trên trình duyệt hoặc trên điện thoại di động. Các khái niệm chính của React Native framework cũng có hiệu lực cho React VR.Dưới đây là một số khái niệm cơ bản và các liên kết đến các thông tin chi tiết hơn nữa.

React Native Packager

React JavaScript code được xử lý trước khi trình duyệt chạy.Quá trình xử lí được thực hiện bởi React Native packager.Nó là một project có phạm vi tương tự như Browserify và Webpack, và cung cấp một CommonJS như là module hệ thống, biên dịch JavaScript(ES6, Flow, JSX), đóng gói và load asset. Với React VR chúng ta sử dụng 2 key phổ biến sau:

• bundle : xử lí, biến đổi và hợp nhất JavaScript files trong một file tĩnh của JavaScript.
• start : chạy react native package để hoạt động như một web server và chuyển đổi động JavaScript files thành một tập các tập tin chuyển đổi. npm start khởi động packager.Nó là một shortcut cho command dưới đây:

  node node_modules/react-native/local-cli/cli.js start

Ở trong chế độ này, packager đóng vai trò như một máy chủ local cho phần lớn nội dung, với sự quan trọng ngoài việc chuyển đổi React và JSX code sang JavaScript code được yêu cầu bởi web browsers.Bạn có thể thấy output được chuyển đổi khi chạy npm start ở trong một project riêng của bạn và tìm tới http://localhost:8081/index.vr.bundle?platform=vr. Đối với trang web tĩnh, bạn cần ghi nhớ nội dung được tạo ra.npm run bundle hoàn thành việc này với command sau đây:

  node node_modules/react-native/local-cli/cli.js bundle --entry-file
  index.vr.js --platform vr --dev false --bundle-output
  index.vr.bundle

Kết quả của file index.vr.bundle chứa JavaScript code có thể được điều hướng và thực thi bởi HTML script tag. Dựa trên phạm vi của project, chúng ta chỉ thảo luận về cách sử dụng.Để tìm hiểu nhiều thông tin hơn về Packager, có thể tham khảo trong React Native Packager.

Networking

React VR sử dụng Fetch API để fetching resource qua mạng.Nếu bạn có sử dụng XMLHttpRequest hoặc networking APIs khác trước đó, Fetch sẽ trông tương tự như thế. Để tìm hiểu thêm thông tin và ví dụ về sử dụng Fetch với React Native, tham khảo thêm Networking. Để tìm hiểu về full list của các thuộc tính của Fetch, xem trong Fetch Request documentation. Để tìm hiểu thêm về Fetch, tham khảo Fetch API documentation. Nguồn bài viết React VR Docs