initial commit

jun68ykt · Aug 19, 2019 · 601f340 · 601f340
commit 601f340
Show file tree

Hide file tree

Showing 11 changed files with 10,250 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,26 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+/.idea
+
diff --git a/README.md b/README.md
@@ -0,0 +1,9 @@
+# tl;dr
+
+This repo contains my answer codes of a React app for
+[the question No.206957 of teratail](https://teratail.com/questions/206957), which is a Japanese Programming Q&A site.
+
+# how to run
+
+- yarn install
+- yarn start
diff --git a/package.json b/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "q206957",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
+    "react-redux": "^7.1.0",
+    "react-scripts": "3.1.1",
+    "redux": "^4.0.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <meta charset="utf-8" />
+    <title>Q206957</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/src/actions/index.js b/src/actions/index.js
@@ -0,0 +1,14 @@
+export const INCREMENT = 'INCREMENT'
+export const DECREMENT = 'DECREMENT'
+
+export const onIncrement = () => {
+  return {
+    type: INCREMENT
+  }
+}
+
+export const onDecrement = () => {
+  return {
+    type: DECREMENT
+  }
+}
diff --git a/src/components/Counter.js b/src/components/Counter.js
@@ -0,0 +1,13 @@
+import React from 'react';
+
+const Counter = ({ count, increment, decrement }) => {
+  return (
+    <div>
+      <span>{count}</span>
+      <button onClick={increment}>+1</button>
+      <button onClick={decrement}>-1</button>
+    </div>
+  );
+};
+
+export default Counter
diff --git a/src/containers/Counter.js b/src/containers/Counter.js
@@ -0,0 +1,14 @@
+import Counter from '../components/Counter'
+import { onIncrement, onDecrement } from '../actions'
+import { connect } from 'react-redux';
+
+const mapStateToProps = (state) => ({
+  count: state.counterReducer.count
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  increment: () => dispatch(onIncrement()),
+  decrement: () => dispatch(onDecrement())
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(Counter)
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from 'react-dom';
+import { Provider } from 'react-redux';
+import { createStore } from 'redux';
+import CounterContainer from './containers/Counter';
+import reducer from './reducers'
+
+const store = createStore(reducer);
+
+render(
+  <Provider store={store}>
+    <CounterContainer />
+    {/* ここにもう一つカウンターを設置したい */}
+  </Provider>,
+  document.getElementById('root')
+);
diff --git a/src/reducers/counter.js b/src/reducers/counter.js
@@ -0,0 +1,19 @@
+import { INCREMENT, DECREMENT } from '../actions'
+
+export const counterReducer = (state = {count: 0}, action) => {
+  switch (action.type) {
+    case INCREMENT:
+      return {
+        ...state,
+        count: state.count + 1
+      }
+    case DECREMENT:
+      return {
+        ...state,
+        count: state.count - 1
+      }
+    default:
+      return state
+  }
+}
+export default counterReducer
diff --git a/src/reducers/index.js b/src/reducers/index.js
@@ -0,0 +1,8 @@
+import { combineReducers } from 'redux'
+import { counterReducer } from './counter'
+
+const reducer = combineReducers({
+  counterReducer,
+})
+
+export default reducer