AkshayRana92

import React, { Component } from 'react';

class Child extends Component {
    render() {
        return (
            <h1>Say my name</h1>
        );
    }
}

AkshayRana92

import React, { Component } from 'react';

class MyComponent extends Component {

    render() {
        return (
            <h1>My Component Header</h1>
        );
    }
}

AkshayRana92

class ParentComponent extends Component {
  render() {
	 element = (<div>
	 	<MyComponent />
		<h2> Something Relevant </h2>
	 </div>)
    return element;
  }
}

AkshayRana92

ES5 :
function MyComponent(props) {
  return <h1>Hello World}</h1>;
}

ES6
class MyComponent extends Component {
  render() {
    return <h1>Hello World}</h1>;

AkshayRana92

const element = <h1>Hello, world</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

AkshayRana92

<div id="root"></div>

AkshayRana92

function getName() {
	return 'John Snow';
}

const element = <h1>Welcome to React, {getName()}</h1>;

AkshayRana92

const name = 'John Snow';

const element = <h1>Welcome to React, {name}</h1>;

AkshayRana92

const element = <h1>Welcome to React</h1>;

AkshayRana92

var gzip = require('gulp-gzip');        //Add dependency to package.json if not added
 
gulp.task('gzip-app', function () {
 gulp.src(['dist/prod/src/app/bundle.min.js'])
 .pipe(gzip())
 .pipe(gulp.dest('dist/prod/src/app'));
});
 
gulp.task('gzip-css', function () {
 gulp.src(['dist/prod/src/assets/css/vendor.css'])