react-playground initial commit

agjs · agjs · commit 91d7a8a5d8dc · 2018-07-20T15:23:45.000+02:00
diff --git a/README.md b/README.md
@@ -0,0 +1,21 @@
+# React Playground
+
+This simple repository is useful for testing React features and profiling. Since we are pulling
+dependencies from CDN, there's no need for installing, bundling or configuring anything. Just clone
+the repo and play with React.
+
+The idea is to completely remove any side effects and focus purely on React and its ecosystem.
+
+If you create new components or any JSX files in general, don't forget to include them under your
+index.html scripts.
+
+_This repository is not inteded for providing production ready tooling nor for builing projects in general. You should primarly use it as a playground to test out internal features, measure preformances and similar._
+
+## What's included
+
+- React 16
+- ReactRedux
+- ReactDOM
+- Redux
+
+Don't forget to add all the nasty React and Redux tools for your browser.
diff --git a/app.jsx b/app.jsx
@@ -0,0 +1,7 @@
+class App extends React.Component {
+  render() {
+    return <Main />;
+  }
+}
+
+ReactDOM.render(<App />, document.getElementById('react-app'));
diff --git a/components/Main.jsx b/components/Main.jsx
@@ -0,0 +1,7 @@
+const Main = props => {
+  return (
+    <ReactRedux.Provider store={store}>
+      <Message />
+    </ReactRedux.Provider>
+  );
+};
diff --git a/components/Message.jsx b/components/Message.jsx
@@ -0,0 +1,15 @@
+class Message extends React.Component {
+  changeMessage = () => {
+    this.props.dispatch({ type: 'BAZ_ACTION', payload: 'bazzing' });
+  };
+  render() {
+    return (
+      <React.Fragment>
+        <h1>{this.props.foo}</h1>
+        <button onClick={this.changeMessage}>Change me</button>
+      </React.Fragment>
+    );
+  }
+}
+
+Message = ReactRedux.connect(state => state)(Message);
diff --git a/index.html b/index.html
@@ -0,0 +1,25 @@
+<!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">
+  <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
+  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
+  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+  <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.0/redux.min.js"></script>
+  <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.7/react-redux.min.js"></script>
+  <title>React Playground</title>
+</head>
+
+<body>
+  <div id="react-app"></div>
+  <script type="text/babel" src="store/reducers/foo.reducer.js"></script>
+  <script type="text/babel" src="store/index.js"></script>
+  <script type="text/babel" src="components/Main.jsx"></script>
+  <script type="text/babel" src="components/Message.jsx"></script>
+  <script type="text/babel" src="app.jsx"></script>
+</body>
+
+</html>
diff --git a/store/index.js b/store/index.js
@@ -0,0 +1,4 @@
+const store = Redux.createStore(
+  fooReducer,
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+);
diff --git a/store/reducers/foo.reducer.js b/store/reducers/foo.reducer.js
@@ -0,0 +1,9 @@
+const BAZ_ACTION = 'BAZ_ACTION';
+
+const fooReducer = (state = { foo: 'bar' }, action) => {
+  switch (action.type) {
+    case BAZ_ACTION:
+      return Object.assign({}, { foo: action.payload });
+  }
+  return state;
+};
