<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
class HelloWorld extends React.Component {
    render() {
        return (<h1>Hello world</h1>);
    }
}
ReactDOM.render(
    <HelloWorld />,
    document.getElementById('root')
);
</script>

import React from 'react';
​
export default class Index extends React.Component {
​
  constructor(props) {
    super(props)
    this.state = { data: 0 };
  }
​
  componentDidMount() {
    this.setState({ data: 1 })
  }
​
  render() {
    return (
      <div>
        Data: {this.state.data}
      </div>
    )
  }
}

loadMore() {
  // do something
}
render return <a onClick={this.loadMore.bind(this)}>Load more</a>;

constructor(props) {
    super(props);
    this.doSomething= this.doSomething.bind(this);
}
​
doSomething() {
  // do something
}
render return <a onClick={this.doSomething}>Load more</a>;

render <a class={`button is-primary ${this.state.isLoading ? "is-loading" : ""}`}>Load More</a>

prepare_something();
for( var i = 0; i < 10; i++ ){
    run();
}

rounds.map( round => {
    run();
});

const hello = "hello";
const str = `${hello} world`;

// relative path
import PostItem from '../components/PostItem';
// from npm
import Document from 'next/document';
​
// Import default module
import Document from 'next/document';
// Import modules
import { Head, Main, NextScript } from 'next/document';
// Import default module & modules
import { Head, Main, NextScript } from 'next/document';

// # Anonymous Export
​
// Export default function
export default () => { 
    // do something
}
// Export function
export () => {
  // do something
}
// Export object
module.exports = {}
​
// # Export
const config = {};
const confit.doSomething = () => { } // alternative
export config; // or export default config;

const fetchingPosts = new Promise((res, rej) => {
  $.get("/posts")
    .done(posts => res(posts))
    .fail(err => rej(err));
});
​
fetchingPosts
  .then(posts => console.log(posts))
  .catch(err => console.log(err));

const xFetcherPromise = new Promise( // สร้าง promise โดยใช้คีย์เวิร์ด "new" และเก็บลงตัวแปร
  function(resolve, reject) { // constructor ของ promise รับ parameter เป็นฟังก์ชั่นที่มี parameter ชื่อ resolve และ reject ด้วยตัวมันเอง
    $.get("X") // ส่ง Ajax request
      .done(function(X) { // เมื่อ request เสร็จแล้ว ...
        resolve(X); // ... resolve promise ด้วยค่า X กลับไปเป็น parameter
      })
      .fail(function(error) { // ถ้า request เกิดผิดพลาด...
        reject(error); // ... reject promise แล้วส่ง error กลับไปเป็น parameter
      });
  }
)

xFetcherPromise
  .then(function(X) {
    console.log(X);
  })
  .catch(function(err) {
    console.log(err)
  })

const handleQuery(query){
  return new Promise((resolve, reject) => {
    ref.get().then((documentSnapshots) => {
​
      let i = 0;
      var tmp_data = []
      documentSnapshots.forEach((doc) => {
        tmp_data.push(doc.data())
      });
​
      // Build a reference for next page
      const lastVisible = documentSnapshots.docs[documentSnapshots.size - 1];
      if (!lastVisible) return;
​
      resolve({
        data: tmp_data,
        refNext: ref.startAfter(lastVisible)
      });
​
    })
  })
}
​
const getData = async (query) => {
    const responsePromise = handleQuery(query);
    return responsePromise;
}
​
export default async () => {
    const data = await getData()
}

const arr1 = ["a", "b", "c"];
const arr2 = [...arr1, "d", "e", "f"]; // ["a", "b", "c", "d", "e", "f"]

const add = (x, y) => x + y 
 
const log = func => (...args) => { 
  console.log(...args) 
  return func(...args) 
} 
 
const logAdd = log(add) 

export default () => (
    <p>Technology + สารานุกรม = Techนุกรม</p>
)

const Index = (props) => (
  <p>Data: {props.data}</p>
)
Index.getInitialProps = function () {
  return {data: 1}
}
export default Index

getInitialProps(context) {
    var id = context.query.id === undefined ? 0 : context.query.id;
    // do something
}
​
// In server.js of express
server.get('/:id', (req, res) => {
    const actualPage = '/'
    const queryParams = { id: req.params.id }
    app.render(req, res, actualPage, queryParams)
})