Skip to content

Instantly share code, notes, and snippets.

@broerjuang

broerjuang/react.html

Created April 10, 2019 16:13
Show Gist options
  • Save broerjuang/4665f0fec4322c898609330614e54872 to your computer and use it in GitHub Desktop.
Save broerjuang/4665f0fec4322c898609330614e54872 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
react.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script
crossorigin
src="https://unpkg.com/react@16/umd/react.production.min.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"
></script>
</head>
<body>
<div id="root"></div>
<script type="text/javascript">
let el = React.createElement;
class Counter extends React.Component {
constructor() {
super(...arguments);
this.state = {
counter: 0,
};
this._increment = this._increment.bind(this);
}
_increment() {
this.setState({counter: this.state.counter + 1});
}
render() {
return React.createElement(
'button',
{onClick: this._increment},
this.state.counter
);
}
}
function AnotherCounter(props) {
let [state, dispatch] = React.useState(0);
return React.createElement(
'button',
{onClick: () => dispatch(state + 1)},
state
);
}
let container = document.getElementById('root');
if (container) {
let element = React.createElement(AnotherCounter, null, null);
ReactDOM.render(element, container);
}
</script>
</body>
</html>
@broerjuang
Copy link
Author

TODO APPS

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script
      crossorigin
      src="https://unpkg.com/react@16/umd/react.production.min.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"
    ></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/javascript">
      function reducer(state, action) {
        switch (action.type) {
          case 'ADD_TODO': {
            return {
              currentTodo: '',
              todos: [action.todo, ...state.todos],
            };
          }
          case 'REMOVE_TODO': {
            return {
              ...state,
              todos: state.todos.filter(todo => todo.id === action.id),
            };
          }
          case 'ON_CHANGE_CURRENT_TODO': {
            return {
              ...state,
              currentTodo: action.currentTodo,
            };
          }
          default: {
            return state;
          }
        }
      }

      let initialState = {currentTodo: '', todos: []};

      function Todo(props) {
        let [state, dispatch] = React.useReducer(reducer, initialState);
        return React.createElement(
          'div',
          null,
          [
            React.createElement(
              'input',
              {
                onChange: e =>
                  dispatch({
                    type: 'ON_CHANGE_CURRENT_TODO',
                    currentTodo: e.target.value,
                  }),
                value: state.currentTodo,
              },
              null
            ),
            React.createElement(
              'button',
              {
                onClick: () =>
                  dispatch({
                    type: 'ADD_TODO',
                    todo: {id: Math.random(), title: state.currentTodo},
                  }),
              },
              'add todo'
            ),
          ],
          React.createElement(
            'div',
            null,
            React.createElement(
              'ul',
              null,
              state.todos.map(todo => el('li', null, todo.title))
            )
          )
        );
      }

      let container = document.getElementById('root');

      if (container) {
        let element = React.createElement(Todo, null, null);
        ReactDOM.render(element, container);
      }
    </script>
  </body>
</html>

@broerjuang
Copy link
Author

TODO REDUCER PATTERN

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script
      crossorigin
      src="https://unpkg.com/react@16/umd/react.production.min.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"
    ></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/javascript">
      let el = React.createElement;
      function reducer(state, action) {
        switch (action.type) {
          case 'ADD_TODO': {
            return {
              currentTodo: '',
              todos: [action.todo, ...state.todos],
            };
          }
          case 'REMOVE_TODO': {
            return {
              ...state,
              todos: state.todos.filter(todo => todo.id !== action.id),
            };
          }
          case 'ON_CHANGE_CURRENT_TODO': {
            return {
              ...state,
              currentTodo: action.currentTodo,
            };
          }
          default: {
            return state;
          }
        }
      }

      class Todo extends React.Component {
        constructor() {
          super(...arguments);
          this.state = {
            currentTodo: '',
            todos: [],
          };
          this.dispatch = this.dispatch.bind(this);
        }

        dispatch(action) {
          let newState = reducer(this.state, action);
          return this.setState(newState);
        }

        render() {
          let {state, dispatch} = this;
          return el(
            'form',
            {
              onSubmit: e => {
                e.preventDefault();
              },
            },
            [
              el(
                'input',
                {
                  onChange: e =>
                    dispatch({
                      type: 'ON_CHANGE_CURRENT_TODO',
                      currentTodo: e.target.value,
                    }),
                  value: state.currentTodo,
                },
                null
              ),
              el(
                'button',
                {
                  onClick: () =>
                    dispatch({
                      type: 'ADD_TODO',
                      todo: {id: Math.random(), title: state.currentTodo},
                    }),
                },
                'add todo'
              ),
            ],
            el(
              'div',
              null,
              el(
                'ul',
                null,
                state.todos.map(todo =>
                  el(
                    'li',
                    {
                      onClick: () =>
                        dispatch({type: 'REMOVE_TODO', id: todo.id}),
                    },
                    todo.title
                  )
                )
              )
            )
          );
        }
      }

      let container = document.getElementById('root');

      if (container) {
        let element = React.createElement(Todo, null, null);
        ReactDOM.render(element, container);
      }
    </script>
  </body>
</html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment