Implementing an Infinite Scroll with Vue.js ← Alligator.io

Implementing an Infinite Scroll with Vue.js  #UI #reactjs #javascript #react

  • For this post, we’ll go without a plugin or package and we’re going to be writing a simple JavaScript function that fetches a new set of data when scrolled to the bottom of the browser window.
  • Before we start integrating the infinite scroll, let’s fetch and set some initial data on page load: – – It’s worth noting that it’s not recommended to make five services calls on load.
  • We’ll make use of the document object’s , properties and of window’s properties to determine if scroll as at the bottom: – – Inside this condition, let’s add a service method with Axios to fetch another random user from the Random User API.
  • This function makes a service call and adds a new random “user” to the array only when the user scrolls to the bottom of the page.
  • With each scroll to the bottom of the page, we fetch new data with Axios then push that data to an array.

Learn how to implement a simple infinite scroll for your Vue apps using nothing but some vanilla JavaScript and a simple Random User API.
Continue reading “Implementing an Infinite Scroll with Vue.js ← Alligator.io”

Converting a React App to React Native – Gwendolyn Faraday – Medium

Converting a React App to React Native  #reactnative #react #reactjs

  • Converting a React App to React NativeI have been working on a lot of mobile projects lately — including Cordova, PhoneGap, React Native, some Ionic and Swift — but I have to say, React Native is by far the best experience in mobile development I have had so far.
  • It shares the same workflow as a React application for the web which is pretty easy to reason about and find where things are quickly.Now I am building an app to gamify recycling in Indiana.
  • Since the web app is in React, I figured it would be easier to build the Native version in iOS and Android at the same time using React Native.Here are some mockups to give you an idea.
  • (I changed the menu from the right side to the left side after this)Setting Up the React Native AppWhere React Native outdoes React is on it’s simple set up for apps.
  • That was pretty quick and easy —I just installed a few modules and wrote a minimal amount of code.List ViewsMost of the components I made I was able to copy from my web app and just update the UI.For this app, I have an ever-growing array of various characters that I wanted to display in a scrollable list on mobile.

I have been working on a lot of mobile projects lately — including Cordova, PhoneGap, React Native, some Ionic and Swift — but I have to say, React Native is by far the best experience in mobile…
Continue reading “Converting a React App to React Native – Gwendolyn Faraday – Medium”