diff --git a/.eslintrc.js b/.eslintrc.js
index 9f325a7d2..13260b501 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -3,10 +3,7 @@ module.exports = {
     browser: true,
     es2021: true,
   },
-  extends: [
-    'plugin:react/recommended',
-    'airbnb',
-  ],
+  extends: ['plugin:react/recommended', 'airbnb'],
   parserOptions: {
     ecmaFeatures: {
       jsx: true,
@@ -14,9 +11,7 @@ module.exports = {
     ecmaVersion: 12,
     sourceType: 'module',
   },
-  plugins: [
-    'react',
-  ],
+  plugins: ['react'],
   globals: {
     Atomics: 'readonly',
     SharedArrayBuffer: 'readonly',
@@ -45,8 +40,9 @@ module.exports = {
     'object-curly-spacing': ['error', 'always'],
     'key-spacing': ['error', { mode: 'strict' }],
     'arrow-spacing': ['error', { before: true, after: true }],
-
     'react/prop-types': 'off',
     'react/react-in-jsx-scope': 'off',
+    'import/extensions': 'off',
+    'import/no-unresolved': 'off',
   },
 };
diff --git a/src/App.jsx b/src/App.jsx
new file mode 100644
index 000000000..7a46c5628
--- /dev/null
+++ b/src/App.jsx
@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+import ClickMeButton from './components/ClickMeButton';
+import NumberButtons from './components/NumberButtons';
+
+export default function App() {
+  const [counterNumber, setCounterNumber] = useState(0);
+
+  function handlerClickButton({ number }) {
+    setCounterNumber(counterNumber + number);
+  }
+
+  return (
+    <div>
+      <p>Counter</p>
+      <ClickMeButton
+        counterNumber={counterNumber}
+        onClick={handlerClickButton}
+        number={1}
+      />
+      <br />
+      <NumberButtons onClick={handlerClickButton} />
+    </div>
+  );
+}
diff --git a/src/components/ClickMeButton.jsx b/src/components/ClickMeButton.jsx
new file mode 100644
index 000000000..8b556d322
--- /dev/null
+++ b/src/components/ClickMeButton.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function ClickMeButton({ counterNumber, onClick, number }) {
+  return (
+    <button type="button" onClick={() => onClick({ number })}>
+      Click me ({counterNumber})
+    </button>
+  );
+}
diff --git a/src/components/NumberButtons.jsx b/src/components/NumberButtons.jsx
new file mode 100644
index 000000000..f028aeadc
--- /dev/null
+++ b/src/components/NumberButtons.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function NumberButtons({ handlerClickButton }) {
+  return [1, 2, 3, 4, 5].map((i) => (
+    <button type="button" onClick={() => handlerClickButton({ number: i })}>
+      {i}
+    </button>
+  ));
+}
diff --git a/src/index.jsx b/src/index.jsx
index e69de29bb..a22f17594 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -0,0 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('app'));