Stas Kurilov kisenka

React Element Factories and JSX

You probably came here because your code is calling your component as a plain function call. This is now deprecated:

var MyComponent = require('MyComponent');

function render() {
 return MyComponent({ foo: 'bar' }); // WARNING

Exploring container's FS

First get a name or an ID of your docker container:

DOCKERID=$(docker ps | awk ...)

Quick and dirty

New React Element Factories and JSX

In React 0.12, we're making a core change to how React.createClass(...) and JSX works.

If you're using JSX in the typical way for all (and only) React components, then this transition will be seamless. Otherwise there are some minor breaking changes described below.

The Problem

This tutorial uses the "Sample hapi.js REST API" project.

Take a look at: https://github.com/agendor/sample-hapi-rest-api/

##Topics

Introduction
Installing Node.js
Installing MySQL
Setting-up the project

	import { Component } from "React";

	export var Enhance = ComposedComponent => class extends Component {
	constructor() {
	this.state = { data: null };
	}
	componentDidMount() {
	this.setState({ data: 'Hello' });
	}
	render() {

	'use strict';

	module.exports = function CustomError(message, extra) {
	Error.captureStackTrace(this, this.constructor);
	this.name = this.constructor.name;
	this.message = message;
	this.extra = extra;
	};

	require('util').inherits(module.exports, Error);

	'use strict';

	var SVGObjectHelper = {

	replaceAll: function replaceAll(parent, cb) {
	parent = parent \|\| document;

	var svgObjs = parent.querySelectorAll('object[type="image/svg+xml"]');
	var ready = function () {

	module.exports = {
	port: 8000,
	globals: {
	$: 'jquery',
	jQuery: 'jquery',
	_: 'lodash',
	Backbone: 'backbone',
	Marionette: 'backbone.marionette',
	moment: 'moment'
	},

	<html>
	<body>

	<!-- load combined svg file (with symbols) into body-->
	<script>
	(function (doc) {
	var scripts = doc.getElementsByTagName('script')
	var script = scripts[scripts.length - 1]
	var xhr = new XMLHttpRequest()
	xhr.onload = function () {

	.box {
	padding: 5px;
	background: red;
	margin: 10px;
	position:relative;
	z-index: 3;
	}
	.drag-target {
	background: blue;
	z-index: 1;