oshell

import * as React from "react";
import { UIStore } from "./UIStore";

export const App = () => {
  const isDarkMode = UIStore.useState(s => s.isDarkMode);

  return (
    <div
      style={{
        background: isDarkMode ? "black" : "white",

oshell

import { Store } from "pullstate";

export const UIStore = new Store({
  isDarkMode: true,
});

oshell

import React, { setGlobal } from 'reactn';
import ReactDOM from 'react-dom';
import App from './App';

// Set an initial global state directly:
setGlobal({
  cards: [],
  disabled: false,
  initial: 'values',
  x: 1,

oshell

import React, { useGlobal } from 'reactn'; // <-- reactn
import Card from '../card/card';

const Cards = () => {
  const [cards, setCards] = useGlobal('cards');

  return (
    <div>
      {cards.map(card => (
        <Card key={card.id} {...card} />

oshell

import React from 'reactn'; // <-- reactn
import Card from '../card/card';

export default class Cards extends React.PureComponent {
  componentDidMount() {
    // Hydrate the global state with the response from /api/cards.
    this.setGlobal(
      fetch('/api/cards')
        .then(response => response.json())
        .then(cards => ({ cards }))

oshell

import React from 'react';
import { shallow } from 'enzyme';
import App from './App';

it('button click changes color of box', async () => {
  const app = shallow(<App />);
  expect(app.find('.box').length).toEqual(1);
  // cache button element
  const button = app.find('button').last();
  const eventMock = {

oshell

import React from 'react';
import { shallow } from 'enzyme';
import App from './App';

it('button click changes color of box', () => {
  const app = shallow(<App />);
  expect(app.find('.box').length).toEqual(1);
  // cache button element
  const button = app.find('button').last();
  // pass mocked event object

oshell

import React, { useState } from 'react';
import './App.css';

function App() {
  const [color, changeColor] = useState('blue');

  function handleClick(e) {
    changeColor(e.target.getAttribute('data-color'));
  }

oshell

import React from 'react';
import { shallow } from 'enzyme';
import App from './App';

it('button changes color of box', () => {
  const app = shallow(<App />);
  expect(app.find('.box').length).toEqual(1);
  app.find('button').last().simulate('click');
  expect(app.find('.box.red').length).toEqual(1);
});

oshell

import React, { useState } from 'react';
import './App.css';

function App() {
  const [color, changeColor] = useState('blue');

  return (
    <div className="App">
      <button onClick={changeColor.bind(null, 'blue')}>blue</button>
      <button onClick={changeColor.bind(null, 'green')}>green</button>