SanthoshVijayabaskar

React JS Introduction

#React JS

• is an Open Source library (BSD License)
• for 'V' in MVC
• developed by Facebook
• uses 'Component-Driven' architecture (Web Components)
• uses 'Virtual DOM' for Performance
• uses 'state' and 'props' for data flow
• uses JSX Syntax

SanthoshVijayabaskar

var path = require('path');

module.exports = {
    entry: "./app.js",
    output: {
        filename: "./bundle.js",
        sourceMapFilename: "./bundle.map"
    },
    devtool: '#source-map',
    module: {

SanthoshVijayabaskar

var gulp = require('gulp'); //importing the gulp package
var browserify = require('browserify'); //module load-order management using 'require'
var babelify = require('babelify');//importing babel support for transforming JSX to HTML
var source = require('vinyl-source-stream'); // converts the readable file from browserify to vinyl stream - virtual file format which gulp requires

gulp.task('build', function () {
    return browserify({entries: './app.jsx', extensions: ['.jsx'], debug: true})
        .transform('babelify', {presets: ['es2015', 'react']})
        .bundle()
        .pipe(source('bundle.js'))

SanthoshVijayabaskar

var gulp = require('gulp');
var webpack = require('webpack-stream');
var serve = require('gulp-serve');

// Webpack
gulp.task('webpack', function() {
  return gulp.src('./app.js')
    .pipe(webpack(require('./webpack.config.js')))
    .pipe(gulp.dest('./'));
});

SanthoshVijayabaskar

What is React Fiber? And how can I try it out today?

what?

React Fiber is an ongoing reimplementation of React's core algorithm. It is the culmination of over two years of research by the React team.

• Andrew Clark: What's Next for React — ReactNext 2016
• React Fiber Architecture

why?

SanthoshVijayabaskar

UPI DEMO APP :- https://github.com/juspay/upi-sdk

UPI SDK Documentation :- http://merchant-doc-v3.bitballoon.com/

repositories {
    mavenCentral()
    maven {
      url "https://s3-ap-south-1.amazonaws.com/staging-assets-test"
    }
  }

SanthoshVijayabaskar

.card-padding{
  padding-right: 10px;
}

SanthoshVijayabaskar

[
    {
      "title": "Incredibles 2",
      "poster": "https://i.ibb.co/xFpX2vw/incredibles2.jpg",
      "rating": 7.8,
      "runtime": 118,
      "description": "When a new toy called Forky joins Woody and the gang, a road trip alongside old and new friends reveals how big the world can be for a toy.",
      "year": 2018
    },
    {

SanthoshVijayabaskar

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {HomeComponent } from './home/home.component';
import {AboutComponent} from './about/about.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const routes: Routes = [
{
  path: '',
  component: HomeComponent

SanthoshVijayabaskar

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  {
    path: '',
    component: HomeComponent
  },