Fullstack React: React and WebVR using A-Frame

React and WebVR using A-Frame  #ReactJS #WebVR

  • Today we are going to learn how to create a simple augmented reality experience using a library called A-Frame and React.
  • We are going to take what I learned from that and create a relatively simple application that takes an equirectangle image and use it as our back drop for the beginnings of a virtual experience.
  • A-Frame is a web framework used to build virtual reality experiences built on top of technologies like three.js and the WebVR API The Mozilla VR Team developed it as a fully open project.
  • We now need to import A-Frame into our React component and then add our first tag, the scene.
  • Update the render function of your component by adding some entities: – – A-Frame gives you access to a lot of primitive entities out of the box so we can add a sphere by just using the tag.

Editor’s Note: We are excited to have a guest blogger on our blog for this article! Jordan Papeleo is a technologist, programmer, and code mentor who has deep passions about growing developers, his community, his faith, and his mustache.
Continue reading “Fullstack React: React and WebVR using A-Frame”

From native to React Native

  • After developing mobile applications for more than eight months, I had the opportunity of joining a project that was being developed using React Native, an open source JavaScript library that, according to its documentation, lets you build mobile apps using only JavaScript.
  • React Native it’s a very new technology announced on the beginning of 2015 – just a couple years ago – where the main objective is to allow the development of mobile apps using the same design as React, letting you compose a rich mobile UI from declarative components.
  • There were a lot of things that I enjoyed about developing a React Native app, like the flexibility that you can get out of JavaScript after get used on how it works and the core concepts of React.
  • I had a really great time working with React Native and after developing the base components I felt that creating new screens was even faster than coding on native languages.
  • Another great factor that makes it easy to develop apps using React Native is the fact that the JavaScript community is huge, this means lots and lots of knowledge shared on Stack Overflow.

React Native main objective is to allow the development of mobile apps using the same design as React.
Continue reading “From native to React Native”

Why develop for both iOS and Android? #Develop once, publish many! #ReactNative

Why develop for both iOS and Android?  #Develop once, publish many!
#ReactNative

  • React Component Text View View Text If you like React on the web you’ll like React Native Text Text You just use native components like and instead web components like and Text View

    With React Native, you don’t build a “mobile web app”, an “HTML5 app”, or a “hybrid app”.

  • React Native uses the same fundamental UI building blocks as regular iOS and Android apps.
  • React Component Image ScrollView Text ScrollView Image source uri style width height Text On iOS a React Native ScrollView uses a native UIScrollView On Android it uses a native ScrollView On iOS a React Native Image uses a native UIImageView On Android it uses a native ImageView React Native wraps the fundamental native components giving you the performance a native app plus the clean design React Text ScrollView

    React Native lets you build your app faster.

  • It’s also easy to build part of your app in React Native, and part of your app using native code directly – that’s how the Facebook app works.
  • React Component Text View TheGreatestComponentInTheWorld View TheGreatestComponentInTheWorld Text TheGreatestComponentInTheWorld could use native Objective C Java or Swift the product development process is the same Text View

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.
Continue reading “Why develop for both iOS and Android? #Develop once, publish many!
#ReactNative”

Introduction to React Native for iOS

Curious about #React Native? Here's an introduction to get you started:  by @paradoxed

  • About this Workshop
    React Native is a JavaScript library that lets you build mobile apps for iOS or Android.
  • It uses the same design as React, letting you compose a rich mobile UI from declarative components following the principle “Learn once, write anywhere”.

React Native is a JavaScript library that lets you build mobile apps for iOS or Android. It uses the same design as React, letting you compose a rich mobile UI from declarative components following the principle “Learn once, write anywhere”.
Continue reading “Introduction to React Native for iOS”

React Native Performance

#ReactNative performance and some tricks & tools to optimize your React Native application:

  • Every character typed in the Native component involves the physical event, transforms it in letter or action, and then transmits it by the bridge to the JS component.
  • In all of the transactions of data between JS and Native, the Bridge always intervenes so that the data is included in both parts.
  • The Animated library has been created to improve the performance of the animations, and its objective is to lighten the use of the bridge by sending predictions of the data to the native before starting the animation.
  • Thankfully, the Bridge isn’t the only one at fault, and there are many other ways to optimize a React Native application.Therefore, here is an exhaustive list of why and/or how you can optimize your application:

    The React Native “tooling” is not yet very developed, but a great part of the toolset is that itis coming from the application.

  • The performance of a React Native application is very important.

React Native Performance written by Pierre Monge: one of the many blog articles from Packt Publishing
Continue reading “React Native Performance”

Differences between AngularJS, VueJS and ReactJS – hello JS

Differences between #AngularJS, #VueJS and #ReactJS:

  • Another common question regarding ReactJS is whether it is necessary to learn Flux to learn ReactJS .
  • Unlike AngularJS , ReactJS is not a framework, it’s a library.
  • The prospect is that a lot of companies will still use AngularJS for quite a while.
  • It is entirely possible to write an application in ReactJS without the use of Flux and Redux .
  • The Facebook team with ReactJS solved these problems through the Virtual DOM – object that maps the whole tree of the DOM .

AngularJS is one of the most famous framework out there, gaining a lot of momentum lately. Some reasons for its popularity are: community engagement, open-source, the interest of the google team, etc…
Continue reading “Differences between AngularJS, VueJS and ReactJS – hello JS”