selvagsz

React

https://jsbin.com/hugigok/14/edit?html,js,output - Async button

https://jsbin.com/bevesa/3 - Hello world

selvagsz

I'm often tempted to jump into the source code of the framework/libraries that I consume. In react, the source code lies inside the /src folder https://github.com/facebook/react/tree/master/src

To start with, the best way is to go through the modules with no or less dependencies. Usually, the utils will have less dependencies but they would be consumed a lot throughout. So, I feel its good to start with them.

React shares some utilities from https://github.com/facebook/fbjs

1. invariant
2. keyMirror
3. keyOf
4. emptyFunction

selvagsz

Its been a month since I dove into react. Its an incredible journey, where I just concentrated in learning more things.

• I was able to get my head around Webpack, react, react router, redux, thunks
• Started with a minor contribution to react/react-tabs
• Rolled out a react package, react-async-button
• Completed my POC & was able to convince my team to migrate our app from angularjs(1.12.x) >> react
• Began to dive into the react source code (https://gist.github.com/selvagsz/4889bfd6d3716bc56543d30597d9728a)

Stepping into second month of my react journey,

selvagsz

• If you have some unwanted properties in your props, do not drop all of them using {...props} to the child component. Pass the props that are needed by the component. (facebook/react#7157 (comment))

// BAD (if there are unwanted props)
render() {
  return (
    <Foo {...this.props} />
  );
}

selvagsz

import Ember from 'ember';

Ember.ObjectController.reopen({
  unknownProperty(prop) {
    console.log(prop, this._debugContainerKey);
    // log the info to your server

    return this._super(prop);
  },
 

selvagsz

Object <==> Map

Creation

// js
let foo = {}

// Immutablejs
let bar = Map()

selvagsz

let a = {
  name: 'selva'
}

let zfoo = {
  foo: {
    name: 'a',
    ofo: {
      bar: a
    }

selvagsz

// Entire default options

{
  devtool: false,
  cache: true,
  context: process.cwd(),
  target: 'web',
  
  module: {
    unknownContextRequest: '.',

selvagsz

// Check the console logs by uncommenting the error throwing scenario also

function one() {
  console.log('one')
  throw new Error('error1')
}

function two() {
  console.log('two')
}

selvagsz

<script type="text/javascript" src="https://checkout.razorpay.com/v1/razorpay.js"></script>

<div class="container payment-container">
  <form id='card_payment'>
    <div class="form-group">
      <label for="card_number">Card Number:</label>
      <input id="card_number" class="form-control" placeholder='XXXX XXXX XXXX XXXX' maxlength=19 />
    </div>
    
    <div class="row">