近日公開

React 練習

実践的なコンポーネントを作り、パターンを学び、すべてのチャレンジ内で動く Sandpack IDE と一緒に React を身につけましょう。

近日公開

React 練習

動く Sandpack IDE で実際にコンポーネントを作れます。設定不要、ボイラープレート不要。React にそのまま集中できます。

Sandpack IDEReact 19ライブプレビュー

App.tsx

function Counter() {
  const [count, setCount]
    = useState(0);

  return (
    <button
      onClick={() => 
        setCount(c => c+1)}
    >
      Clicked {count} times
    </button>
  )
}

練習の流れ

読む

作る

振り返る

パターン

30種類以上の React パターン

Lydia Hallie の javascript-react-patterns を、インタラクティブなチャレンジに落とし込みました。

ContainerHOCCompoundRender PropsCustom HooksObserverProviderProxyPrototypeModuleSingleton+20 以上

注目の問題

人気の問題から始めましょう

全155問を見る

#1初級

何が出力されるでしょうか？

function sayHi() {
  console.log(name);
  console.log(age);

scopeobjects+1

練習

#2初級

何が出力されるでしょうか？

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1);
}

asyncoperators

練習

#3初級

何が出力されるでしょうか？

const shape = {
  radius: 10,
  diameter() {

types

練習

#4初級

何が出力されるでしょうか？

+true;
!"Lydia";

types

練習

#5初級

正解はどれでしょう？

const bird = {
  size: "small"
};

types

練習

#6初級

何が出力されるでしょうか？

let c = { greeting: "Hey!" };
let d;

fundamentals

練習

JS Questions Lab

JavaScriptをマスターする。一問ずつ。

ブラウザでコードを実行し、イベントループを可視化し、仕組みを記憶に定着させる。面接対策のための精密ツール。

制作者 @kitsunekode. 基にしている Lydia Hallieの問題集.

demo.js

function getAge() {
  'use strict';
  age = 21;
  console.log(age);
}

getAge();

86 質問•12 トピック•100% 無料•オープンソース•80件の実行可能なスニペット•

近日公開

React 練習

実践的なコンポーネントを作り、パターンを学び、すべてのチャレンジ内で動く Sandpack IDE と一緒に React を身につけましょう。

近日公開

React 練習

動く Sandpack IDE で実際にコンポーネントを作れます。設定不要、ボイラープレート不要。React にそのまま集中できます。

Sandpack IDEReact 19ライブプレビュー

App.tsx

function Counter() {
  const [count, setCount]
    = useState(0);

  return (
    <button
      onClick={() => 
        setCount(c => c+1)}
    >
      Clicked {count} times
    </button>
  )
}

練習の流れ

読む

作る

振り返る

パターン

30種類以上の React パターン

Lydia Hallie の javascript-react-patterns を、インタラクティブなチャレンジに落とし込みました。

ContainerHOCCompoundRender PropsCustom HooksObserverProviderProxyPrototypeModuleSingleton+20 以上

使い方

練習ループ

高度なJavaScriptを長期記憶に定着させるために設計された精密なフィードバックサイクル。

問題を見つける

トピックでフィルタリングするか、難易度を調整するか、概念に直接検索する。

答えにコミットする

のぞき見禁止。解説が表示される前に必ず答えを確定させてください。

コードを実行する

スクラッチパッドを開く。スニペットを実行する。すぐに生の出力を確認する。

理由を理解する

解説を深く掘り下げる。イベントループと実行コンテキストを分解する。

カバー範囲

あらゆる概念をマスター

9のコアトピックを網羅

objects

48問

types

47問

fundamentals

43問

arrays

24問

scope

16問

async

13問

operators

13問

prototypes

10問

generators

6問

let c = { greeting: "Hey!" };
let d;

fundamentals

練習