maechabin

テスト関連

• React Testing Library

maechabin

// ==UserScript==
// @name npm: package support types
// @namespace info.efcl
// @match https://www.npmjs.com/package/*
// @grant GM_xmlhttpRequest
// ==/UserScript==

const NAME = "$Greasemonkey:package support types$";
const fetchPackage = (packageName) => {
    return new Promise((resolve, reject) => {

maechabin

react-scriptsをインストール

$ npm i -D react-scripts

react-scripts start実行

$ npx react-scripts start

maechabin

graphQL系の記事

• GraphQLをNode.jsとexpressでためしてみる
  https://dev.classmethod.jp/server-side/node-js-server-side/graphql-tutorial-nodejsexpress/

• Queries and Mutations#fields
  https://graphql.github.io/learn/queries/#fields

• A Simple Mutation
  https://www.howtographql.com/graphql-js/3-a-simple-mutation/

maechabin

JSX without React 系の記事

• React’s diff algorithm by Christopher Chedeau
  https://calendar.perfplanet.com/2013/diff/

• Typescript with JSX? (no react) : typescript
  https://www.reddit.com/r/typescript/comments/6cyao3/typescript_with_jsx_no_react/

• Hello World with Preact, JSX & Typescript
  https://medium.com/@shakyShane/hello-world-with-preact-jsx-typescript-6d70cf2ebf01

maechabin

About array.prototype

ES3

http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%203rd%20edition,%20December%201999.pdf

• Array.prototype.consructor
• Array.prototype.toString()
• Array.prototype.toLocaleString()
• Array.prototype.concat([item1[,item2[,...]]])

maechabin

/**
 * Default configuration to lint
 * the airbnb css style-guide.
 * This file is taken from a pull request to Airbnb/css repo
 * which intends to create a default preset that can be used
 * in the future. Until it is merged, we will have the config here.
 * https://github.com/airbnb/css/pull/23
 * Add more rules: http://stylelint.io/user-guide/rules/
 * Also, to understand better who the rules are named:
 * http://stylelint.io/user-guide/about-rules/

maechabin

Tutorial: Intro To React
What We're Building
Today, we're going to build an interactive tic-tac-toe game. We'll assume some familiarity with HTML and JavaScript but you should be able to follow along even if you haven't used them before.

If you like, you can check out the final result here: Final Result. Try playing the game. You can also click on a link in the move list to go "back in time" and see what the board looked like just after that move was made.

What is React?
React is a declarative, efficient, and flexible JavaScript library for building user interfaces.

React has a few different kinds of components, but we'll start with React.Component subclasses:

maechabin

 Tutorial: Intro To React
What We're Building

Today, we're going to build an interactive tic-tac-toe game. We'll assume some familiarity with HTML and JavaScript but you should be able to follow along even if you haven't used them before.

If you like, you can check out the final result here: Final Result. Try playing the game. You can also click on a link in the move list to go "back in time" and see what the board looked like just after that move was made.
What is React?

React is a declarative, efficient, and flexible JavaScript library for building user interfaces.

maechabin

Tutorial
We'll be building a simple but realistic comments box that you can drop into a blog, a basic version of the realtime comments offered by Disqus, LiveFyre or Facebook comments.

We'll provide:

A view of all of the comments
A form to submit a comment
Hooks for you to provide a custom backend
It'll also have a few neat features: