$30 off During Our Annual Pro Sale. View Details »

Intro to React 360

Randy Vianda Putra
August 03, 2019
Technology
0
200

Intro to React 360

Tech Talk about React 360 at Facebook Developer Circles From Bandung

Randy Vianda Putra

August 03, 2019
Tweet

More Decks by Randy Vianda Putra

See All by Randy Vianda Putra
Step by Step Guide to Becoming Frontend Developer
randyviandaputra
0
120
Build_Mobile-Friendly_Web_Apps_with_Reactjs.pptx.pdf
randyviandaputra
0
150
Berkarir Sebagai Frontend Developer
randyviandaputra
1
280
Introduction to Full Stack JS
randyviandaputra
1
120
Introduction_To_React.pdf
randyviandaputra
0
170
Micro_Frontend.pdf
randyviandaputra
2
220
react_native_training.pdf
randyviandaputra
0
160

Other Decks in Technology

See All in Technology
Functional Programming for Fun and Profit!!
jennyshih
0
130
Kaggle Days Championship Final 2022 参加報告
dena_tech
PRO
0
400
Module-Federation A game-changer in JavaScript architecture
vitormalencar
0
100
How LINE OpenChat Server Handles Extreme Traffic Spikes
techverse_2022
PRO
0
240
ウェブフロントエンジニアから見る Flutter Webの 現在地点 / Flutter web as of now
kgsi
3
2.6k
Architecture Modifications to Deal with 5 to 10 Times More Access than Usual as a Regular Event
techverse_2022
PRO
0
150
Getting Started with Code Reviews
prateekthakare
1
120
超PayPay祭りを支える購入導線の負荷対策について
techverse_2022
PRO
0
300
今年やったこと_20年以上続くWebサービスのリプレイス_書いたコード_私がモダンかもと思うPerl
masashi_sutou
0
680
【全7回】グラフはなぜ使われていない？どうやって使われている？グラフデータベース活用事例 #1
oracle4engineer
PRO
3
140
Svelte Runtime 101 (JSConf JP 2022)
baseballyama
3
2.8k
Securing CI/CD Systems Through eBPF (recap)
whywaita
PRO
0
350

Featured

See All Featured
Building Flexible Design Systems
yeseniaperezcruz
311
34k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
182
15k
Building a Scalable Design System with Sketch
lauravandoore
451
30k
Fashionably flexible responsive web design (full day workshop)
malarkey
396
63k
Three Pipe Problems
jasonvnalue
89
8.8k
Product Roadmaps are Hard
iamctodd
35
7.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
20
6.5k
jQuery: Nuts, Bolts and Bling
dougneiner
57
6.6k
Become a Pro
speakerdeck
PRO
3
3.1k
BBQ
matthewcrist
75
8.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
499
130k
Building a Modern Day 
E-commerce SEO Strategy
aleyda
4
3.6k

Transcript

  1. Intro To React 360 Facebook Developer Circles - 3 August,

    2019

  2. Randy Vianda Putra, live in Bandung - Frontend Engineer @WorkLifeBeyond

    - Instructor @Cilsy Hello modulloe@gmail.com github.com/randyviandaputra @randyvp

  3. Agenda - What is React 360 - What is Three.js

    - History of React 360 - Getting Started - Core Components - Fundamental React 360 - Why should we use React 360

  4. Let’s Start

  5. What is React 360 ?

  6. What is React 360 ? A Javascript framework for creation

    3D and VR user interfaces with React and uses Three.js for rendering

  7. What is Three.js ?

  8. What is three.js - 3D javascript library - Renderers: WebGL,

    <canvas>, <svg>, CSS3D / DOM, and more - Easy to use

  9. History of React 360 ?

  10. History of React 360 - Released on 19 Apr, 2017

    (Facebook and Oculus) - Formerly known as React VR (RIP) - Re releasing as React 360 on 2 May, 2018

  11. React 360 vs ReactVR - Introduced “Environment” API - Introduced

    “Surfaces” for 2D layouts - “VideoPano”, “Sound” components replaced with “VideoModule” and “AudioModule” - “Model” renamed to “Entity” - Removed “Box”, “Cylinder”, “CylindricalPanel”, “AmbientLight”, “DirectionalLight”, “PointLight”, “SpotLight” - etc

  12. Getting Started React 360 ?

  13. Getting Started React 360 $ npm install -g react-360-cli $

    react-360 init HelloFbDevC $ cd HelloFbDevC $ npm start $ npm run bundle (generate a production build)

  14. Sample Project

  15. File Structure

  16. index.js

  17. client.js

  18. Core Components ?

  19. Core Components View Text Image

  20. Fundamental React 360 ?

  21. 3D Coordinates

  22. 3D Background Images

  23. 3D Background Videos

  24. Interactions

  25. Loading Models

  26. React 360 Modules - VideoModule - AudioModule

  27. React 360 APIs - Environment - Animated - ControllerInfo -

    AsyncStorage

  28. Why Should We Use React 360 ?

  29. “ EASY TO LEARN 29

  30. “ LEARN ONCE, WRITE ANYWHERE 30

  31. “ React dev tools React Chrome extension make debugging so

    much easier 31

  32. “ Facebook are maintaining this project 32

  33. Links - https:/ /reactjs.org - https:/ /facebook.github.io/react-360 - https:/ /threejs.org

    - https:/ /alligator.io/react/react-360

  34. Source Code https://bit.ly/2YhISge Demo https://hellofbdevc.netlify.com

  35. 35 Thanks Any questions?