CodeSoom · moonkii · Dec 12, 2021 · Dec 7, 2021 · Dec 7, 2021 · Dec 7, 2021
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -5,6 +5,7 @@ module.exports = {
   },
   extends: [
     'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
     'airbnb',
   ],
   parserOptions: {
@@ -25,6 +26,17 @@ module.exports = {
     Scenario: 'readonly',
   },
   rules: {
+    'react/function-component-definition': [2, {
+      namedComponents: 'function-declaration',
+    }],
+    'react/prop-types': 'off',
+    'react/jsx-no-bind': ['error', {
+      ignoreRefs: true,
+      allowArrowFunctions: true,
+      allowFunctions: false,
+      allowBind: false,
+      ignoreDOMComponents: true,
+    }],
     indent: ['error', 2],
     'no-trailing-spaces': 'error',
     curly: 'error',

diff --git a/index.html b/index.html
@@ -7,8 +7,9 @@
 </head>
 
 <body>
+  <div>Counter</div>
   <div id="app"></div>
   <script src="main.js"></script>
 </body>
 
-</html>
+</html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,12 +19,12 @@
     "@codeceptjs/configure": "^0.6.2",
     "babel-loader": "^8.2.2",
     "codeceptjs": "^3.0.6",
-    "eslint": "^7.25.0",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.23.2",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint": "^8.4.1",
+    "eslint-config-airbnb": "^19.0.2",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.27.1",
+    "eslint-plugin-react-hooks": "^4.3.0",
     "puppeteer": "^9.0.0",
     "start-server-and-test": "^1.12.1",
     "webpack": "^5.36.2",

diff --git a/src/components/App.jsx b/src/components/App.jsx
@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+
+import Page from './Page';
+
+export default function App() {
+  const [state, setState] = useState({
+    count: 0,
+  });
+  const { count } = state;
+
+  const handleClick = (number) => {
+    setState({
+      ...state,
+      count: count + number,
+    });
+  };
+
+  return (
+    <Page
+      onClick={handleClick}
+      count={count}
+    />
+  );
+}
diff --git a/src/components/Buttons.jsx b/src/components/Buttons.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import NumberButton from './NumberButton';
+
+export default function Buttons({ onClick }) {
+  const numbers = [1, 2, 3, 4, 5];
+  return (
+    <div>
+      {numbers.map((i) => (
+        <NumberButton
+          key={i}
+          onClick={() => onClick(i)}
+        >
+          {i}
+        </NumberButton>
+      ))}
+    </div>
+
+  );
+}
diff --git a/src/components/NumberButton.jsx b/src/components/NumberButton.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+export default function NumberButton({ onClick, children }) {
+  return (
+    <button
+      onClick={onClick}
+      type="button"
+    >
+      {children}
+    </button>
+  );
+}
diff --git a/src/components/Page.jsx b/src/components/Page.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import Buttons from './Buttons';
+import NumberButton from './NumberButton';
+
+export default function Page({ onClick, count }) {
+  return (
+    <div>
+      <NumberButton
+        onClick={() => onClick(1)}
+        number={1}
+      >
+        Click me (
+        {count}
+        )
+      </NumberButton>
+      <Buttons onClick={onClick} />
+    </div>
+  );
+}
diff --git a/src/index.jsx b/src/index.jsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+import ReactDOM from 'react-dom';
+
+import App from './components/App';
+
+ReactDOM.render(<App />, document.getElementById('app'));
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,6 +1,7 @@
 const path = require('path');
 
 module.exports = {
+  mode: 'development',
   entry: path.resolve(__dirname, 'src/index.jsx'),
   module: {
     rules: [