kazagkazag

//npm install express

var express = require('express');
var app = express();
var http = require('http');

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();

kazagkazag

//import React, {Component} from "react";
//import { render } from 'react-dom';

export class MyComponent extends Component {
  render() {
    return (
      <div className="my-div">My div content</div>
    );
  }
}

kazagkazag

// MyButton.jsx

export default class MyButton extends Component {
  render() {
    return <button>Click me!</button>
  }
}

// MyComponent.jsx
// import MyButton from "MyButton"

kazagkazag

// MyButton.jsx

function MyButton() {
  return <button>Click me!</button>;
}

export default MyButton;

kazagkazag

// Message.jsx

export default class Message extends Component {
  render: function() {
    return <p>{this.props.children}</p>
  }
}

// MyComponent.jsx
// import Message from "Message"

kazagkazag

// MyButton.jsx

function MyButton(props) {
  return <button onClick={props.onButtonClick}>{props.buttonTitle}</button>;
}

export default MyButton;

// MyComponent.jsx

kazagkazag

// MyComponent.jsx

export class MyComponent extends Component {
  
  constructor(props) {
    super(props);
    this.state = {counter: 0};
    this.onButtonClick = this.onButtonClick.bind(this);
  }
  

kazagkazag

const MY_CONST = 44;
function doMagic(regularStuff) {
  return "magical stuff";
}

export class MyComponent extends Component {
  render() {
    return (
      <main>
        <p>Some text</p>

kazagkazag

class MyComponent extends Component {
  render() {
    return <main>Awesome component</main>;
  }
}

MyComponent.propTypes = { 
  count: PropTypes.number.isRequired,
  items: PropTypes.arrayOf(
      PropTypes.shape({

kazagkazag

class MyComponent extends Component {
  
  constructor(props) {
    super(props);
    this.state = { value: { foo: 'bar' } };
  }

  onClick() {
    var value = this.state.value;
    value.foo += 'bar'; // value is reference to the current state, so current state and next state will be the same in next SCU call...