Intro to React 360

Tech Talk about React 360 at Facebook Developer Circles From Bandung

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?