ArunMichaelDsouza

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');

module.exports = {
  context: __dirname,
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./js/scripts.js",
  output: {
    path: __dirname + "/js",
    filename: "scripts.min.js"

ArunMichaelDsouza

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { connect } from 'react-redux';
import * as actions from '../../actions';

const form = reduxForm({
  form: 'ReduxFormTutorial',
  validate
});

ArunMichaelDsouza

module.exports = {
	entry: './js/src/app.js',
	output: {
		filename: './js/build/bundle.js'
	},
	module: {
		loaders: [
			{
				test: /\.jsx?$/,
                loader: 'babel',

ArunMichaelDsouza

/* Demo webpack config for a production build
This setup can be further combined with tree-shaking and async code splitting for best results */

const path = require('path'),
    webpack = require('webpack'),
    buildPath = '../public/assets/js/builds/',
    ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = [{

ArunMichaelDsouza

class Child extends Component {
    constructor(props) {
        super(props);

        this.state = {
            error: false
        };
        this.handleClick = this.handleClick.bind(this);
    }

ArunMichaelDsouza

class Info extends Component {
   constructor(props) {
        super(props);
   }
   
    render() {
        return <Modal><Text text=“This is the text” /></Modal>;
    }
}

ArunMichaelDsouza

class Modal extends Component {
   constructor(props) {
        super(props);
   }
   
    render() {
        const node = document.getElementById(‘modal’);
        return ReactDOM.createPortal(this.props.children, node);
    }
}

ArunMichaelDsouza

// Child.jsx
class Child extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <button 
                type="button" 
                onClick={ this.props.updateParent }

ArunMichaelDsouza

// DeeplyNestedChild.jsx
class DeeplyNestedChild extends React.Component {
    constructor(props) {
        super(props);
    }
    updateTopMostParent() {
        // Call this method with the state value to update
        window.updateTopMostParent(someValue); 
    }
    render() {

ArunMichaelDsouza

// 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 => {