Improve Your UX by Dynamically Rendering Images via React

Improve Your UX by Dynamically Rendering Images via React @arwong09  #Reactjs #UX #Startups

  • It’s also how performant it is, how intuitive it is — how much it delights your user.We’ve all been there, discovering a new app or web page for the first time and seeing something like this:With high resolution photos and retina screens, it’s all too often we have to sit and watch images painstakingly render.
  • We accomplish this by using React’s onLoad event; we can make the request to the server for the image files, but not render the image in the DOM until the entire file has been downloaded.the end result: smooth as butterThe end result is an app that loads high resolution images and never keeps the user waiting.
  • The placeholder teases the user and lets them know images are being loaded.
  • Furthermore, we hold off on rendering the images until they have been fully downloaded from the server so our user never has to see images painting from top to bottom in the browser.view live demoShow Me the Code!Rendering the PlaceholderFor our placeholder component (LoadingItem in this example), we simply render the image and apply any animation effects we want:export default function () { return ( ReactCSSTransitionGroup transitionName=”loadingItem” transitionAppear={true} transitionAppearTimeout={500} transitionEnterTimeout={500} transitionLeaveTimeout={300} img className=”feed__loading-item” src={img} / /ReactCSSTransitionGroup )}In the render of our Feed component, we simply render LoadingItem as long as we still have FeedItems being loaded:export default class Feed extends Component { … render() { return ( div className=”feed” … {this.props.items.length this.state.loadedItems.length LoadingItem / } … /div ) }}Dynamically Rendering Images via `onLoad`Our Feed component works as follows:export default class Feed extends Component { constructor(props) { super(props) this.state = { loadedItems: [] } } onLoad(feedItem) { let updatedItems = this.state.loadedItems updatedItems.push({ name: feedItem.name, imgPath: feedItem.imgPath }) this.setState({ loadedItems: updatedItems }) }render() { return ( div className=”feed” h1 i) = FeedItem imgPath={item.imgPath} name={item.name} key={i} / )} {this.props.items.length this.state.loadedItems.length LoadingItem / } div className=”hidden” {this.props.items.map((item, i) = img src={item.imgPath} onLoad={this.onLoad.bind(this, item)} key={i} / )} /div /div ) }}So what’s happening here?
  • When the state updates, the newly loaded item is rendered into the DOM with the image already fully downloaded.That’s it!View live demoView full source code (star the repo if you found this helpful!)

It’s a competitive world out there right now. As we all know, just having a good idea isn’t enough to make your company the next billion dollar IPO. Execution is just as important, and when it comes…
Continue reading “Improve Your UX by Dynamically Rendering Images via React”

Rapid cross-platform mobile development with React Native

  • We can avoid the need for lots of upfront planning and naturally fall into certain conventions and patterns of data fetching and state management.
  • import React, { Component } from ‘react’
  • React Native exposes the Platform module, which detects the platform on which the app is currently running.
  • Sometimes we may need to diverge our application flow by platform in order to perform the appropriate action, but often it’s as simple as swapping some values around based on the current platform.
  • Platform-specific extensions allow us to write a separate file for each platform, e.g. button.ios.js and button.android.js .

How React Native helped us ship a cross-platform mobile app in 8 weeks.
Continue reading “Rapid cross-platform mobile development with React Native”

Testing a React-driven website’s SEO using “Fetch as Google”

Test a #ReactJS-driven website’s SEO using “Fetch as Google”:

  • Testing a React-driven website’s SEO using “Fetch as Google”
  • Given the goals, the ideal tools were create-react-app and GitHub Pages.
  • The first thing I wanted to test was whether Googlebot will not index or crawl parts of the page that are rendered asynchronously.
  • After the page has been loaded, my React app does an Ajax request for data, then updates parts of the page with that data.
  • It appears that using React Router for client-side-rendered pages is problematic in terms of search engine friendliness.

I recently tested whether client-side rendering would prevent websites from being crawled by search engine robots. As my article showed, React doesn’t seem to hurt search engine indexing at all. Now…
Continue reading “Testing a React-driven website’s SEO using “Fetch as Google””

A Glimpse Into The Future With React Native For Web – Smashing Magazine

✎ A glimpse into the future with React Native for Web:

  • We must make an index JavaScript file for the web.
  • 6 React Native iOS welcome screen ( View large version 7 ) React Native Android welcome screen8 React Native Android welcome screen ( View large version 9 )
  • 26 React Native iOS animation ( View large version 27 )
  • … React Native long friends list for iOS22 React Native’s long friends list for iOS ( View large version 23 ) React Native long friend list web24 React Native’s long friends list for the web ( View large version 25 )
  • import React, { Component } from ‘react’; import { Image, StyleSheet, Text, View, } from ‘react-native’; const styles = StyleSheet.create({ friend: { flexDirection: ‘row’, alignItems: ‘center’, justifyContent: ‘flex-start’, }, avatar: { margin: 10, width: 50, height: 50, borderRadius: 25, }, name: { fontSize: 18, color: ‘#000’, } }); export default class Friend extends Component { render() { return ( {this.props.firstName} {this.props.lastName} ); } }

Read the full article, click here.


@smashingmag: “✎ A glimpse into the future with React Native for Web:”


React Native can help you make iOS and Android apps with a shared code base, without sacrifices in quality. Clayton Anderson takes a glimpse into the future with React Native for Web…


A Glimpse Into The Future With React Native For Web – Smashing Magazine