S. Suzuki terrierscript

## file0.txt
$ npx create-react-app example-app

## file0.txt
const withStaticValue = (WrappedComponent) => {
  class HOC extends React.Component {
    render() {
      return (
        <WrappedComponent
          value={1234}
        />
      );
    }
  }

## file0.js
// mouseMixin.js
export default {
  data() {
    return {
      x: 0,
      y: 0
    };
  },
  methods: {
    mousemove(e) {

## 1.js
import　React from "react";
import { createResource, createCache } from "simple-cache-provider";

const cache = createCache();
// このサンプルでは、ただtextを非同期で返しているだけ。msは遅延秒数
const readText = createResource(
  // 第一引数は非同期処理の関数。Promiseを返す
  ([text, ms = 0]) => {
    return new Promise(resolve => {
      console.log(new Date().getTime(), "Promise created, will resolve in ", ms);

## react.js
// reactの場合
  onInvalidClick(e) {
  }
  onValidClick = (e) => {
  }
  render(){
    return <div>
      <button onClick={onValidClick} />
      <button onClick={onInvalidClick} />
    </div>

## slot.html
<some-item>
  <h3>Good Title</h3>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</div>
</some-item>

## context-example.js
import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
const CounterContext = React.createContext();

const Child = () => {
  return (
    <CounterContext.Consumer>
      {({ count, increment, decrement }) => {
        return (

## Context.js
// createContextでコンテキストを生成。`light`がデフォルト値
const ThemeContext = React.createContext('light');

// ユーザー情報のContext
const UserContext = React.createContext();

// Contextどっちも使うパターン
function Toolbar(props) {
  return (
    {/*　初見だとちょっとギョッとするかもしれないが、childrenにfunction渡してるパターン。callbackの値として、themeが返ってくる */}

## file0.html
    <!-- index.html -->
    <div id="app">
      <my-map :markers='[
        {"lat":35.6432027,"lng":139.6729435},
        {"lat":35.5279833,"lng":139.6989209},
        {"lat":35.6563623,"lng":139.7215211},
        {"lat":35.6167531,"lng":139.5469376},
        {"lat":35.6950961,"lng":139.5037899}
      ]'>
      </my-map>

## ModalEvent.js
import Vue from "vue"

const OPEN_MODAL = "openModal"
export const ModalEvent = new Vue({
  methods: {
    emitOpenModal(event){
      this.$emit(OPEN_MODAL, event)
    },
    onOpenModal(cb){
      this.$on(OPEN_MODAL, cb)
	const withStaticValue = (WrappedComponent) => {
	class HOC extends React.Component {
	render() {
	return (
	<WrappedComponent
	value={1234}
	/>
	);
	}
	}
	// mouseMixin.js
	export default {
	data() {
	return {
	x: 0,
	y: 0
	};
	},
	methods: {
	mousemove(e) {
	import　React from "react";
	import { createResource, createCache } from "simple-cache-provider";

	const cache = createCache();
	// このサンプルでは、ただtextを非同期で返しているだけ。msは遅延秒数
	const readText = createResource(
	// 第一引数は非同期処理の関数。Promiseを返す
	([text, ms = 0]) => {
	return new Promise(resolve => {
	console.log(new Date().getTime(), "Promise created, will resolve in ", ms);
	// reactの場合
	onInvalidClick(e) {
	}
	onValidClick = (e) => {
	}
	render(){
	return <div>
	<button onClick={onValidClick} />
	<button onClick={onInvalidClick} />
	</div>
	<some-item>
	<h3>Good Title</h3>
	<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</div>
	</some-item>
	<!-- index.html -->
	<div id="app">
	<my-map :markers='[
	{"lat":35.6432027,"lng":139.6729435},
	{"lat":35.5279833,"lng":139.6989209},
	{"lat":35.6563623,"lng":139.7215211},
	{"lat":35.6167531,"lng":139.5469376},
	{"lat":35.6950961,"lng":139.5037899}
	]'>
	</my-map>
	import Vue from "vue"

	const OPEN_MODAL = "openModal"
	export const ModalEvent = new Vue({
	methods: {
	emitOpenModal(event){
	this.$emit(OPEN_MODAL, event)
	},
	onOpenModal(cb){
	this.$on(OPEN_MODAL, cb)