sriramrudraraju

// getComponent is a function that returns a promise for a component
// It will not be called until the first mount
function asyncComponent(getComponent) {
  return class AsyncComponent extends React.Component {
    static Component = null;
    state = { Component: AsyncComponent.Component };

    componentWillMount() {
      if (!this.state.Component) {
        getComponent().then(Component => {

sriramrudraraju

React Redux Unit Testing: Part 1

Example for Action Creators using jest

Thanks to Max Stoiber for his blog on regular actions

Thanks to Ferran Negre for his blog on async actions

sriramrudraraju

React Redux Unit Testing: Part 2

Example for Reducers using jest

Thanks to Max Stoiber for his blog

sriramrudraraju

React Redux Unit Testing: Part 3

Example for Components using jest

Thanks to Max Stoiber for his blog

>Note: I didnt get as successfull snapshot as followed from blog. So I tweaked it to make it work

sriramrudraraju

Unit Tests Guide

Unit tests for react-redux using Jest, Enzyme.

In-depth explanations for synchronus action creators, reducers and asynchronus action creators

Note : I think .md file doesnt support JSX syntaxs and rendering rest of js code wierdly, so i used open and close tags for the JSX elements. In real code we used single tag syntax.

Contents

sriramrudraraju

This project was generated using Express.js

Table of Contents

• Folder Structure
• Available Scripts
  • npm start
  • npm run start-nodemon
• Best Practices
• Process Manager

sriramrudraraju

Create-React-App Production build Optimizataion

Svg-Url-Loader

Requirement

Instead moving .svg files from src/assets/ to build/static/media/ during npm run build. .svg files have to be bundled into build/static/js/main.js

Steps

sriramrudraraju

Create react app and Cordova

This guide developed based on cordova-create-react-app

Table of Contents

• Installation
  • Install Create React App CLI
  • Install Cordova CLI
• Create project using create-react-app

sriramrudraraju

// React wrapper for lozad.js for images

import * as React from 'react';
import * as lozad from 'lozad';

// src: the image path that will be lazyloaded
// customClass: css class that will be applied to img element
// defaultImageSrc: image path (preferebly local to this app) that needs to be displayed
//  by default before the required imgae lazy loaded
interface LozadWrapperProps {

sriramrudraraju

Transparent responsive data uri

data:image/svg+xml;charset=utf-8,%3Csvg xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" viewBox%3D"0 0 228.5 127.22"%2F%3E

• 228.5 represents width
• 127.22 respresents height
• height and width preserve aspect ratio.
• more info